/* ============================================================
   tokens.css · the single source of truth for the look
   Change a value here and it updates everywhere.
   To change the accent colour, edit --accent in BOTH themes below.
   ============================================================ */

:root {
  /* ---- WARM LIGHT (default) ---- */
  --ink:        #16130F;   /* main text, near-black with warmth */
  --paper:      #F4F0E7;   /* page background */
  --surface:    #FBF8F1;   /* cards, raised panels */
  --surface-2:  #EFEADD;   /* slightly deeper panel */
  --muted:      #6E665A;   /* secondary text */
  --hairline:   #E2DCCF;   /* borders, dividers */
  --accent:     #FF5A36;   /* coral-red · used with restraint */
  --accent-ink: #FFFFFF;   /* text on accent */
  --support:    #0E5E4E;   /* deep teal · rare second colour */
  --glow:       rgba(255, 200, 120, 0.35); /* warm light bloom */
  --shadow:     rgba(40, 30, 18, 0.14);
  --grain-opacity: 0.05;
}

:root[data-theme="dark"] {
  /* ---- WARM DARK ---- */
  --ink:        #F1EDE2;
  --paper:      #14110D;
  --surface:    #1E1A14;
  --surface-2:  #25201A;
  --muted:      #A79C8B;
  --hairline:   #2E281F;
  --accent:     #FF6B47;   /* slightly hotter coral so it pops on dark */
  --accent-ink: #14110D;
  --support:    #46C3A6;
  --glow:       rgba(255, 170, 90, 0.18);
  --shadow:     rgba(0, 0, 0, 0.5);
  --grain-opacity: 0.07;
}

:root {
  /* ---- TYPE ---- */
  --font-display: "Fraunces", "Times New Roman", serif;
  --font-body:    "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* fluid type scale (desktop targets in the brief) */
  --t-display-1: clamp(3.25rem, 1.2rem + 8.6vw, 6.875rem); /* 52 → 110px */
  --t-display-2: clamp(2.25rem, 1.3rem + 4vw,   4rem);     /* 36 → 64px  */
  --t-heading:   clamp(1.6rem, 1.1rem + 2.1vw,  2.5rem);   /* 26 → 40px  */
  --t-body:      clamp(1.05rem, 1rem + 0.3vw,   1.25rem);  /* 17 → 20px  */
  --t-small:     0.78rem;                                   /* labels     */

  --leading-tight: 1.02;
  --leading-body:  1.6;
  --tracking-display: -0.025em;
  --tracking-label:   0.14em;

  /* ---- SPACING (4-base scale) ---- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-6: 24px;  --s-8: 32px;  --s-12: 48px; --s-16: 64px;
  --s-24: 96px; --s-32: 128px;

  /* ---- LAYOUT ---- */
  --maxw: 1180px;
  --gutter: clamp(20px, 4vw, 40px);
  --radius: 14px;
  --radius-lg: 22px;

  /* ---- MOTION ---- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);   /* primary signature easing */
  --ease-soft: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 0.4s;
  --dur: 0.6s;
  --dur-slow: 0.9s;

  --nav-h: 68px;
  --z-nav: 100;
  --z-overlay: 200;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0.01s; --dur: 0.01s; --dur-slow: 0.01s; }
}