/* Show & Tell — design tokens.
   One source of truth for the website and every gameplay surface (peek page,
   in-chat cards, share cards). Import fonts.css first, then this file. */

:root {
  /* ── The five lights ──────────────────────────────────────────
     Ordered cold → bright. They are the Daylight gradient AND the
     temperature scale: the closer you get, the brighter it gets. */
  --st-cobalt:    #2F4BFF;  /* cold     */
  --st-grape:     #8B2CF5;  /* warm     */
  --st-punch:     #FF2D87;  /* hot      */
  --st-tangerine: #FF6B1A;  /* burning  */
  --st-sunbeam:   #FFC93C;  /* correct — the flash */

  /* Deep versions, safe for text on Paper (≥ 4.5:1) */
  --st-cobalt-deep:    #2238E0;
  --st-grape-deep:     #7316E0;
  --st-punch-deep:     #D10063;
  --st-tangerine-deep: #B83D00;

  /* Soft tints, for chips and fills on Paper */
  --st-cobalt-tint:    #E6EAFF;
  --st-grape-tint:     #F1E6FF;
  --st-punch-tint:     #FFE4EF;
  --st-tangerine-tint: #FFEBDD;
  --st-sunbeam-tint:   #FFF4D1;

  /* ── Neutrals ─────────────────────────────────────────────── */
  --st-ink:    #120E1C;  /* violet-black: the night sky behind the light */
  --st-ink-2:  #1E1830;  /* raised surfaces on Ink */
  --st-ink-3:  #2C2445;  /* borders and wells on Ink */
  --st-smoke:  #6B6580;  /* muted text on Paper */
  --st-haze:   #A49DB8;  /* muted text on Ink */
  --st-mist:   #ECE6F2;  /* borders and wells on Paper */
  --st-paper:  #FFF9F2;  /* warm white: the page */
  --st-white:  #FFFFFF;

  /* ── Daylight: the gradient ───────────────────────────────────
     The live, lit-from-within version is daylight.js (WebGL, seeded per
     day). These are the static fallbacks for CSS, email and print. */
  --st-daylight-linear: linear-gradient(115deg, var(--st-cobalt) 0%, var(--st-grape) 28%, var(--st-punch) 55%, var(--st-tangerine) 78%, var(--st-sunbeam) 100%);
  --st-daylight-glow:
    radial-gradient(60% 70% at 22% 88%, rgba(255, 201, 60, 0.95) 0%, rgba(255, 201, 60, 0) 60%),
    radial-gradient(55% 60% at 50% 70%, rgba(255, 107, 26, 0.9) 0%, rgba(255, 107, 26, 0) 65%),
    radial-gradient(60% 65% at 62% 38%, rgba(255, 45, 135, 0.95) 0%, rgba(255, 45, 135, 0) 70%),
    radial-gradient(60% 60% at 82% 12%, rgba(139, 44, 245, 0.95) 0%, rgba(139, 44, 245, 0) 70%),
    radial-gradient(70% 70% at 100% 0%, rgba(47, 75, 255, 1) 0%, rgba(47, 75, 255, 0) 70%),
    linear-gradient(135deg, #5B2BE8 0%, #E0287A 55%, #FF8A2A 100%);
  --st-daylight-ring: conic-gradient(from 200deg, var(--st-cobalt), var(--st-grape), var(--st-punch), var(--st-tangerine), var(--st-sunbeam), var(--st-cobalt));

  /* ── Type ──────────────────────────────────────────────────── */
  --st-font-display: "GT Sectra Display", "GT Sectra", Georgia, "Times New Roman", serif;
  --st-font-serif:   "GT Sectra", "GT Sectra Display", Georgia, serif;
  --st-font-sans:    "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --st-font-mono:    "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Fluid scale (mobile → desktop) */
  --st-text-hero: clamp(3.5rem, 2rem + 8vw, 9rem);      /* Sectra Display 900 */
  --st-text-h1:   clamp(2.5rem, 1.6rem + 4vw, 4.75rem); /* Sectra Display 700 */
  --st-text-h2:   clamp(1.875rem, 1.4rem + 2vw, 3rem);  /* Sectra Display 700 */
  --st-text-h3:   clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem); /* Sectra 500 */
  --st-text-lead: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem); /* DM Sans 400 */
  --st-text-body: 1rem;      /* DM Sans 400, line-height 1.55 */
  --st-text-small: 0.875rem; /* DM Sans 500 */
  --st-text-label: 0.75rem;  /* DM Sans 700, uppercase, +0.08em */

  /* ── Shape ─────────────────────────────────────────────────── */
  --st-radius-xs: 8px;
  --st-radius-sm: 12px;
  --st-radius-md: 20px;   /* cards */
  --st-radius-lg: 32px;   /* hero panels, photo frames */
  --st-radius-pill: 999px;
  --st-icon-radius: 22.37%; /* app-icon squircle, iOS proportion */

  /* ── Depth ─────────────────────────────────────────────────── */
  --st-shadow-card: 0 1px 2px rgba(18, 14, 28, 0.06), 0 8px 24px -8px rgba(18, 14, 28, 0.14);
  --st-shadow-lift: 0 2px 4px rgba(18, 14, 28, 0.08), 0 24px 48px -16px rgba(18, 14, 28, 0.28);
  --st-glow-punch:  0 10px 40px -8px rgba(255, 45, 135, 0.55);
  --st-glow-sun:    0 0 0 6px rgba(255, 201, 60, 0.25), 0 12px 48px -6px rgba(255, 160, 40, 0.7);

  /* ── Motion ────────────────────────────────────────────────── */
  --st-ease-pop:    cubic-bezier(0.34, 1.56, 0.64, 1);  /* overshoot: buttons, chips, the & */
  --st-ease-out:    cubic-bezier(0.22, 1, 0.36, 1);     /* entrances */
  --st-ease-inout:  cubic-bezier(0.65, 0, 0.35, 1);     /* page transitions */
  --st-dur-tap: 120ms;
  --st-dur-ui:  240ms;
  --st-dur-reveal: 520ms;
  --st-dur-flash: 900ms;

  /* ── Semantic: light theme (Paper) ─────────────────────────── */
  --st-bg: var(--st-paper);
  --st-surface: var(--st-white);
  --st-well: var(--st-mist);
  --st-text: var(--st-ink);
  --st-text-muted: var(--st-smoke);
  --st-border: rgba(18, 14, 28, 0.12);
  --st-link: var(--st-cobalt-deep);
  --st-focus: var(--st-cobalt);
  --st-danger: var(--st-punch-deep);

  /* Temperatures (the game's feedback scale) */
  --st-temp-cold: var(--st-cobalt);
  --st-temp-warm: var(--st-grape);
  --st-temp-hot: var(--st-punch);
  --st-temp-burning: var(--st-tangerine);
  --st-temp-correct: var(--st-sunbeam);
}

/* Dark theme (Ink). Use for gameplay surfaces at night and for hero moments. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --st-bg: var(--st-ink);
    --st-surface: var(--st-ink-2);
    --st-well: var(--st-ink-3);
    --st-text: #F7F2FF;
    --st-text-muted: var(--st-haze);
    --st-border: rgba(247, 242, 255, 0.14);
    --st-link: #9DAEFF;
    --st-focus: var(--st-sunbeam);
    --st-danger: #FF6FA8;
  }
}
:root[data-theme="dark"] {
  --st-bg: var(--st-ink);
  --st-surface: var(--st-ink-2);
  --st-well: var(--st-ink-3);
  --st-text: #F7F2FF;
  --st-text-muted: var(--st-haze);
  --st-border: rgba(247, 242, 255, 0.14);
  --st-link: #9DAEFF;
  --st-focus: var(--st-sunbeam);
  --st-danger: #FF6FA8;
}