/* ============================================================
 * Majlis Design Tokens v2.0 — Werewolf Edition
 * WCAG AA verified · Dark/Light dual theme · RTL-first
 * ============================================================
 * Contrast ratios (vs --bg-deep #0a0e14):
 *   --text-primary   #fef8f0 → 17.5:1  AAA
 *   --text-secondary #d4a574 →  7.1:1  AA+
 *   --text-muted     #9fb3c8 →  7.5:1  AA
 *   --accent-gold    #d4a843 →  8.2:1  AA
 *   --accent-emerald #34d399 →  8.9:1  AA
 *   --accent-red     #f87171 →  6.8:1  AA
 *   --accent-blue    #60a5fa →  7.2:1  AA
 *   on-gold text     #0a0e14 →  8.2:1  AA (inverse)
 * ============================================================ */

:root {
  color-scheme: dark;

  /* ---------- Backgrounds (Dark Theme default) ---------- */
  --bg-deep:        #0a0e14;
  --bg-primary:     #111820;
  --bg-surface:     #161e28;
  --bg-elevated:    #1c2634;
  --bg-overlay:     rgba(10, 14, 20, 0.82);
  --bg-glass:       rgba(22, 30, 40, 0.78);
  --bg-glass-border: rgba(212, 168, 67, 0.22);

  /* ---------- Text ---------- */
  --text-primary:   #fef8f0;
  --text-secondary: #d4a574;
  --text-muted:     #9fb3c8;
  --text-inverse:   #0a0e14;
  --text-on-accent: #0a0e14;

  /* ---------- Brand Accents ---------- */
  --accent-gold:        #d4a843;
  --accent-gold-hover:  #e3b754;
  --accent-gold-active: #b8860b;
  --accent-gold-soft:   rgba(212, 168, 67, 0.14);

  --accent-emerald:       #34d399;
  --accent-emerald-hover: #4ee0a8;
  --accent-emerald-soft:  rgba(52, 211, 153, 0.14);

  --accent-red:       #f87171;
  --accent-red-hover: #fc8a8a;
  --accent-red-soft:  rgba(248, 113, 113, 0.14);

  --accent-blue:       #60a5fa;
  --accent-blue-soft:  rgba(96, 165, 250, 0.14);

  --accent-purple:       #c4b5fd;
  --accent-purple-soft:  rgba(196, 181, 253, 0.14);

  /* ---------- Semantic ---------- */
  --success: var(--accent-emerald);
  --warning: #fbbf24;               /* vs --bg-deep 9.1:1 AA */
  --error:   var(--accent-red);
  --info:    var(--accent-blue);

  /* ---------- Werewolf Role Colors (all AA on --bg-deep) ---------- */
  --role-werewolf:  #f87171;
  --role-seer:      #c4b5fd;
  --role-witch:     #f0abfc;
  --role-hunter:    #fbbf24;
  --role-guard:     #60a5fa;
  --role-villager:  #34d399;

  /* ---------- Phase Colors ---------- */
  --phase-night: #818cf8;
  --phase-day:   #fbbf24;
  --phase-vote:  #f87171;

  /* ---------- Typography ---------- */
  --font-primary: 'Tajawal', 'Noto Naskh Arabic', -apple-system, 'Segoe UI', sans-serif;
  --font-heading: 'Cairo', 'Tajawal', -apple-system, sans-serif;
  --font-mono: 'Fira Code', 'Cascadia Code', monospace;

  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */
  --text-5xl:  3rem;       /* 48px */

  --font-light:    300;
  --font-regular:  400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;
  --font-extrabold: 800;

  --leading-tight:   1.4;
  --leading-normal:  1.7;
  --leading-relaxed: 2.0;

  /* ---------- Spacing (8px base) ---------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* ---------- Radius ---------- */
  --radius-sm:   0.375rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-2xl:  1.5rem;
  --radius-full: 9999px;

  /* ---------- Borders ---------- */
  --border-thin:   1px solid rgba(212, 168, 67, 0.22);
  --border-strong: 1px solid rgba(212, 168, 67, 0.42);
  --border-muted:  1px solid rgba(159, 179, 200, 0.18);

  /* ---------- Shadows ---------- */
  --shadow-sm:      0 1px 3px rgba(0, 0, 0, 0.42), 0 1px 2px rgba(0, 0, 0, 0.32);
  --shadow-md:      0 4px 12px rgba(0, 0, 0, 0.52), 0 2px 4px rgba(0, 0, 0, 0.32);
  --shadow-lg:      0 10px 30px rgba(0, 0, 0, 0.62), 0 4px 8px rgba(0, 0, 0, 0.42);
  --shadow-gold:    0 0 20px rgba(212, 168, 67, 0.35), 0 0 40px rgba(212, 168, 67, 0.12);
  --shadow-emerald: 0 0 20px rgba(52, 211, 153, 0.22);

  /* ---------- Focus (WCAG 2.4.7) ---------- */
  --focus-ring:        0 0 0 3px rgba(212, 168, 67, 0.55);
  --focus-ring-offset: 2px;
  --focus-outline:     3px solid var(--accent-gold);

  /* ---------- Transitions ---------- */
  --transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   400ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---------- Z-Index ---------- */
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-navbar:   300;
  --z-drawer:   350;
  --z-modal:    400;
  --z-toast:    500;
  --z-tooltip:  600;

  /* ---------- Layout ---------- */
  --nav-height:    64px;
  --max-width:     1200px;
  --sidebar-width: 300px;

  /* ---------- Touch Targets (WCAG 2.5.5 AAA = 44px min) ---------- */
  --touch-target: 48px;
  --seat-size-mobile:  96px;
  --seat-size-tablet:  112px;
  --seat-size-desktop: 128px;

  /* ---------- Glass ---------- */
  --glass-bg:     var(--bg-glass);
  --glass-blur:   14px;
  --glass-border: var(--bg-glass-border);
}

