/* ============================================================
   Bao.buzz — Design Tokens
   Light theme (default during daytime) + Dark theme.
   ============================================================ */

:root {
  /* Pastel palette (matches logo) */
  --pastel-blue: #6FA1FF;
  --pastel-blue-soft: #A8C8FF;
  --pastel-blue-deep: #3D6FE0;
  --pastel-orange: #FF8A4C;
  --pastel-orange-soft: #FFB28A;
  --pastel-orange-deep: #E26A2C;
  --pastel-yellow: #FFD15C;
  --pastel-yellow-soft: #FFE38A;
  --cream: #FAF4E6;
  --success: #4FB67A;
  --danger: #E85A5A;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* Radii */
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 26px;
  --radius-xl: 36px;

  /* Typography — round, friendly */
  --font-display: "Fredoka", "Quicksand", system-ui, -apple-system, sans-serif;
  --font-sans: "Nunito", "Inter", -apple-system, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --text-h1: clamp(48px, 8vw, 96px);
  --text-h2: clamp(34px, 4.5vw, 56px);
  --text-h3: 22px;
  --text-body: 16px;
  --text-small: 13px;
  --text-tag: 12px;

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 800ms;

  /* Layout */
  --container: 1180px;
  --pad-x: clamp(20px, 5vw, 56px);
}

/* ---------- LIGHT THEME (default) ---------- */
:root,
:root[data-theme="light"] {
  --bg-0: #FAF4E6;       /* warm cream — matches logo background */
  --bg-1: #FFFFFF;
  --bg-2: #F2EBD8;
  --bg-elev: #FFFFFF;
  --ink-0: #14141C;
  --ink-1: #4A4A55;
  --ink-2: #8A887E;
  --stroke: rgba(20, 20, 28, 0.10);
  --stroke-strong: rgba(20, 20, 28, 0.20);
  --stroke-focus: rgba(61, 111, 224, 0.35);

  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.6) inset,
                 0 8px 30px -12px rgba(20, 20, 28, 0.18);
  --shadow-card-hover: 0 1px 0 rgba(255, 255, 255, 0.8) inset,
                       0 24px 60px -20px rgba(20, 20, 28, 0.28);
  --shadow-glow-blue: 0 0 0 1px var(--pastel-blue),
                      0 24px 80px -16px rgba(111, 161, 255, 0.45);
  --shadow-glow-orange: 0 0 0 1px var(--pastel-orange),
                        0 24px 80px -16px rgba(255, 138, 76, 0.35);

  --link: var(--pastel-blue-deep);
  --link-hover: #2E5BC0;

  --grad-hero: linear-gradient(135deg,
    var(--pastel-blue-deep) 0%,
    var(--pastel-orange-deep) 55%,
    #B07A00 100%);

  --grid-dot: rgba(20, 20, 28, 0.06);
  --canvas-wave: rgba(61, 111, 224, 0.18);
}

/* ---------- DARK THEME ---------- */
:root[data-theme="dark"] {
  --bg-0: #0B0B10;
  --bg-1: #14141E;
  --bg-2: #1F1F2C;
  --bg-elev: #1F1F2C;
  --ink-0: #F7F1DE;
  --ink-1: #BCB6A0;
  --ink-2: #6E6B5E;
  --stroke: rgba(247, 241, 222, 0.08);
  --stroke-strong: rgba(247, 241, 222, 0.18);
  --stroke-focus: rgba(168, 200, 255, 0.45);

  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.04) inset,
                 0 20px 60px -20px rgba(0, 0, 0, 0.6);
  --shadow-card-hover: 0 1px 0 rgba(255, 255, 255, 0.08) inset,
                       0 30px 80px -20px rgba(0, 0, 0, 0.8);
  --shadow-glow-blue: 0 0 0 1px var(--pastel-blue-soft),
                      0 24px 90px -10px rgba(168, 200, 255, 0.35);
  --shadow-glow-orange: 0 0 0 1px var(--pastel-orange-soft),
                        0 24px 90px -10px rgba(255, 178, 138, 0.30);

  --link: var(--pastel-blue-soft);
  --link-hover: #C5DAFF;

  --grad-hero: linear-gradient(135deg,
    var(--pastel-blue-soft) 0%,
    var(--pastel-yellow-soft) 55%,
    var(--pastel-orange-soft) 100%);

  --grid-dot: rgba(247, 241, 222, 0.05);
  --canvas-wave: rgba(168, 200, 255, 0.22);
}

/* Theme transition: slow when celebrating, normal otherwise */
html.celebrating body {
  transition: background-color 1800ms var(--ease-in-out),
              color 1800ms var(--ease-in-out) !important;
}

@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;
  }
}