/* theme-tokens.css — THE brand palette. Loaded first on every page.
 *
 * Every brand green on the site is var(--pp-green-<step>) (or
 * rgba(var(--pp-green-<step>-rgb), a) for tints/shadows). Nothing else declares
 * a green. A seasonal theme re-skins the whole site by redefining this one
 * scale under html[data-site-theme="<id>"] — see the bottom of this file and
 * site-themes.css for the decorative layer.
 *
 * Steps follow the Tailwind green scale the site was already drawing from.
 * Contrast notes that the rest of the CSS relies on:
 *   white on 700 = 5.0:1 (AA)  — solid CTA fills carrying white labels use 700
 *   white on 600 = 3.3:1       — never put small white text on 600
 *
 * Off-scale green darks/inks are --pp-green-d1..d10 / -ink*, and meaningful
 * greens (paid, success, rarity) are --pp-success* / --pp-rarity-*: never
 * hard-code a green anywhere else.
 *
 * Migrated by tools/tokenize-greens.cjs; near-duplicates (emerald #10B981,
 * sage #3D8B6A, #126B33 …) were folded onto the nearest step.
 */
:root {
  --pp-green-50:  #F0FDF4; --pp-green-50-rgb:  240, 253, 244;
  --pp-green-100: #DCFCE7; --pp-green-100-rgb: 220, 252, 231;
  --pp-green-200: #BBF7D0; --pp-green-200-rgb: 187, 247, 208;
  --pp-green-300: #86EFAC; --pp-green-300-rgb: 134, 239, 172;
  --pp-green-400: #4ADE80; --pp-green-400-rgb: 74, 222, 128;
  --pp-green-500: #22C55E; --pp-green-500-rgb: 34, 197, 94;
  --pp-green-600: #16A34A; --pp-green-600-rgb: 22, 163, 74;
  --pp-green-700: #15803D; --pp-green-700-rgb: 21, 128, 61;
  --pp-green-800: #166534; --pp-green-800-rgb: 22, 101, 52;
  --pp-green-900: #14532D; --pp-green-900-rgb: 20, 83, 45;
  --pp-green-950: #052E16; --pp-green-950-rgb: 5, 46, 22;

  /* Green-tinted darks & inks that are NOT on the scale above. Each keeps the
     exact value it had when it was hard-coded, so the default look is
     unchanged; a skin overrides them below. Darkest to lightest: */
  --pp-green-d1:  #0D1A14;   /* builder hero banner gradient start */
  --pp-green-d2:  #0E1612;   /* login dark panel gradient end */
  --pp-green-d3:  #121A16;   /* login dark panel gradient start */
  --pp-green-d4:  #0A1F0F;   /* header language/currency dropdown (dark) */
  --pp-green-d5:  #12261C;   /* builder hero banner gradient middle */
  --pp-green-d6:  #06281B;   /* checked checkbox fill (dark) */
  --pp-green-d7:  #082F19;   /* dark "light green" wash: icon tiles, success pills, --green-light */
  --pp-green-d8:  #112A1F;   /* votes selected card (dark) */
  --pp-green-d9:  #14351F;   /* manage-reviews --green-light */
  --pp-green-d10: #1F2F24;   /* builder pack-view peek thumbnail tile (dark) */
  --pp-green-ink:       #1E2A22;   /* auth pages body text (light) */
  --pp-green-ink-soft:  #4A6356;   /* auth pages secondary text, dark page tabs */
  --pp-green-ink-muted: #5A8070;   /* header dropdown section labels (dark) */
  --pp-green-shade-rgb: 15, 23, 18;     /* green-black drop shadows */
  --pp-green-glow-rgb:  110, 231, 183;  /* sync ring highlight */

  /* Status colours. Greens that MEAN something (paid, completed, success,
     "used", uncommon rarity) — skins deliberately leave these alone so a paid
     order never reads as a warning. JS that needs a hex (canvas, "+alpha"
     suffixes) reads them at runtime with getComputedStyle. */
  --pp-success:        #22C55E; --pp-success-rgb: 34, 197, 94;
  --pp-success-strong: #16A34A; --pp-success-strong-rgb: 22, 163, 74;
  --pp-success-deep:   #15803D;
  --pp-rarity-uncommon: #16A34A;
}

/* ── Halloween: the "green" scale becomes pumpkin orange ───────────────────
 * Same step semantics, so every contrast rule above still holds:
 * white on 700 (#C2410C) = 5.2:1. */
html[data-site-theme="halloween"] {
  --pp-green-50:  #FFF7ED; --pp-green-50-rgb:  255, 247, 237;
  --pp-green-100: #FFEDD5; --pp-green-100-rgb: 255, 237, 213;
  --pp-green-200: #FED7AA; --pp-green-200-rgb: 254, 215, 170;
  --pp-green-300: #FDBA74; --pp-green-300-rgb: 253, 186, 116;
  --pp-green-400: #FB923C; --pp-green-400-rgb: 251, 146, 60;
  --pp-green-500: #F97316; --pp-green-500-rgb: 249, 115, 22;
  --pp-green-600: #EA580C; --pp-green-600-rgb: 234, 88, 12;
  --pp-green-700: #C2410C; --pp-green-700-rgb: 194, 65, 12;
  --pp-green-800: #9A3412; --pp-green-800-rgb: 154, 52, 18;
  --pp-green-900: #7C2D12; --pp-green-900-rgb: 124, 45, 18;
  --pp-green-950: #431407; --pp-green-950-rgb: 67, 20, 7;

  /* Same lightness + saturation as the defaults, hue turned to pumpkin. */
  --pp-green-d1:  #1A120D;
  --pp-green-d2:  #16110E;
  --pp-green-d3:  #1A1512;
  --pp-green-d4:  #1F120A;
  --pp-green-d5:  #261912;
  --pp-green-d6:  #281206;
  --pp-green-d7:  #2F1608;
  --pp-green-d8:  #2A1A11;
  --pp-green-d9:  #352014;
  --pp-green-d10: #2F251F;
  --pp-green-ink:       #2A221E;
  --pp-green-ink-soft:  #63534A;
  --pp-green-ink-muted: #80685A;
  --pp-green-shade-rgb: 23, 18, 15;
  --pp-green-glow-rgb:  231, 154, 110;
}