/* Fizzavo design tokens — poppy/fizz-and-bubbles, coral/teal/sunny, ui-rounded. */

:root {
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto,
    system-ui, sans-serif;

  --coral: #ff6b5b;
  --coral-ink: #b53a2c;
  --teal: #12b8a6;
  --teal-ink: #0a6e63;
  --sunny: #ffc93c;
  --sunny-ink: #8a5a00;
  --violet: #8b5cf6;
  --violet-ink: #5b32b8;
  --success: #2fbf71;
  --success-ink: #197a48;
  --danger: #e5484d;
  --danger-ink: #a3282c;

  --bg: #fffcf7;
  --bg-elevated: #ffffff;
  --bg-sunken: #f6efe6;
  --text: #201a2b;
  --text-muted: #6b6478;
  --border: #ece1d8;
  --focus-ring: #6d28d9;

  /* Sharp per mockups/01-08 (2026-07-27): buttons/inputs ~8px, cards ~10-12px. */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(32, 26, 43, 0.06), 0 1px 1px rgba(32, 26, 43, 0.04);
  --shadow-md: 0 8px 24px rgba(32, 26, 43, 0.10), 0 2px 6px rgba(32, 26, 43, 0.06);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* --- UI-M1 chrome pass (mockups 01-08): NEW vars, old ones kept above
     for the not-yet-restyled views. Aliased to the closest old token where
     the palette matches so the two systems don't visually clash mid-wave. */
  --paper: #fdf7ec;                 /* warm paper backdrop (auth gate) */
  --primary: var(--violet);          /* mockup's purple primary (buttons, active states) */
  --primary-ink: var(--violet-ink);
  --accent-gradient: linear-gradient(135deg, var(--coral), var(--violet)); /* orange -> purple */
  --banner-amber: var(--sunny);
  --banner-amber-ink: var(--sunny-ink);
  --font-system: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto,
    system-ui, sans-serif;
}

/* App is always-light by default (mockups are light); dark is an explicit
   opt-in only via :root[data-theme="dark"] below — no OS-driven auto-dark. */

:root[data-theme="dark"] {
  --coral: #ff8577;
  --coral-ink: #ffcac2;
  --teal: #2dd4c0;
  --teal-ink: #a9f2e8;
  --sunny: #ffd666;
  --sunny-ink: #ffe9ae;
  --violet: #a78bfa;
  --violet-ink: #ded0fe;
  --success: #4ade80;
  --success-ink: #c3f5d4;
  --danger: #f87171;
  --danger-ink: #ffd5d5;
  --bg: #171421;
  --bg-elevated: #211d2e;
  --bg-sunken: #14111c;
  --text: #f5f1fa;
  --text-muted: #a79fb8;
  --border: #362f45;
  --focus-ring: #c4b5fd;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
}

:root[data-theme="light"] {
  --coral: #ff6b5b;
  --coral-ink: #b53a2c;
  --teal: #12b8a6;
  --teal-ink: #0a6e63;
  --sunny: #ffc93c;
  --sunny-ink: #8a5a00;
  --violet: #8b5cf6;
  --violet-ink: #5b32b8;
  --success: #2fbf71;
  --success-ink: #197a48;
  --danger: #e5484d;
  --danger-ink: #a3282c;
  --bg: #fffcf7;
  --bg-elevated: #ffffff;
  --bg-sunken: #f6efe6;
  --text: #201a2b;
  --text-muted: #6b6478;
  --border: #ece1d8;
  --focus-ring: #6d28d9;
  --shadow-sm: 0 1px 2px rgba(32, 26, 43, 0.06), 0 1px 1px rgba(32, 26, 43, 0.04);
  --shadow-md: 0 8px 24px rgba(32, 26, 43, 0.10), 0 2px 6px rgba(32, 26, 43, 0.06);
}

* {
  box-sizing: border-box;
}

/* Any element using the `hidden` attribute must actually hide, even if a
   component class also sets `display: flex/grid` (which would otherwise
   win over the UA stylesheet's [hidden] rule). */
[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-display);
}

body {
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-2);
}

h1 {
  font-size: 1.75rem;
}

h2 {
  font-size: 1.1rem;
  font-weight: 650;
}

p {
  margin: 0 0 var(--space-2);
  line-height: 1.5;
}

a {
  color: inherit;
}

button {
  font-family: var(--font-display);
}

:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}