/* Scenevale Studio — design tokens. Source of truth: docs/design-system.md */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/assets/fonts/bricolage-grotesque-latin-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Figtree";
  src: url("/assets/fonts/figtree-latin-wght.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

/* Metric-matched fallbacks keep layout shift minimal while the webfonts load */
@font-face {
  font-family: "Bricolage Fallback";
  src: local("Arial Black"), local("Arial Bold"), local("Arial");
  size-adjust: 92%;
  ascent-override: 96%;
  descent-override: 26%;
}

@font-face {
  font-family: "Figtree Fallback";
  src: local("Arial"), local("Helvetica");
  size-adjust: 98%;
  ascent-override: 96%;
  descent-override: 26%;
}

:root {
  /* Colour: Cobalt is the only chromatic colour */
  --cobalt: #2340e8;
  --cobalt-strong: #203bd2;
  --cobalt-a04: rgb(35 64 232 / 0.04);
  --cobalt-a08: rgb(35 64 232 / 0.08);
  --cobalt-a12: rgb(35 64 232 / 0.12);
  --cobalt-a24: rgb(35 64 232 / 0.24);
  --cobalt-a40: rgb(35 64 232 / 0.4);

  --ink: #0d1530;
  --ink-muted: #535970;
  --ink-a04: rgb(13 21 48 / 0.04);
  --ink-a08: rgb(13 21 48 / 0.08);
  --ink-a12: rgb(13 21 48 / 0.12);
  --border-input: #8a90a6;

  --mist: #eef1fa;
  --canvas: #f7f7f5;
  --white: #ffffff;
  --periwinkle: #8fa8ff; /* only on Cobalt/Ink surfaces, large text or decorative strokes */

  /* Semantic roles (surfaces override these) */
  --bg: var(--canvas);
  --text: var(--ink);
  --text-muted: var(--ink-muted);
  --link: var(--cobalt);
  --focus-ring: var(--cobalt);
  --hairline: var(--ink-a08);

  /* Type */
  --font-display: "Bricolage Grotesque", "Bricolage Fallback", system-ui, sans-serif;
  --font-body: "Figtree", "Figtree Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-display: clamp(2.75rem, 1.55rem + 4.9vw, 6rem);   /* 44 → 96 */
  --fs-h1: clamp(2.5rem, 1.75rem + 3.05vw, 4.5rem);       /* 40 → 72 */
  --fs-h2: clamp(2rem, 1.45rem + 2.3vw, 3.5rem);          /* 32 → 56 */
  --fs-h3: clamp(1.375rem, 1.24rem + 0.57vw, 1.75rem);    /* 22 → 28 */
  --fs-lead: clamp(1.125rem, 1.06rem + 0.29vw, 1.3125rem);/* 18 → 21 */
  --fs-body: 1.0625rem;                                   /* 17 */
  --fs-ui: 1rem;                                          /* 16 */
  --fs-small: 0.875rem;                                   /* 14 — meta/tags only */

  --lh-display: 0.98;
  --lh-h1: 1.02;
  --lh-h2: 1.05;
  --lh-h3: 1.15;
  --lh-body: 1.6;

  --track-display: -0.04em;
  --track-h1: -0.04em;
  --track-h2: -0.035em;
  --track-h3: -0.02em;

  --measure: 66ch;

  /* Spacing — 8px base */
  --sp-0-5: 4px;
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-6: 48px;
  --sp-8: 64px;
  --sp-12: 96px;
  --sp-16: 128px;
  --sp-20: 160px;

  --container: 1200px;
  --gutter: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);         /* 24 → 40 */
  --section-y: clamp(4rem, 2.5rem + 6.1vw, 8rem);         /* 64 → 128 */
  --nav-h: 56px;
  --nav-top: 16px;
  --nav-clearance: calc(var(--nav-top) + var(--nav-h) + var(--sp-6));

  /* Radii — exactly two */
  --r-card: 16px;
  --r-pill: 999px;

  /* Elevation */
  --shadow-sm: 0 1px 2px var(--ink-a04), 0 2px 6px -2px rgb(13 21 48 / 0.06);
  --shadow-card: 0 1px 2px var(--ink-a04), 0 12px 32px -12px var(--ink-a12);
  --shadow-lift: 0 2px 4px rgb(13 21 48 / 0.05), 0 20px 40px -16px rgb(13 21 48 / 0.18);
  --shadow-nav: 0 8px 24px -12px rgb(13 21 48 / 0.16);
  --shadow-cta: 0 10px 24px -10px rgb(35 64 232 / 0.55);

  /* Motion */
  --dur-1: 200ms;
  --dur-2: 300ms;
  --dur-3: 450ms;
  --dur-4: 600ms;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --rise: 16px;
  --stagger: 60ms;
  /* Shared premium scroll reveal; interactive feedback above stays quick. */
  --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-premium: 700ms;
  --stagger-premium: 70ms;
  --rise-premium: 18px;

  /* Layers */
  --z-nav: 100;
  --z-sheet: 90;
  --z-skip: 200;
}

@media (min-width: 48em) {
  :root {
    --nav-h: 64px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 1ms;
    --dur-2: 1ms;
    --dur-3: 1ms;
    --dur-4: 1ms;
    --rise: 0px;
    --stagger: 0ms;
    --dur-premium: 1ms;
    --stagger-premium: 0ms;
    --rise-premium: 0px;
  }
}