/* themes.css — ALL colors live here as CSS custom properties.
 * Source of truth: docs/specs/002-theme-system.md (16 required tokens).
 *
 * NOTE / DEVIATION FROM TASK PROMPT (T-02):
 * The Day-1 task asked for per-value tokens (--bg-tile-2 ... --bg-tile-2048).
 * Merge 1240 tiles take ARBITRARY integers (10, 15, 22, 68, ...), not powers
 * of two, so per-value tokens are unworkable. Spec 002 is the source of truth
 * (CLAUDE.md ranks specs above code) and defines 16 SEMANTIC tokens — used here.
 *
 * Every theme block MUST define all 16 tokens (see spec 002 AT-5).
 */

[data-theme="clean-minimal"] {
  /* Backgrounds */
  --bg-primary:     #FFFFFF;
  --bg-secondary:   #F5F5F5;
  --bg-overlay:     rgba(255, 255, 255, 0.95);
  --bg-gameover-overlay: rgba(0, 0, 0, 0.45);

  /* Tiles */
  --tile-empty:     #EEEEEE;
  --tile-default:   #F1EFE8;
  --tile-highlight: #EEEDFE;
  --tile-merged:    #C4BFFC;
  /* Dual Chain Fusion families */
  --tile-blue:      #C7C0F0;
  --tile-gold:      #F2D98C;
  --tile-fused:     #8FD9CE;

  /* Text */
  --text-primary:   #1A1A2E;
  --text-secondary: #666666;
  --text-on-accent: #FFFFFF;

  /* Accent */
  --accent:         #534AB7;
  --accent-dark:    #3C3489;
  --accent-light:   #EAE8FB;

  /* UI */
  --border-radius:  12px;
  --shadow:         0 2px 8px rgba(0, 0, 0, 0.08);
  --transition:     background-color 0.25s ease, color 0.25s ease;
}

/* dark-premium (IAP) — values from spec 002. Locking/unlock handled in T-12/T-13.
 * NOTE: task T-02 asked only for placeholder selectors; populated with the real
 * spec values now so AT-5 (all 16 tokens present) passes and T-13 is a no-op. */
[data-theme="dark-premium"] {
  --bg-primary:     #0D0D1A;
  --bg-secondary:   #1A1A2E;
  --bg-overlay:     rgba(13, 13, 26, 0.97);
  --bg-gameover-overlay: rgba(0, 0, 0, 0.45);
  --tile-empty:     #1E1E32;
  --tile-default:   #252540;
  --tile-highlight: #2E2B5F;
  --tile-merged:    #5048C8;
  /* Dual Chain Fusion families */
  --tile-blue:      #4A43A0;
  --tile-gold:      #C9A24B;
  --tile-fused:     #2FA89A;
  --text-primary:   #E8E8FF;
  --text-secondary: #8888AA;
  --text-on-accent: #FFFFFF;
  --accent:         #7B73E8;
  --accent-dark:    #534AB7;
  --accent-light:   #1E1E40;
  --border-radius:  12px;
  --shadow:         0 2px 12px rgba(83, 74, 183, 0.3);
  --transition:     background-color 0.25s ease, color 0.25s ease;
}

/* warm-playful (IAP) — values from spec 002. See note above. */
[data-theme="warm-playful"] {
  --bg-primary:     #FFF8F0;
  --bg-secondary:   #FFE8CC;
  --bg-overlay:     rgba(255, 248, 240, 0.97);
  --bg-gameover-overlay: rgba(0, 0, 0, 0.45);
  --tile-empty:     #FFE0B2;
  --tile-default:   #FFCC80;
  --tile-highlight: #FFB74D;
  --tile-merged:    #FF8A65;
  /* Dual Chain Fusion families */
  --tile-blue:      #B39DDB;
  --tile-gold:      #F4B43E;
  --tile-fused:     #4DB6AC;
  --text-primary:   #3E2723;
  --text-secondary: #795548;
  --text-on-accent: #FFFFFF;
  --accent:         #F4511E;
  --accent-dark:    #BF360C;
  --accent-light:   #FBE9E7;
  --border-radius:  16px;
  --shadow:         0 2px 8px rgba(244, 81, 30, 0.15);
  --transition:     background-color 0.25s ease, color 0.25s ease;
}