/* TinyCast scroll-story: design tokens.
   Palettes are 1:1 with TinyCast/DesignSystem/TCTheme.swift (Sunbeam + Storybook). */

:root {
  /* Sunbeam (day) */
  --sb-paper: #FFF7EC;
  --sb-paper2: #FFEEDA;
  --sb-ink: #3B2A1E;
  --sb-ink2: #7A6A5A;
  --sb-card: #FFFFFF;
  --sb-line: #F0E1CC;
  --sb-accent: #FF6F4D;
  --sb-accent-dark: #F2542D;
  --sb-star: #FFC24B;
  --sb-safety-text: #2E7D52;
  --sb-safety-dot: #3DA56F;

  /* Storybook (night) */
  --st-paper: #FBF2E2;
  --st-paper2: #F5E6CB;
  --st-ink: #2C1E3D;
  --st-ink2: #6E5C7C;
  --st-card: #FFFBF3;
  --st-line: #EBDCC2;
  --st-accent: #EFA738;
  --st-accent-dark: #D98A1E;
  --st-star: #FBD774;
  --st-night-top: #3A2557;
  --st-night-bottom: #241338;
  --st-on-dark: #F7ECD8;
  --st-on-dark-muted: #A693BC;
  --st-moon: #FBE9B0;
  --st-tabbar: #1F1230;

  /* Sky gradient stops (day -> sunset -> dusk -> night) */
  --sky-day: linear-gradient(180deg, #FFF7EC 0%, #FFE7CC 100%);
  --sky-sunset: linear-gradient(180deg, #FFE8CE 0%, #FFC79B 55%, #F7A97E 100%);
  --sky-dusk: linear-gradient(180deg, #B77A8C 0%, #7E5380 55%, #57356B 100%);
  --sky-night: linear-gradient(180deg, #3A2557 0%, #241338 100%);

  /* Foreground vars driven by js/sky.js (lerp window derived from page
     geometry; finishes by dusk peak). Defaults are the day values. */
  --fg-ink: #3B2A1E;
  --fg-muted: #7A6A5A;
  --fg-accent: #F2542D;

  /* Concept-act secondary text: darker than --sb-ink2 so it holds >= 4.5:1
     against the worst early-sunset sky frame (#F7A97E). */
  --concept-muted: #54432F;

  /* Type scale */
  --font-day: 'Heebo', system-ui, sans-serif;
  --font-day-display: 'Rubik', 'Heebo', system-ui, sans-serif;
  --font-night: 'Assistant', system-ui, sans-serif;
  --font-night-display: 'Suez One', 'Assistant', serif;
  --fs-hero: clamp(2.2rem, 6.5vw, 4rem);
  --fs-h2: clamp(1.6rem, 4.2vw, 2.6rem);
  --fs-h3: clamp(1.1rem, 2.4vw, 1.35rem);
  --fs-lede: clamp(1.05rem, 2.4vw, 1.3rem);
  --fs-body: 1rem;
  --fs-small: 0.85rem;

  /* Layout */
  --wrap: 68rem;
  --pad-inline: clamp(1.1rem, 4vw, 2rem);
  --radius-card: 20px;
  --radius-chip: 14px;

  /* Focus rings: coral on light sections, gold on dark */
  --focus-light: #F2542D;
  --focus-dark: #FBD774;
}