/* ==========================================================================
   Mia's List — themes
   --------------------------------------------------------------------------
   This is the only file you need to touch to change how the site looks.

   Every theme is a block of custom properties on [data-theme="..."].
   To retune a theme, edit its numbers. To add one:

     1. copy a block, give it a new name
     2. add that name to THEMES in assets/js/themes.js
     3. add it to the $themes list in public/api.php (route_theme)

   "harvest" is the live one — witchy, autumnal, a little bit murdery.
   The other four are the alternates we sketched out, kept here so switching
   is a click rather than a rewrite.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* Shape and motion are shared across themes; individual themes override
     any of these that need to feel different. */
  --radius-sm: 8px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  --gap: 16px;
  --card-min: 260px;

  --speed-fast: 120ms;
  --speed: 220ms;
  --speed-slow: 420ms;
  --ease: cubic-bezier(0.2, 0.8, 0.3, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  --font-body: "Nunito", ui-rounded, "Segoe UI", system-ui, sans-serif;
  --font-display: "Caprasimo", var(--font-body);

  --card-tilt: 0deg;
  --card-border-width: 1px;
  --stamp-rotate: -14deg;
}

/* ==========================================================================
   HARVEST — the live theme.
   Charred brown-black, candlelight, pumpkin orange, a slick of blood red.
   ========================================================================== */

[data-theme="harvest"] {
  --bg: #130c07;
  --bg-2: #1c1109;
  --surface: #291a10;
  --surface-2: #352215;
  --surface-3: #432c1c;

  --ink: #f7e9d4;
  --ink-dim: #c9ab88;
  --ink-faint: #8d7458;

  --accent: #ee7712;         /* pumpkin */
  --accent-hot: #ffa03a;
  --accent-ink: #1a0e05;     /* text sitting on --accent */
  --accent-2: #a51e12;       /* blood */
  --accent-3: #7f9c3d;       /* witch's moss */

  --danger: #cf3a2a;
  --stamp: #bd2418;

  --line: rgba(238, 119, 18, 0.22);
  --line-strong: rgba(238, 119, 18, 0.45);

  --shadow-card: 0 2px 0 rgba(0, 0, 0, 0.5), 0 10px 24px -12px rgba(0, 0, 0, 0.9);
  --shadow-lift: 0 14px 40px -10px rgba(0, 0, 0, 0.85), 0 0 0 1px var(--line-strong);
  --glow: 0 0 24px -4px rgba(238, 119, 18, 0.5);

  --font-display: "Caprasimo", var(--font-body);
  --card-tilt: -0.4deg;

  /* Candlelight pooling in the corners, over a charred ground. */
  --page-wash:
    radial-gradient(1200px 700px at 12% -8%, rgba(238, 119, 18, 0.16), transparent 62%),
    radial-gradient(900px 600px at 92% 4%, rgba(165, 30, 18, 0.16), transparent 60%),
    radial-gradient(800px 800px at 50% 108%, rgba(127, 156, 61, 0.09), transparent 60%),
    linear-gradient(180deg, var(--bg-2), var(--bg) 55%);

  --confetti: "🎃" "🍂" "🍁" "🦇" "🕯️" "✨";
}

/* ==========================================================================
   PASTEL GOTH — near-black, dusty lilac, bone, blush.
   ========================================================================== */

[data-theme="pastelgoth"] {
  --bg: #100d18;
  --bg-2: #171227;
  --surface: #201936;
  --surface-2: #2b2247;
  --surface-3: #392c5c;

  --ink: #f3ecff;
  --ink-dim: #bdb0d8;
  --ink-faint: #857aa0;

  --accent: #d6a4ff;
  --accent-hot: #eac4ff;
  --accent-ink: #1a1226;
  --accent-2: #ff9ec4;
  --accent-3: #8be3e0;

  --danger: #ff7089;
  --stamp: #ff9ec4;

  --line: rgba(214, 164, 255, 0.24);
  --line-strong: rgba(214, 164, 255, 0.5);

  --shadow-card: 0 2px 0 rgba(0, 0, 0, 0.4), 0 10px 26px -14px rgba(0, 0, 0, 0.9);
  --shadow-lift: 0 16px 44px -12px rgba(0, 0, 0, 0.8), 0 0 0 1px var(--line-strong);
  --glow: 0 0 26px -4px rgba(214, 164, 255, 0.45);

  --font-display: "Fredoka", var(--font-body);
  --radius: 20px;
  --radius-lg: 28px;
  --card-tilt: 0deg;

  --page-wash:
    radial-gradient(1000px 700px at 20% -10%, rgba(214, 164, 255, 0.16), transparent 60%),
    radial-gradient(800px 600px at 88% 8%, rgba(255, 158, 196, 0.14), transparent 58%),
    linear-gradient(180deg, var(--bg-2), var(--bg) 60%);

  --confetti: "🦇" "🕸️" "🖤" "✨" "🌙" "🕯️";
}

/* ==========================================================================
   TOYBOX — charcoal and confetti brights, sticker cards.
   ========================================================================== */

