/* Storytime "Beachy Lila" — Design Tokens
 * Dark-only, dusk plum surface, frosted glass cards, sunset accents.
 * Import once at the root of any artifact.
 */

@import url('https://fonts.googleapis.com/css2?family=Pacifico&family=Outfit:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ───────── Brand · Lila ───────── */
  --lila-50:   #F8F1FF;
  --lila-100:  #EFE0FF;
  --lila-200:  #DCC1FF;
  --lila-300:  #C49AFF;
  --lila-400:  #A972F4;
  --lila-500:  #8A4FE2;   /* MAIN brand */
  --lila-600:  #6F39C9;
  --lila-700:  #532896;
  --lila-800:  #361963;
  --lila-900:  #1F0E3D;
  --lila-950:  #110724;

  /* ───────── Sunset · warm accents ───────── */
  --gold:      #FFD27A;
  --peach:     #FFB48A;
  --coral:     #FF7E8B;
  --magenta:   #E94CD0;

  /* ───────── Ocean / Sand / Foam ───────── */
  --aqua:      #6EE0D2;
  --deep:      #2BB0C8;
  --sand:      #FFE9C9;
  --foam:      #FFF7EC;

  /* ───────── Semantic ───────── */
  --success:   #5FD8A6;
  --warning:   #FFC267;
  --danger:    #FF6E8A;
  --info:      #8FB7FF;

  /* ───────── Backgrounds (dark dusk) ───────── */
  --bg-page:        #150828;
  --bg-surface:     rgba(45, 22, 80, 0.55);
  --bg-card:        rgba(35, 18, 65, 0.72);
  --bg-card-hover:  rgba(50, 26, 90, 0.82);
  --bg-input:       rgba(20, 10, 40, 0.55);
  --bg-overlay:     rgba(17, 7, 36, 0.72);

  /* ───────── Foreground ───────── */
  --fg-1:          #FFF7EC;   /* primary, foam */
  --fg-2:          #E4D2FF;   /* secondary, soft lilac */
  --fg-3:          #A78DC8;   /* muted */
  --fg-4:          #6F5A8E;   /* faint */
  --fg-on-light:   #2A1656;

  /* ───────── Borders (lilac translucency) ───────── */
  --border-hairline: rgba(255,247,236,0.08);
  --border-soft:     rgba(196,154,255,0.18);
  --border-medium:   rgba(196,154,255,0.32);
  --border-bright:   rgba(220,193,255,0.55);
  --border-warm:     rgba(255,180,138,0.35);

  /* ───────── Signature gradients ───────── */
  --grad-sunset:   linear-gradient(135deg, #FFD27A 0%, #FF7E8B 38%, #E94CD0 70%, #8A4FE2 100%);
  --grad-dusk:     linear-gradient(180deg, #1F0E3D 0%, #2A1657 30%, #3F2173 60%, #553296 100%);
  --grad-lila:     linear-gradient(135deg, #A972F4 0%, #6F39C9 100%);
  --grad-palmbar:  linear-gradient(135deg, #E94CD0 0%, #8A4FE2 60%, #2BB0C8 100%);
  --grad-sky:      linear-gradient(180deg, #3CB8CE 0%, #5C8FD9 22%, #8064D8 42%, #A350C8 58%, #C84DBA 72%, #E68AA8 86%, #FFB48A 100%);

  /* ───────── Shadows · always warm-violet, never neutral black ───────── */
  --shadow-card:   0 12px 36px rgba(20, 8, 40, 0.5), inset 0 1px 0 rgba(255,247,236,0.06);
  --shadow-pop:    0 24px 60px rgba(20, 8, 40, 0.6), inset 0 1px 0 rgba(255,247,236,0.08);
  --shadow-press:  0 4px 12px rgba(20, 8, 40, 0.4), inset 0 1px 0 rgba(255,247,236,0.04);

  /* ───────── Glows · colored, never white ───────── */
  --glow-lila:   0 0 24px rgba(169, 114, 244, 0.45), 0 0 56px rgba(138, 79, 226, 0.18);
  --glow-coral:  0 0 24px rgba(255, 126, 139, 0.45), 0 0 56px rgba(233, 76, 208, 0.18);
  --glow-aqua:   0 0 20px rgba(110, 224, 210, 0.45);
  --glow-gold:   0 0 24px rgba(255, 210, 122, 0.5);

  /* ───────── Typography ───────── */
  --font-display: 'Pacifico', cursive;      /* brush brand only */
  --font-sans:    'Outfit', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ───────── Spacing · 4pt base ───────── */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px;  --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px;  --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px;

  /* ───────── Radii ───────── */
  --r-xs:   6px;
  --r-sm:   10px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-2xl:  36px;
  --r-pill: 999px;

  /* ───────── Motion ───────── */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 150ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;

  /* ───────── Backdrop blur ───────── */
  --blur-card: 18px;
  --blur-nav:  24px;
}

/* ─────────────────────────────────────────────────────────
   Type semantic classes (use sparingly — most type via utility)
   ───────────────────────────────────────────────────────── */

html, body {
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'ss01' on, 'cv11' on;
}

.t-wordmark {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1;
  background: var(--grad-sunset);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -0.01em;
}

.t-display {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: 1;
  letter-spacing: -0.02em;
}

.t-h1 {
  font-weight: 800;
  font-size: clamp(2rem, 3.6vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.t-h2 {
  font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
}
.t-h3 { font-weight: 700; font-size: 1.5rem;    line-height: 1.15; }
.t-h4 { font-weight: 600; font-size: 1.125rem;  line-height: 1.25; }

.t-body-lg { font-weight: 400; font-size: 1.125rem; line-height: 1.55; }
.t-body    { font-weight: 400; font-size: 1rem;     line-height: 1.55; }
.t-body-sm { font-weight: 400; font-size: 0.875rem; line-height: 1.5; }

.t-caption { font-weight: 500; font-size: 0.75rem; line-height: 1.4; color: var(--fg-3); }
.t-label   { font-weight: 600; font-size: 0.875rem; line-height: 1.2; }

.t-eyebrow {
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.t-stat {
  font-weight: 800;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.t-mono {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.875rem;
}

/* Numbers always tabular */
.num { font-variant-numeric: tabular-nums; }