/* =========================================================================
   MOTRAVAX OÜ — DESIGN TOKENS
   Single source of truth. No component hard-codes a raw value.
   Direction derived from the splanfitness reference: light editorial base,
   inset rounded panels, one green signal colour, oversized tight headings.
   ========================================================================= */

:root {
  /* ---------- RAW RAMPS (never referenced by components directly) ------ */
  --ramp-paper-000: #ffffff;
  --ramp-paper-050: #fbfbfa;
  --ramp-paper-100: #f4f4f2;
  --ramp-paper-200: #ebebe8;
  --ramp-paper-300: #dedeDA;

  --ramp-ink-900: #0c0c0e;
  --ramp-ink-800: #141416;
  --ramp-ink-700: #1e1e21;
  --ramp-ink-600: #2c2d31;
  --ramp-ink-500: #4a4c52;
  --ramp-ink-400: #6c6f77;
  --ramp-ink-300: #92959d;
  --ramp-ink-200: #b8bac0;

  --ramp-signal-900: #04251b;
  --ramp-signal-800: #073d2d;
  --ramp-signal-700: #0a5540;
  --ramp-signal-600: #0e7c5a;
  --ramp-signal-500: #16a172;
  --ramp-signal-400: #3ddc91;
  --ramp-signal-100: #ddf7ea;

  --ramp-clay-500: #b4603a;
  --ramp-ok-500: #16a172;
  --ramp-warn-500: #b4823a;
  --ramp-error-500: #b4423a;

  /* ---------- SEMANTIC SURFACES ---------------------------------------- */
  --surface-page: var(--ramp-paper-050);
  --surface-card: var(--ramp-paper-000);
  --surface-panel: var(--ramp-paper-100);
  --surface-sunken: var(--ramp-paper-200);
  --surface-inverse: var(--ramp-ink-900);
  --surface-accent: var(--ramp-signal-600);
  --surface-glass: color-mix(in srgb, var(--ramp-paper-000) 72%, transparent);
  --surface-glass-inverse: color-mix(in srgb, var(--ramp-ink-900) 78%, transparent);

  /* ---------- SEMANTIC TEXT -------------------------------------------- */
  --text-primary: var(--ramp-ink-900);
  --text-secondary: var(--ramp-ink-500);
  --text-muted: var(--ramp-ink-400);
  --text-accent: var(--ramp-signal-600);
  --text-on-accent: var(--ramp-paper-000);
  --text-on-inverse: var(--ramp-paper-050);
  --text-on-inverse-muted: var(--ramp-ink-300);

  /* ---------- HAIRLINES (never a flat grey border) --------------------- */
  --line-hairline: color-mix(in srgb, var(--ramp-ink-900) 7%, transparent);
  --line-soft: color-mix(in srgb, var(--ramp-ink-900) 11%, transparent);
  --line-strong: color-mix(in srgb, var(--ramp-ink-900) 20%, transparent);
  --line-inverse: color-mix(in srgb, var(--ramp-paper-000) 12%, transparent);
  --line-accent: var(--ramp-signal-500);

  /* ---------- STATUS ---------------------------------------------------- */
  --status-ok: var(--ramp-ok-500);
  --status-warn: var(--ramp-warn-500);
  --status-error: var(--ramp-error-500);

  /* ---------- TYPE ------------------------------------------------------ */
  --font-display: "Clash Display", "Archivo Expanded", system-ui, sans-serif;
  --font-body: "Manrope", "Plus Jakarta Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  --size-3xs: 0.6875rem;
  --size-2xs: 0.75rem;
  --size-xs: 0.8125rem;
  --size-sm: 0.9375rem;
  --size-md: 1.0625rem;
  --size-lg: clamp(1.125rem, 0.94rem + 0.6vw, 1.375rem);
  --size-xl: clamp(1.375rem, 1.05rem + 1.1vw, 1.875rem);
  --size-2xl: clamp(1.875rem, 1.2rem + 2.4vw, 3rem);
  --size-3xl: clamp(2.375rem, 1.35rem + 4vw, 4.25rem);
  --size-4xl: clamp(2.875rem, 1.2rem + 6.6vw, 6.5rem);

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --leading-tight: 1.02;
  --leading-snug: 1.16;
  --leading-normal: 1.55;
  --leading-relaxed: 1.72;

  --tracking-tighter: -0.035em;
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;
  --tracking-widest: 0.2em;

  /* ---------- SPACE — deliberately generous ---------------------------- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.25rem;
  --space-xl: 3.5rem;
  --space-2xl: 5.5rem;
  --space-3xl: 8rem;
  --space-4xl: 11rem;

  --section-y: clamp(var(--space-2xl), 9vw, var(--space-4xl));
  --gutter: clamp(var(--space-sm), 4vw, var(--space-xl));

  /* ---------- LAYOUT ---------------------------------------------------- */
  --measure: 62ch;
  --container-max: 1440px;
  --container-narrow: 820px;
  --grid-gap: clamp(var(--space-sm), 2vw, var(--space-lg));

  /* ---------- RADII — squircle scale, concentric pairs ------------------ */
  --radius-xs: 6px;
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 32px;
  --radius-xl: 44px;
  --radius-pill: 999px;
  --bezel-gap: 8px;                                   /* outer shell padding */
  --radius-inner-md: calc(var(--radius-md) - var(--bezel-gap));
  --radius-inner-lg: calc(var(--radius-lg) - var(--bezel-gap));
  --radius-inner-xl: calc(var(--radius-xl) - var(--bezel-gap));

  /* ---------- ELEVATION — diffused ambient only, never harsh ----------- */
  --shadow-ambient:
    0 1px 2px color-mix(in srgb, var(--ramp-ink-900) 4%, transparent),
    0 12px 32px -20px color-mix(in srgb, var(--ramp-ink-900) 18%, transparent);
  --shadow-lifted:
    0 2px 4px color-mix(in srgb, var(--ramp-ink-900) 4%, transparent),
    0 28px 60px -32px color-mix(in srgb, var(--ramp-ink-900) 26%, transparent);
  --shadow-float:
    0 4px 8px color-mix(in srgb, var(--ramp-ink-900) 5%, transparent),
    0 48px 96px -40px color-mix(in srgb, var(--ramp-ink-900) 30%, transparent);
  --shadow-inset-highlight: inset 0 1px 1px color-mix(in srgb, var(--ramp-paper-000) 80%, transparent);
  --shadow-inset-highlight-inverse: inset 0 1px 1px color-mix(in srgb, var(--ramp-paper-000) 14%, transparent);

  /* ---------- MOTION — spring-ish, never linear/ease-in-out ------------ */
  --dur-instant: 120ms;
  --dur-fast: 220ms;
  --dur-base: 420ms;
  --dur-slow: 700ms;
  --dur-cinematic: 1100ms;

  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-entrance: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit: cubic-bezier(0.55, 0, 1, 0.45);
  --stagger-step: 90ms;

  /* ---------- ICONS — ultra-light strokes ------------------------------ */
  --icon-xs: 14px;
  --icon-sm: 18px;
  --icon-md: 22px;
  --icon-lg: 30px;
  --icon-xl: 44px;
  --icon-stroke: 1.1;
  --icon-stroke-bold: 1.4;

  /* ---------- COMPONENT TOKENS ----------------------------------------- */
  --control-height: 52px;
  --control-height-sm: 40px;
  --control-padding-x: var(--space-md);

  --btn-primary-bg: var(--surface-inverse);
  --btn-primary-fg: var(--text-on-inverse);
  --btn-accent-bg: var(--surface-accent);
  --btn-accent-fg: var(--text-on-accent);
  --btn-nested-size: 32px;

  --card-bg: var(--surface-card);
  --card-radius: var(--radius-lg);
  --card-padding: clamp(var(--space-md), 2.6vw, var(--space-lg));

  --nav-top-offset: var(--space-md);
  --nav-height: 60px;
  --focus-ring: 2px solid var(--ramp-signal-600);
  --focus-offset: 3px;

  --grain-opacity: 0.028;
  --z-overlay: 70;
  --z-nav: 75;   /* above the menu overlay so the burger can close it */
  --z-grain: 80;
  --z-toast: 90;
}