[data-theme="toybox"] {
  --bg: #14161c;
  --bg-2: #1b1e27;
  --surface: #242833;
  --surface-2: #2f3442;
  --surface-3: #3c4354;

  --ink: #f6f8ff;
  --ink-dim: #b6bdd0;
  --ink-faint: #7f879b;

  --accent: #ff8a3d;
  --accent-hot: #ffb072;
  --accent-ink: #201004;
  --accent-2: #ff4f8b;
  --accent-3: #4fe0b0;

  --danger: #ff4f6b;
  --stamp: #ff4f8b;

  --line: rgba(255, 255, 255, 0.14);
  --line-strong: rgba(255, 138, 61, 0.55);

  --shadow-card: 0 4px 0 rgba(0, 0, 0, 0.55), 0 12px 26px -14px rgba(0, 0, 0, 0.9);
  --shadow-lift: 0 18px 46px -12px rgba(0, 0, 0, 0.85), 0 0 0 2px var(--accent);
  --glow: 0 0 22px -2px rgba(255, 138, 61, 0.55);

  --font-display: "Baloo 2", var(--font-body);
  --radius: 22px;
  --radius-lg: 30px;
  --card-border-width: 2px;
  --card-tilt: -1deg;
  --stamp-rotate: -8deg;

  --page-wash:
    radial-gradient(900px 600px at 10% -6%, rgba(255, 138, 61, 0.14), transparent 58%),
    radial-gradient(900px 600px at 90% 0%, rgba(79, 224, 176, 0.12), transparent 58%),
    radial-gradient(700px 600px at 50% 110%, rgba(255, 79, 139, 0.12), transparent 60%),
    linear-gradient(180deg, var(--bg-2), var(--bg) 60%);

  --confetti: "🎉" "⭐" "🍬" "🎈" "🧁" "✨";
}

/* ==========================================================================
   SPELLBOOK — ink-green, candle amber, moss. Dark and warm.
   ========================================================================== */

[data-theme="spellbook"] {
  --bg: #0c110e;
  --bg-2: #111813;
  --surface: #182219;
  --surface-2: #202e22;
  --surface-3: #2b3d2d;

  --ink: #f0ead6;
  --ink-dim: #b9b394;
  --ink-faint: #83805f;

  --accent: #dda033;
  --accent-hot: #f2bd5c;
  --accent-ink: #171104;
  --accent-2: #8f6b2f;
  --accent-3: #6f9c5a;

  --danger: #b8503a;
  --stamp: #b8503a;

  --line: rgba(221, 160, 51, 0.24);
  --line-strong: rgba(221, 160, 51, 0.48);

  --shadow-card: 0 2px 0 rgba(0, 0, 0, 0.5), 0 10px 26px -14px rgba(0, 0, 0, 0.9);
  --shadow-lift: 0 16px 42px -12px rgba(0, 0, 0, 0.85), 0 0 0 1px var(--line-strong);
  --glow: 0 0 26px -6px rgba(221, 160, 51, 0.5);

  --font-display: "Grenze Gotisch", var(--font-body);
  --radius: 12px;
  --radius-lg: 18px;
  --card-tilt: 0deg;

  --page-wash:
    radial-gradient(1100px 700px at 50% -12%, rgba(221, 160, 51, 0.15), transparent 60%),
    radial-gradient(700px 600px at 8% 60%, rgba(111, 156, 90, 0.1), transparent 58%),
    linear-gradient(180deg, var(--bg-2), var(--bg) 55%);

  --confetti: "🕯️" "🍄" "🌿" "🔮" "🌙" "✨";
}

/* ==========================================================================
   ARCADE — true black, cyan and magenta, chunky pixels.
   ========================================================================== */

[data-theme="arcade"] {
  --bg: #05060a;
  --bg-2: #0a0c14;
  --surface: #10131f;
  --surface-2: #171b2c;
  --surface-3: #20263d;

  --ink: #e8f6ff;
  --ink-dim: #94b3c9;
  --ink-faint: #5f7a90;

  --accent: #22e0ff;
  --accent-hot: #7cefff;
  --accent-ink: #02141a;
  --accent-2: #ff2ec4;
  --accent-3: #b6ff3d;

  --danger: #ff2e5b;
  --stamp: #ff2ec4;

  --line: rgba(34, 224, 255, 0.28);
  --line-strong: rgba(34, 224, 255, 0.6);

  --shadow-card: 0 0 0 1px rgba(34, 224, 255, 0.16), 0 10px 26px -14px #000;
  --shadow-lift: 0 0 0 2px var(--accent), 0 0 32px -6px rgba(34, 224, 255, 0.6);
  --glow: 0 0 24px -2px rgba(34, 224, 255, 0.7);

  --font-display: "Press Start 2P", var(--font-body);
  --radius-sm: 2px;
  --radius: 4px;
  --radius-lg: 6px;
  --card-tilt: 0deg;
  --stamp-rotate: 0deg;

  --page-wash:
    radial-gradient(900px 600px at 15% -8%, rgba(34, 224, 255, 0.14), transparent 58%),
    radial-gradient(900px 600px at 85% 6%, rgba(255, 46, 196, 0.12), transparent 58%),
    linear-gradient(180deg, var(--bg-2), var(--bg) 55%);

  --confetti: "🕹️" "👾" "⚡" "💾" "★" "✨";
}