/* ==========================================================================
   STUDIO — Design Tokens
   Single source of truth for colour, type, spacing, radius, elevation, motion.
   Change values here; every component reads from these variables.
   ========================================================================== */

:root {
  /* ---- Colour: surfaces --------------------------------------------- */
  --bg:            #F7F7F4;   /* warm paper white — page background        */
  --bg-elev:       #FFFFFF;   /* cards, browser chrome                       */
  --bg-sunk:       #EFEFEB;   /* inputs, wells                               */
  --night:         #08090B;   /* dark product stages (radar, final CTA)      */
  --night-2:       #101216;
  --night-3:       #181B21;

  /* ---- Colour: ink -------------------------------------------------- */
  --ink:           #0B0B0D;
  --ink-2:         #34343A;
  --ink-3:         #6B6B73;
  --ink-4:         #A3A3AB;
  --ink-inv:       #F5F5F2;
  --ink-inv-2:     rgba(245, 245, 242, .64);
  --ink-inv-3:     rgba(245, 245, 242, .38);

  /* ---- Colour: lines ------------------------------------------------ */
  --line:          rgba(11, 11, 13, .07);
  --line-2:        rgba(11, 11, 13, .12);
  --line-3:        rgba(11, 11, 13, .20);
  --line-inv:      rgba(255, 255, 255, .08);
  --line-inv-2:    rgba(255, 255, 255, .14);

  /* ---- Colour: signal accent (used sparingly: 1 per viewport) ------- */
  --accent:        #FF5B1F;
  --accent-2:      #FF8A5C;
  --accent-soft:   rgba(255, 91, 31, .10);
  --accent-glow:   rgba(255, 91, 31, .28);

  /* ---- Colour: status ----------------------------------------------- */
  --ok:            #16A34A;
  --warn:          #E8A317;
  --err:           #DC2626;

  /* ---- Type --------------------------------------------------------- */
  /* System stack = zero font requests, no GDPR issues, Apple-grade on macOS/iOS.
     To use a self-hosted brand font, add @font-face in base.css and prepend it here. */
  --font-sans:  "SF Pro Display", -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI Variable", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-text:  "SF Pro Text", -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI Variable", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:  ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace;
  --font-serif: "New York", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;

  /* Fluid type scale (min @ 360px → max @ 1440px) */
  --fs-mega:    clamp(3.4rem, 1.2rem + 9.6vw, 11rem);   /* final CTA            */
  --fs-display: clamp(2.75rem, 1.4rem + 5.6vw, 6.75rem); /* hero                */
  --fs-h1:      clamp(2.25rem, 1.3rem + 4vw, 5rem);      /* section titles      */
  --fs-h2:      clamp(1.75rem, 1.2rem + 2.2vw, 3.25rem);
  --fs-h3:      clamp(1.25rem, 1.1rem + .6vw, 1.625rem);
  --fs-lead:    clamp(1.0625rem, 1rem + .45vw, 1.375rem);
  --fs-body:    1rem;
  --fs-sm:      .875rem;
  --fs-xs:      .75rem;

  --lh-tight:   1.02;
  --lh-snug:    1.15;
  --lh-body:    1.55;

  --tracking-display: -0.045em;
  --tracking-tight:   -0.03em;
  --tracking-snug:    -0.015em;
  --tracking-caps:     0.08em;

  /* ---- Spacing (4pt base) ------------------------------------------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px;  --s-10: 128px; --s-11: 176px;
  --section-y: clamp(96px, 7vw + 48px, 192px);
  --gutter:    clamp(16px, 4vw, 48px);
  --max:       1320px;
  --max-wide:  1560px;
  --max-text:  640px;

  /* ---- Radius ------------------------------------------------------- */
  --r-xs: 6px;  --r-sm: 10px; --r-md: 16px; --r-lg: 24px;
  --r-xl: 36px; --r-2xl: 56px; --r-pill: 999px;

  /* ---- Elevation (layered, soft — never a single hard shadow) ------- */
  --shadow-1: 0 1px 2px rgba(11,11,13,.04), 0 1px 1px rgba(11,11,13,.03);
  --shadow-2: 0 1px 2px rgba(11,11,13,.04), 0 4px 12px -2px rgba(11,11,13,.06), 0 12px 32px -8px rgba(11,11,13,.08);
  --shadow-3: 0 2px 4px rgba(11,11,13,.04), 0 12px 24px -6px rgba(11,11,13,.08), 0 40px 80px -24px rgba(11,11,13,.18);
  --shadow-float: 0 1px 1px rgba(11,11,13,.03), 0 24px 48px -12px rgba(11,11,13,.16), 0 80px 120px -40px rgba(11,11,13,.24);
  --ring: 0 0 0 1px var(--line-2);

  /* ---- Glass (use only on overlays: nav, floating chips, hover info) - */
  --glass-bg:     rgba(255, 255, 255, .72);
  --glass-border: rgba(255, 255, 255, .6);
  --glass-blur:   saturate(180%) blur(20px);

  /* ---- Motion ------------------------------------------------------- */
  --ease-out:    cubic-bezier(.16, 1, .3, 1);     /* expo-out — default    */
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);  /* micro-overshoot       */
  --t-fast: 160ms;
  --t-base: 320ms;
  --t-slow: 720ms;
  --t-reveal: 1100ms;

  --z-nav: 100;
  --z-overlay: 200;
}