/* Design tokens: fonts, color, type scale, spacing, motion. Every other stylesheet reads from these. */

@font-face {
  font-family: "Fraunces";
  src: url("/fonts/fraunces.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("/fonts/fraunces-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Warm paper neutrals + one persimmon accent (reserved for the primary action). */
  --bg: #f5f1ea;
  --bg-raised: #fbf8f3;
  --ink: #1b1815;
  --ink-soft: #3b3530;
  --muted: #6e665d;
  --line: rgb(27 24 21 / 0.1);
  --line-strong: rgb(27 24 21 / 0.22);
  --accent: #e8491d;
  --accent-ink: #fff8f3;
  --accent-soft: rgb(232 73 29 / 0.12);
  --glow-1: #ffb38a;
  --glow-2: #f7d9a8;
  --glow-3: #e9c7ff;
  --shadow: 0 1px 2px rgb(27 24 21 / 0.06), 0 12px 32px -12px rgb(27 24 21 / 0.18);
  --grain-opacity: 0.06;

  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Fluid type scale (320px → 1440px). */
  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.92rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.13rem);
  --step-1: clamp(1.2rem, 1.1rem + 0.45vw, 1.5rem);
  --step-2: clamp(1.5rem, 1.3rem + 0.9vw, 2.1rem);
  --step-3: clamp(2rem, 1.6rem + 1.8vw, 3.2rem);
  --step-4: clamp(2.6rem, 1.8rem + 3.6vw, 5.2rem);
  --step-hero: clamp(3.6rem, 1.2rem + 12vw, 10.5rem);

  --space-xs: 0.5rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  --space-xl: clamp(4rem, 3rem + 5vw, 8rem);
  --gutter: clamp(1rem, 0.5rem + 3vw, 3rem);
  --max: 1200px;
  --radius: 20px;
  --radius-s: 12px;

  /* Motion: short for feedback (<400ms keeps the Doherty threshold), longer for entrances.
     --beat is the shared rhythm: every stagger/delay is a multiple of it, so choreography lands "on the beat". */
  --beat: 90ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur: 320ms;
  --dur-slow: 700ms;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f0d0b;
  --bg-raised: #191613;
  --ink: #f3eee7;
  --ink-soft: #d6cfc6;
  --muted: #a1978c;
  --line: rgb(243 238 231 / 0.1);
  --line-strong: rgb(243 238 231 / 0.24);
  --accent: #ff6a3d;
  --accent-ink: #1a0a04;
  --accent-soft: rgb(255 106 61 / 0.14);
  --glow-1: #8a2b10;
  --glow-2: #4a3416;
  --glow-3: #3b2366;
  --shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 16px 40px -16px rgb(0 0 0 / 0.7);
  --grain-opacity: 0.08;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0f0d0b;
    --bg-raised: #191613;
    --ink: #f3eee7;
    --ink-soft: #d6cfc6;
    --muted: #a1978c;
    --line: rgb(243 238 231 / 0.1);
    --line-strong: rgb(243 238 231 / 0.24);
    --accent: #ff6a3d;
    --accent-ink: #1a0a04;
    --accent-soft: rgb(255 106 61 / 0.14);
    --glow-1: #8a2b10;
    --glow-2: #4a3416;
    --glow-3: #3b2366;
    --shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 16px 40px -16px rgb(0 0 0 / 0.7);
    --grain-opacity: 0.08;
  }
}