/* ==========================================================================
   tokens.css — single source of truth for the visual language
   Everything else in /src/css builds on these custom properties.
   Font faces live in fonts.css (generated, inlined for file:// support).
   ========================================================================== */

:root {
  /* ---- palette ------------------------------------------------------- */
  --ink: #121214;
  --ink-soft: #17171b;
  --ink-raised: #202026;
  --paper: #f5f5f5;
  --paper-bright: #fbf8f2;
  --orange: #f2670d;
  --orange-bright: #ff8a1f;
  --orange-deep: #c94c05;
  --amber: #ffb238;

  --text-strong: var(--ink);
  --text-muted: rgb(18 18 20 / 0.68);
  --text-faint: rgb(18 18 20 / 0.52);
  --line: rgb(18 18 20 / 0.12);
  --line-strong: rgb(18 18 20 / 0.24);

  --on-dark-strong: #f7f3ea;
  --on-dark-muted: rgb(247 243 234 / 0.7);
  --on-dark-faint: rgb(247 243 234 / 0.5);
  --line-dark: rgb(247 243 234 / 0.14);

  --surface: var(--paper);
  --section-bg: var(--paper);
  --section-fg: var(--text-strong);

  /* ---- type ----------------------------------------------------------- */
  --font-display: "Outfit", "Segoe UI", system-ui, sans-serif;
  --font-body: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;

  --step--1: clamp(0.76rem, 0.74rem + 0.1vw, 0.84rem);
  --step-0: clamp(0.95rem, 0.92rem + 0.16vw, 1.06rem);
  --step-1: clamp(1.1rem, 1.02rem + 0.4vw, 1.3rem);
  --step-2: clamp(1.45rem, 1.25rem + 0.9vw, 1.95rem);
  --step-3: clamp(1.95rem, 1.55rem + 1.7vw, 2.9rem);
  --step-4: clamp(2.5rem, 1.85rem + 2.9vw, 4.4rem);
  --step-5: clamp(3.2rem, 2.1rem + 4.6vw, 6.4rem);

  --tracking-display: -0.035em;
  --tracking-label: 0.16em;
  --leading-display: 0.94;
  --leading-body: 1.62;

  /* ---- space & shape -------------------------------------------------- */
  --gutter: clamp(1.25rem, 4.5vw, 4.5rem);
  --shell: min(1420px, 100%);
  --section-pad: clamp(5.5rem, 11vh, 9.5rem);
  --stack: clamp(1rem, 2vw, 1.5rem);

  --radius-sm: 10px;
  --radius-md: 20px;
  --radius-lg: 30px;
  --radius-xl: 44px;
  --radius-pill: 999px;

  --shadow-soft: 0 24px 60px -32px rgb(18 18 20 / 0.4);
  --shadow-card: 0 40px 80px -40px rgb(18 18 20 / 0.55);
  --shadow-glow: 0 0 90px -20px rgb(242 103 13 / 0.55);

  /* One scrim for every dialog: a light 50% dim so the page stays readable
     behind the artwork. */
  --scrim: rgb(8 8 10 / 0.5);

  /* ---- motion --------------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 0.35s;
  --dur-2: 0.7s;
  --dur-3: 1.15s;
  --stagger: 80ms;

  --z-grain: 60;
  --z-topbar: 70;
  --z-rail: 65;
  --z-nav: 90;
  --z-lightbox: 100;
}

/* Dark, "gallery" sections flip the semantic tokens in one place. */
.theme-dark {
  --section-bg: var(--ink);
  --section-fg: var(--on-dark-strong);
  --surface: var(--ink);
  --text-strong: var(--on-dark-strong);
  --text-muted: var(--on-dark-muted);
  --text-faint: var(--on-dark-faint);
  --line: var(--line-dark);
  --line-strong: rgb(247 243 234 / 0.28);
}

.theme-paper {
  --section-bg: var(--paper);
  --section-fg: var(--ink);
}