/* ==========================================================================
   tokens.css — Design system: the single source of visual truth.
   Palette, fluid type scale, spacing, easing, motion, and the three act themes.
   Every other stylesheet consumes these semantic variables — never hard-coded
   colors — so the three movements stay coherent while their mood shifts.
   ========================================================================== */

/* ---- Self-hosted variable fonts (offline-safe, with system fallbacks) ---- */
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: block; /* local + tiny: block briefly rather than swap mid-rise */
}
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-wght-italic.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: block;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: block;
}

:root {
  /* ---- Type families ---- */
  --font-display: "Fraunces", Georgia, "Times New Roman", "Iowan Old Style", serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;

  /* ---- Fluid type scale (min .. max via clamp; 320px → 1600px viewport) ---- */
  --step--2: clamp(0.69rem, 0.66rem + 0.16vw, 0.79rem);
  --step--1: clamp(0.83rem, 0.78rem + 0.27vw, 0.99rem);
  --step-0:  clamp(1.05rem, 0.98rem + 0.36vw, 1.27rem);   /* body */
  --step-1:  clamp(1.27rem, 1.15rem + 0.6vw, 1.63rem);
  --step-2:  clamp(1.53rem, 1.34rem + 0.95vw, 2.1rem);
  --step-3:  clamp(1.85rem, 1.55rem + 1.5vw, 2.7rem);     /* sub-headline */
  --step-4:  clamp(2.24rem, 1.76rem + 2.4vw, 3.48rem);    /* headline */
  --step-5:  clamp(2.7rem, 1.93rem + 3.85vw, 4.5rem);     /* section title */
  --step-6:  clamp(3.0rem, 1.9rem + 5.5vw, 6.2rem);       /* moment */
  --step-7:  clamp(3.4rem, 1.9rem + 7.5vw, 8.2rem);       /* hero / the line */

  /* ---- Spacing scale ---- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2.25rem;
  --space-xl:  3.5rem;
  --space-2xl: 5.5rem;
  --space-3xl: 8rem;
  --space-4xl: 12rem;

  /* ---- Layout ---- */
  --container: 72rem;        /* 1152px */
  --container-wide: 84rem;   /* 1344px */
  --container-narrow: 52rem; /* 832px */
  --measure: 38ch;           /* readable prose width */
  --measure-wide: 60ch;
  --gutter: clamp(1.25rem, 0.8rem + 3vw, 3.5rem);
  --section-pad: clamp(5rem, 9vh + 2rem, 11rem);
  --radius-s: 0.5rem;
  --radius-m: 0.9rem;
  --radius-l: 1.4rem;
  --radius-pill: 999px;
  --hairline: 1px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);      /* expo-out, cinematic settle */
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);  /* reserve — ambient loops use --ease-breathe */
  --ease-soft: cubic-bezier(0.33, 0.1, 0.25, 1);
  --ease-breathe: cubic-bezier(0.37, 0, 0.63, 1); /* sine-in-out — every idle loop breathes on this */
  --ease-settle: cubic-bezier(0.18, 1.25, 0.4, 1); /* slight overshoot (~2%) for word rises */
  /* True damped-spring decay (ζ≈0.5, sampled) for OBJECT entrances — case
     figures, nav dot. Text keeps the calm expo-out; objects arrive with mass. */
  --ease-spring: linear(
    0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.281 6.5%, 0.723 12.6%, 0.938 16.3%,
    1.017 18.3%, 1.077 20.6%, 1.121 22.7%, 1.149 24.8%, 1.163 27%, 1.154 31%,
    1.069 39.4%, 1.014 44.7%, 0.982 51%, 0.974 56.1%, 0.975 60.6%, 1.003 74.4%,
    1.004 86.6%, 1
  );
  --dur-0: 0.18s;            /* interaction tier: hover/focus answer instantly */
  --dur-1: 0.45s;
  --dur-2: 0.85s;
  --dur-3: 1.3s;
  --reveal-shift: 30px;      /* default reveal translate distance */
  --stagger: 90ms;           /* default reveal-group step */

  /* ---- Shadows / depth ---- */
  --shadow-soft: 0 1px 2px rgba(10, 12, 20, 0.04),
                 0 8px 30px -12px rgba(10, 12, 20, 0.18);
  --shadow-lift: 0 2px 6px rgba(10, 12, 20, 0.06),
                 0 24px 60px -24px rgba(10, 12, 20, 0.32);

  /* ---- Z layers ---- */
  --z-bg: 0;
  --z-content: 1;
  --z-chrome: 50;
  --z-nav: 60;
  --z-skip: 100;

  /* ---- Default (warm) semantic palette so :root is never unthemed ----
     The skip link, the global :focus-visible outline, and the fixed chrome live
     OUTSIDE the themed act sections; custom properties inherit from here, so
     these must be defined or those controls compute invalid colors. Mirrors
     .theme-warm (the page opens on the warm act). */
  --bg: #f6efe3;
  --bg-2: #efe4d3;
  --fg: #2a201a;
  --muted: #6d5f50;
  --faint: #9b8b78;
  --accent: #13796b;
  --accent-2: #b08423;
  --on-accent: #fffaf2;
  --line: rgba(42, 32, 26, 0.14);
  --line-strong: rgba(42, 32, 26, 0.26);
  --glow: rgba(19, 121, 107, 0.16);
  --surface: rgba(255, 252, 245, 0.62);
  --surface-strong: #fffdf8;
  --surface-border: rgba(42, 32, 26, 0.12);
  --net-color: 19, 121, 107;
  --net-line: 42, 32, 26;
  --net-opacity: 0.5;
  color-scheme: light;
}

