/* ==========================================================================
   Sponsor Harbor — design tokens ("Creator studio")
   The single source of truth for color, type, space, radius, shadow and
   motion. Component CSS and JS only read these names.
   ========================================================================== */

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

@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Serif";
  src: url("../fonts/instrument-serif-italic-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* ---- Raw palette ------------------------------------------------------ */
  --palette-cream-50: #fffbf5;
  --palette-cream-100: #fbf3e8;
  --palette-cream-200: #f2e6d6;
  --palette-cream-300: #e6d6c1;
  --palette-white: #ffffff;
  --palette-ink-950: #16121f;
  --palette-ink-800: #2c2638;
  --palette-ink-600: #4d4659;
  --palette-ink-400: #857e91;
  --palette-coral-100: #ffe3dc;
  --palette-coral-300: #ff9b85;
  --palette-coral-500: #ff5a3c;
  --palette-coral-700: #c2341c;
  --palette-sun-100: #fff2c7;
  --palette-sun-300: #ffd75e;
  --palette-mint-500: #2bb673;
  --palette-mint-700: #12754a;
  --palette-lilac-100: #ece6ff;
  --palette-lilac-300: #c3b4ff;
  --palette-lilac-500: #7c5cff;
  --palette-sky-300: #9fd3ff;

  /* ---- Color roles ------------------------------------------------------ */
  --color-bg: var(--palette-cream-50);
  --color-bg-alt: var(--palette-cream-100);
  --color-surface: var(--palette-white);
  --color-text: var(--palette-ink-950);
  --color-text-soft: var(--palette-ink-600);
  --color-line: var(--palette-cream-200);
  --color-line-strong: var(--palette-cream-300);
  --color-field-border: var(--palette-ink-400);
  --color-accent: var(--palette-coral-500);
  --color-accent-text: var(--palette-coral-700);
  --color-accent-tint: var(--palette-coral-100);
  --color-highlight: var(--palette-sun-300);
  --color-highlight-tint: var(--palette-sun-100);
  --color-success: var(--palette-mint-700);
  --color-error: var(--palette-coral-700);
  --color-cool-tint: var(--palette-lilac-100);
  --color-dark: var(--palette-ink-950);
  --color-dark-raised: var(--palette-ink-800);
  --color-on-dark: var(--palette-white);
  --color-on-dark-soft: var(--palette-cream-200);
  --color-on-dark-line: rgb(255 255 255 / 0.18);
  --color-header-bg: rgb(255 251 245 / 0.92);
  --color-focus: var(--palette-coral-700);
  --color-focus-on-dark: var(--palette-sun-300);
  --color-dot: rgb(22 18 31 / 0.07);

  /* Studio (hero film) */
  --studio-bg: var(--palette-cream-100);
  --studio-card: var(--palette-white);
  --studio-bar: var(--palette-cream-200);
  --studio-bar-soft: var(--palette-cream-100);
  --studio-thumb-a: var(--palette-coral-300);
  --studio-thumb-b: var(--palette-sun-300);
  --studio-thumb-c: var(--palette-lilac-300);
  --studio-thumb-d: var(--palette-sky-300);
  --studio-sponsor: var(--palette-coral-500);
  --studio-play: var(--palette-ink-950);
  --studio-stamp: var(--palette-mint-700);
  --studio-pay: var(--palette-mint-500);
  --studio-spark: var(--palette-lilac-500);
  --studio-spark-soft: var(--palette-lilac-300);

  /* ---- Typography ------------------------------------------------------- */
  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Instrument Serif", ui-serif, Georgia, serif;

  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --text-xl: clamp(1.3125rem, 1.15rem + 0.7vw, 1.625rem);
  --text-2xl: clamp(2rem, 1.55rem + 2vw, 3.25rem);
  --text-hero: clamp(2.625rem, 1.55rem + 5vw, 5.5rem);
  --text-mega: clamp(3rem, 1.5rem + 8vw, 9rem);

  --leading-tight: 1;
  --leading-snug: 1.15;
  --leading-body: 1.6;
  --tracking-tight: -0.035em;
  --tracking-snug: -0.015em;
  --tracking-wide: 0.08em;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;

  /* ---- Space ------------------------------------------------------------ */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-section: clamp(4.5rem, 3rem + 6vw, 9rem);
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);

  /* ---- Layout ----------------------------------------------------------- */
  --width-page: 76rem;
  --width-text: 36rem;
  --width-narrow: 48rem;
  --header-height: 4.5rem;
  --tap-min: 3rem;
  --tap-large: 3.5rem;
  --field-height: 3.25rem;
  --textarea-height: 5.5rem;
  --textarea-max: 16rem;
  --footer-col: 11rem;
  --dot-gap: 22px;
  --dot-size: 1.5px;

  /* ---- Small component sizes ------------------------------------------- */
  --logo-size: 2.25rem;
  --chapter-size: 2.75rem;
  --check-size: 0.75rem;
  --check-top: 0.45rem;
  --plus-size: 0.875rem;
  --icon-bar-width: 1.25rem;
  --icon-bar-gap: 0.375rem;
  --marker-start: 62%;
  --marker-end: 92%;
  --press-scale: 0.97;
  --hover-lift: -2px;
  --skip-hidden-shift: -200%;
  --route-anchor: 50vh;
  --spinner-size: 1.1rem;

  /* ---- Radius / border / shadow ---------------------------------------- */
  --radius-sm: 0.5rem;
  --radius-md: 0.875rem;
  --radius-lg: 1.25rem;
  --radius-xl: 1.75rem;
  --radius-2xl: 2.5rem;
  --radius-pill: 999px;
  --border-thin: 1px;
  --border-thick: 2px;
  --focus-ring: 3px;
  --focus-offset: 3px;

  --shadow-sm: 0 1px 2px rgb(22 18 31 / 0.06), 0 1px 1px rgb(22 18 31 / 0.04);
  --shadow-md: 0 10px 24px -12px rgb(22 18 31 / 0.22), 0 2px 6px rgb(22 18 31 / 0.05);
  --shadow-lg: 0 30px 60px -24px rgb(22 18 31 / 0.35), 0 6px 14px rgb(22 18 31 / 0.06);
  --shadow-card: 0 18px 40px -18px rgb(22 18 31 / 0.3), 0 2px 4px rgb(22 18 31 / 0.05);
  --shadow-cta: 0 12px 24px -12px rgb(22 18 31 / 0.55);

  /* ---- Layers ----------------------------------------------------------- */
  --z-1: 1;
  --z-2: 2;
  --z-3: 3;
  --z-4: 4;
  --z-header: 10;
  --z-menu: 20;

  /* ---- Motion: easings --------------------------------------------------
     One motion language: "studio desk". Cards travel with weight, land with
     a small overshoot, stamps slam, then everything breathes gently. */
  --ease-glide: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-land: cubic-bezier(0.34, 1.4, 0.5, 1);
  --ease-slam: cubic-bezier(0.55, 0, 0.75, 0.2);
  --ease-toss: cubic-bezier(0.45, 0, 0.55, 1);
  --ease-float: cubic-bezier(0.37, 0, 0.63, 1);
  --ease-ui: cubic-bezier(0.2, 0.7, 0.3, 1);

  /* ---- Motion: durations ------------------------------------------------ */
  --dur-instant: 1ms;
  --dur-tap: 140ms;
  --dur-ui: 220ms;
  --dur-enter: 950ms;
  --dur-bars: 700ms;
  --dur-stagger: 45ms;
  --dur-toss: 720ms;
  --dur-snap: 320ms;
  --dur-scrub: 1000ms;
  --dur-pop: 420ms;
  --dur-slam: 260ms;
  --dur-recoil: 420ms;
  --dur-float: 6000ms;
  --dur-float-alt: 7400ms;
  --dur-spin: 800ms;
  --dur-notice: 6000ms;

  /* ---- Motion: hero film timeline (start times) ------------------------ */
  --at-player: 120ms;
  --at-brief: 420ms;
  --at-stats: 640ms;
  --at-bars: 1100ms;
  --at-toss: 1450ms;
  --at-scrub: 2170ms;
  --at-toast: 2420ms;
  --at-stamp: 2900ms;
  --at-pay: 3250ms;
  --at-check: 3800ms;
  --at-float: 4400ms;

  /* ---- Studio geometry (container units of the stage) ------------------ */
  --studio-ratio: 5 / 4;
  --studio-enter-rise: 14cqi;
  --studio-enter-side: 30cqi;
  --studio-enter-tilt: 7deg;
  --studio-float-rise: -0.8cqi;
  --studio-float-tilt: 0.5deg;
  --studio-recoil: 0.9cqi;
  --studio-stamp-from: 2.4;
  --studio-stamp-tilt: -9deg;
  --studio-scrub-from: 0.08;
  --studio-scrub-to: 0.64;
  --studio-tilt-pay: -3deg;
  --studio-tilt-toast: 2deg;
  --studio-tilt-stats: 2.5deg;
  /* Sponsor chip: brief slot -> video timeline (fallbacks; site.js measures) */
  --studio-toss-x: 40cqi;
  --studio-toss-y: 34cqi;
  --studio-toss-arc: -8cqi;
}