/* ---------- DARK THEME (opt-in, respected across every component) ------ */
[data-theme="dark"] {
  --surface-page: var(--ramp-ink-900);
  --surface-card: var(--ramp-ink-800);
  --surface-panel: var(--ramp-ink-700);
  --surface-sunken: var(--ramp-ink-800);
  --surface-inverse: var(--ramp-paper-050);
  --surface-glass: color-mix(in srgb, var(--ramp-ink-900) 72%, transparent);
  --surface-glass-inverse: color-mix(in srgb, var(--ramp-paper-050) 82%, transparent);

  --text-primary: var(--ramp-paper-050);
  --text-secondary: var(--ramp-ink-200);
  --text-muted: var(--ramp-ink-300);
  --text-accent: var(--ramp-signal-400);
  --text-on-inverse: var(--ramp-ink-900);
  --text-on-inverse-muted: var(--ramp-ink-500);

  --line-hairline: color-mix(in srgb, var(--ramp-paper-000) 8%, transparent);
  --line-soft: color-mix(in srgb, var(--ramp-paper-000) 12%, transparent);
  --line-strong: color-mix(in srgb, var(--ramp-paper-000) 22%, transparent);
  --line-inverse: color-mix(in srgb, var(--ramp-ink-900) 14%, transparent);

  --btn-primary-bg: var(--ramp-paper-050);
  --btn-primary-fg: var(--ramp-ink-900);

  --shadow-ambient: 0 1px 2px rgb(0 0 0 / 0.4), 0 12px 32px -20px rgb(0 0 0 / 0.7);
  --shadow-lifted: 0 2px 4px rgb(0 0 0 / 0.4), 0 28px 60px -32px rgb(0 0 0 / 0.8);
  --shadow-float: 0 4px 8px rgb(0 0 0 / 0.4), 0 48px 96px -40px rgb(0 0 0 / 0.85);
  --shadow-inset-highlight: inset 0 1px 1px color-mix(in srgb, var(--ramp-paper-000) 10%, transparent);

  --grain-opacity: 0.05;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 1ms;
    --dur-fast: 1ms;
    --dur-base: 1ms;
    --dur-slow: 1ms;
    --dur-cinematic: 1ms;
    --stagger-step: 0ms;
  }
}