/* ==========================================================================
   THEMES — semantic palette per act. Applied as a class on each act <section>.
   Components read only these vars, so a single class re-skins everything.
   --net-* drive the network canvas; --on-accent is text drawn on the accent.
   ========================================================================== */

/* Act 1 — warm, unhurried, human. Warm paper + terracotta/gold. */
.theme-warm {
  --bg: #f6efe3;
  --bg-2: #efe4d3;
  --fg: #2a201a;
  --muted: #6d5f50;
  --faint: #9b8b78;
  --accent: #13796b;        /* deep teal */
  --accent-2: #b08423;      /* warm gold */
  --on-accent: #fffaf2;
  --line: rgba(42, 32, 26, 0.14);
  --line-strong: rgba(42, 32, 26, 0.26);
  --glow: rgba(19, 121, 107, 0.16);
  --surface: rgba(255, 252, 245, 0.62);
  --surface-strong: #fffdf8;
  --surface-border: rgba(42, 32, 26, 0.12);
  --net-color: 19, 121, 107;   /* rgb of accent, for canvas */
  --net-line: 42, 32, 26;
  --net-opacity: 0.5;
  color-scheme: light;
}

/* Act 2 — vision: expansive, certain, cosmic. Deep night + electric blue + gold. */
.theme-night {
  --bg: #070a14;
  --bg-2: #0c1322;
  --fg: #eaf0fb;
  --muted: #97a4c2;
  --faint: #5d6a89;
  --accent: #6ea0ff;        /* electric */
  --accent-2: #e6b53f;      /* regal gold (value) */
  --on-accent: #06101f;
  --line: rgba(160, 180, 220, 0.16);
  --line-strong: rgba(160, 180, 220, 0.32);
  --glow: rgba(110, 160, 255, 0.3);
  --surface: rgba(140, 165, 225, 0.05);
  --surface-strong: rgba(140, 165, 225, 0.08);
  --surface-border: rgba(160, 180, 220, 0.16);
  --net-color: 120, 165, 255;
  --net-line: 130, 165, 240;
  --net-opacity: 1;
  color-scheme: dark;
}

/* Act 3 — quiet, direct, personal. Calm near-black + warm amber (humanity returns). */
.theme-dusk {
  --bg: #0a0b0f;
  --bg-2: #0f1117;
  --fg: #ece6dc;
  --muted: #8d8578;
  --faint: #5b554b;
  --accent: #43a594;        /* soft teal — echoes Act 1 */
  --accent-2: #43a594;
  --on-accent: #0a0b0f;
  --line: rgba(220, 210, 195, 0.12);
  --line-strong: rgba(220, 210, 195, 0.24);
  --glow: rgba(67, 165, 148, 0.16);
  --surface: rgba(230, 220, 205, 0.04);
  --surface-strong: rgba(230, 220, 205, 0.07);
  --surface-border: rgba(220, 210, 195, 0.1);
  --net-color: 67, 165, 148;
  --net-line: 67, 165, 148;
  --net-opacity: 0.5;
  color-scheme: dark;
}