/* ============================================================
   Scordle Games — Colour tokens
   Source: scordle-02-design-system.md §2.2
   Material 3 dynamic palette seeded from brand green #4CAF50.
   Light is the default :root; dark mode is a first-class scope
   activated via [data-theme="dark"] (and prefers-color-scheme).
   Never use raw hex in component code — always reference a token.
   ============================================================ */

:root {
  /* --- Brand / Primary — Green (Feed) --- */
  --primary: #4CAF50;
  --on-primary: #FFFFFF;
  --primary-container: #B9F0B8;
  --on-primary-container: #002204;

  /* --- Tab accent colours (§2.2.2) --- */
  --accent-feed: #4CAF50;          /* Tab 1 — Feed (= primary) */
  --accent-results: #FF9800;       /* Tab 2 — Results */
  --accent-streaks: #FF5722;       /* Tab 3 — Streaks */
  --accent-competitions: #009688;  /* Tab 4 — Competitions */
  --accent-clubs: #2196F3;         /* Tab 5 — Clubs */
  --accent-premium: #9C27B0;       /* header/global — upgrade & plan UI */

  /* --- Semantic state colours (§2.2.3) --- */
  --success: #43A047;
  --warning: #FB8C00;
  --error: #E53935;
  --info: #1E88E5;
  --on-success: #FFFFFF;
  --on-warning: #FFFFFF;
  --on-error: #FFFFFF;

  /* --- Surface & background — Light (§2.2.4) --- */
  --background: #FAFAFA;
  --surface: #FFFFFF;
  --surface-variant: #F1F8E9;
  --on-surface: #1A1A1A;
  --on-surface-variant: #555555;
  --outline: #CCCCCC;
  --outline-variant: #E0E0E0;

  /* --- Score grid cell states (§2.8.1 / §6.2.1) --- */
  --cell-correct: #4CAF50;
  --cell-present: #FF9800;
  --cell-absent: #9E9E9E;          /* dark mode → #444444 */
  --cell-empty: var(--outline);

  /* --- Leaderboard rank medals (§2.7) --- */
  --rank-gold: #FFD700;
  --rank-silver: #C0C0C0;
  --rank-bronze: #CD7F32;

  /* --- Tonal accent washes (derived, for chips/containers) --- */
  --premium-wash: color-mix(in srgb, var(--accent-premium) 20%, transparent);
  --success-wash: color-mix(in srgb, var(--success) 14%, transparent);
  --warning-wash: color-mix(in srgb, var(--warning) 16%, transparent);
}

/* ============================================================
   Dark mode (§2.2.1 / §2.2.5) — first-class, designed alongside light
   ============================================================ */
[data-theme="dark"] {
  --primary: #86E082;
  --on-primary: #003A06;
  --primary-container: #1A5E20;
  --on-primary-container: #B9F0B8;

  /* tab accents keep their hue in dark mode */
  --accent-feed: #86E082;

  --background: #121212;
  --surface: #1E1E1E;
  --surface-variant: #1A2E1A;
  --on-surface: #E8E8E8;
  --on-surface-variant: #AAAAAA;
  --outline: #444444;
  --outline-variant: #333333;

  --cell-absent: #444444;
  --cell-empty: var(--outline);
}

/* Dark mode is opt-in via [data-theme="dark"] on a root element.
   To follow the OS preference automatically, add this one line in
   the consuming app:  if (matchMedia('(prefers-color-scheme:dark)').matches)
   document.documentElement.dataset.theme = 'dark';  */