/* ═══════════════════════════════════════════════════════
   Mahjong Dubai — brand tokens (Plan 33, Phase 1)
   The ONLY file on www allowed to hold colour literals. Values mirror the
   play app's semantic tokens in client/src/index.css, so Day (garden) and
   Night (dark) look the same on www, guides, legal, community and play.
   Day is the default; <html data-theme> is set before paint by the inline
   script in every page <head> (shared/themeCookie.ts).
═══════════════════════════════════════════════════════ */

:root,
[data-theme="garden"] {
  color-scheme: light;
  --surface-app: #fdfbf7;
  --surface-panel: #efe7da;
  --surface-raised: #ffffff;
  --surface-sunken: #e9e2d6;
  --surface-felt: #cfe0d4;
  --felt-rim: #8aa99c;
  --border-subtle: #cdd9d2;
  --border-strong: #2d5e50;
  --text-primary: #2a2722;
  --text-secondary: #58544c;
  --text-muted: #4f6e62;
  --brand: #1a3d32;
  --brand-hover: #2d5e50;
  --brand-soft: #e3ece6;
  --accent-rose: #b35f6b;
  --accent-gold: #d4a030;
  --accent-gold-soft: #f6e7c1;
  --button-primary-bg: #1a3d32;
  --button-primary-text: #fdfbf7;
  --shadow-sm: 0 1px 2px rgba(40, 55, 48, 0.06), 0 1px 3px rgba(40, 55, 48, 0.08);
  --shadow-md: 0 2px 10px rgba(40, 55, 48, 0.08), 0 6px 20px rgba(40, 55, 48, 0.06);
  --shadow-lg: 0 12px 40px rgba(26, 61, 50, 0.16);
  --wordmark: linear-gradient(110deg, #9dbbb0 0%, #1a3d32 20%, #ffd766 45%, #fff1b8 50%, #1a3d32 80%);

  /* www extras — derived from the palette above, not new colours. */
  --text-on-gold: #1a1005;
  --nav-bg: rgba(253, 251, 247, 0.88);
  --hero-glow: radial-gradient(60% 70% at 70% 40%, rgba(45, 94, 80, 0.16), rgba(45, 94, 80, 0) 70%);
  --overlay: rgba(42, 39, 34, 0.45);
  --tile-face: #fffef8;
  --tile-shadow: rgba(0, 0, 0, 0.18);
}

[data-theme="dark"] {
  color-scheme: dark;
  --surface-app: #080604;
  --surface-panel: #1a140c;
  --surface-raised: #241a10;
  --surface-sunken: #0e0a04;
  --surface-felt: #3e2815;
  --felt-rim: #251608;
  --border-subtle: rgba(212, 160, 48, 0.15);
  --border-strong: #8a6030;
  --text-primary: #f5ecd8;
  --text-secondary: #c9b896;
  /* play uses #8a7a5c, which is ~4:1 on --surface-raised; www lifts it to pass 4.5:1. */
  --text-muted: #a8977a;
  --brand: #d4a030;
  --brand-hover: #f0c040;
  --brand-soft: rgba(212, 160, 48, 0.12);
  --accent-rose: #c97b86;
  --accent-gold: #d4a030;
  --accent-gold-soft: rgba(212, 160, 48, 0.15);
  --button-primary-bg: #d4a030;
  --button-primary-text: #1a1005;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 16px 50px rgba(0, 0, 0, 0.6);
  --wordmark: linear-gradient(110deg, #8a6030 0%, #d4a030 25%, #fff1b8 50%, #d4a030 75%);

  --text-on-gold: #1a1005;
  --nav-bg: rgba(8, 6, 4, 0.86);
  --hero-glow: radial-gradient(60% 70% at 70% 40%, rgba(212, 160, 48, 0.14), rgba(212, 160, 48, 0) 70%);
  --overlay: rgba(0, 0, 0, 0.6);
  --tile-face: #fffef8;
}