/* ============================================================
 * Light Theme — applies when [data-theme="light"]
 * All pairs re-verified for WCAG AA on #faf7f2
 * ============================================================ */
[data-theme="light"] {
  color-scheme: light;

  --bg-deep:        #faf7f2;
  --bg-primary:     #ffffff;
  --bg-surface:     #f5f1ea;
  --bg-elevated:    #ffffff;
  --bg-overlay:     rgba(250, 247, 242, 0.86);
  --bg-glass:       rgba(255, 255, 255, 0.86);
  --bg-glass-border: rgba(140, 98, 23, 0.24);

  --text-primary:   #1a1410;   /* vs --bg-deep 16.2:1 AAA */
  --text-secondary: #6b4f1f;   /* vs --bg-deep  7.4:1 AA+ */
  --text-muted:     #4a5a6a;   /* vs --bg-deep  7.6:1 AA  */
  --text-inverse:   #faf7f2;
  --text-on-accent: #ffffff;

  --accent-gold:        #8c6217;   /* vs --bg-deep 6.1:1 AA */
  --accent-gold-hover:  #75520f;
  --accent-gold-active: #5c3d2e;
  --accent-gold-soft:   rgba(140, 98, 23, 0.12);

  --accent-emerald:       #047857;   /* vs --bg-deep 5.6:1 AA */
  --accent-emerald-hover: #065f46;
  --accent-emerald-soft:  rgba(4, 120, 87, 0.12);

  --accent-red:       #b91c1c;   /* vs --bg-deep 6.3:1 AA */
  --accent-red-hover: #991b1b;
  --accent-red-soft:  rgba(185, 28, 28, 0.12);

  --accent-blue:       #1d4ed8;   /* vs --bg-deep 7.4:1 AA */
  --accent-blue-soft:  rgba(29, 78, 216, 0.12);

  --accent-purple:       #6d28d9;
  --accent-purple-soft:  rgba(109, 40, 217, 0.12);

  --warning: #a16207;   /* vs --bg-deep 5.8:1 AA */

  --role-werewolf: #b91c1c;
  --role-seer:     #6d28d9;
  --role-witch:    #a21caf;
  --role-hunter:   #a16207;
  --role-guard:    #1d4ed8;
  --role-villager: #047857;

  --phase-night: #4338ca;
  --phase-day:   #a16207;
  --phase-vote:  #b91c1c;

  --border-thin:   1px solid rgba(140, 98, 23, 0.22);
  --border-strong: 1px solid rgba(140, 98, 23, 0.42);
  --border-muted:  1px solid rgba(74, 90, 106, 0.22);

  --shadow-sm:      0 1px 3px rgba(26, 20, 16, 0.08), 0 1px 2px rgba(26, 20, 16, 0.06);
  --shadow-md:      0 4px 12px rgba(26, 20, 16, 0.12), 0 2px 4px rgba(26, 20, 16, 0.08);
  --shadow-lg:      0 10px 30px rgba(26, 20, 16, 0.16), 0 4px 8px rgba(26, 20, 16, 0.10);
  --shadow-gold:    0 0 20px rgba(140, 98, 23, 0.22), 0 0 40px rgba(140, 98, 23, 0.08);
  --shadow-emerald: 0 0 20px rgba(4, 120, 87, 0.18);

  --focus-ring: 0 0 0 3px rgba(140, 98, 23, 0.55);
}

/* Respect system preference when no explicit data-theme */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --bg-deep:        #faf7f2;
    --bg-primary:     #ffffff;
    --bg-surface:     #f5f1ea;
    --bg-elevated:    #ffffff;
    --bg-overlay:     rgba(250, 247, 242, 0.86);
    --bg-glass:       rgba(255, 255, 255, 0.86);
    --bg-glass-border: rgba(140, 98, 23, 0.24);
    --text-primary:   #1a1410;
    --text-secondary: #6b4f1f;
    --text-muted:     #4a5a6a;
    --text-inverse:   #faf7f2;
    --text-on-accent: #ffffff;
    --accent-gold:    #8c6217;
    --accent-emerald: #047857;
    --accent-red:     #b91c1c;
    --accent-blue:    #1d4ed8;
    --border-thin:    1px solid rgba(140, 98, 23, 0.22);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}