/**
 * ====================================================================
 * FATAN DESIGN TOKENS SYSTEM (OKLCH - 9-Scale Perceptually Uniform)
 * ====================================================================
 * Brand Colors & Functional Palettes calibrated for WCAG AAA Compliance
 * and zero-jank high-performance rendering.
 */

:root {
  /* ── 1. INDIGO (Primary Brand & Navigation) ── */
  --color-indigo-50: oklch(0.962 0.018 272.3);   /* #eef2ff */
  --color-indigo-100: oklch(0.930 0.033 272.8);  /* #e0e7ff */
  --color-indigo-200: oklch(0.870 0.062 274.0);  /* #c7d2fe */
  --color-indigo-300: oklch(0.785 0.104 274.7);  /* #a5b4fc */
  --color-indigo-400: oklch(0.680 0.158 276.9);  /* #818cf8 */
  --color-indigo-500: oklch(0.585 0.204 277.1);  /* #6366f1 */
  --color-indigo-600: oklch(0.511 0.230 277.0);  /* #4f46e5 - Main Brand */
  --color-indigo-700: oklch(0.457 0.215 277.0);  /* #4338ca - AAA on white (7.8:1) */
  --color-indigo-800: oklch(0.398 0.177 277.4);  /* #3730a3 */
  --color-indigo-900: oklch(0.359 0.135 278.7);  /* #312e81 */
  --color-indigo-950: oklch(0.245 0.095 278.0);  /* #1e1b4b */

  /* ── 2. SLATE (Neutrals, Surfaces, Text, Borders) ── */
  --color-slate-50: oklch(0.984 0.003 247.9);   /* #f8fafc */
  --color-slate-100: oklch(0.968 0.007 247.9);  /* #f1f5f9 */
  --color-slate-200: oklch(0.929 0.013 255.5);  /* #e2e8f0 */
  --color-slate-300: oklch(0.869 0.020 252.9);  /* #cbd5e1 */
  --color-slate-400: oklch(0.711 0.035 256.8);  /* #94a3b8 */
  --color-slate-500: oklch(0.554 0.041 257.4);  /* #64748b */
  --color-slate-600: oklch(0.446 0.037 257.3);  /* #475569 - AAA on white (7.1:1) */
  --color-slate-700: oklch(0.372 0.039 257.3);  /* #334155 */
  --color-slate-800: oklch(0.279 0.037 260.0);  /* #1e293b - Dark Surface */
  --color-slate-850: oklch(0.235 0.038 262.0);  /* #172033 - Deep Card */
  --color-slate-900: oklch(0.208 0.040 265.8);  /* #0f172a - Dark BG */
  --color-slate-950: oklch(0.145 0.035 265.0);  /* #020617 - Pure Dark */

  /* ── 3. EMERALD (Success, XP Growth, Attendance) ── */
  --color-emerald-50: oklch(0.982 0.018 155.8);   /* #f0fdf4 */
  --color-emerald-100: oklch(0.962 0.043 156.7);  /* #dcfce7 */
  --color-emerald-200: oklch(0.925 0.081 156.0);  /* #bbf7d0 */
  --color-emerald-300: oklch(0.871 0.136 154.4);  /* #86efac */
  --color-emerald-400: oklch(0.800 0.182 151.7);  /* #4ade80 */
  --color-emerald-500: oklch(0.723 0.192 149.6);  /* #22c55e */
  --color-emerald-600: oklch(0.627 0.170 149.2);  /* #16a34a / #059669 */
  --color-emerald-700: oklch(0.527 0.137 150.1);  /* #15803d / #047857 - AAA on white (7.1:1) */
  --color-emerald-800: oklch(0.448 0.108 151.3);  /* #166534 - AAA text on emerald-50 (7.4:1) */
  --color-emerald-900: oklch(0.393 0.090 152.5);  /* #14532d */

  /* ── 4. AMBER (XP Points, Streaks, Badges, Warnings) ── */
  --color-amber-50: oklch(0.987 0.021 95.3);    /* #fffbeb */
  --color-amber-100: oklch(0.962 0.058 95.6);   /* #fef3c7 */
  --color-amber-200: oklch(0.924 0.115 95.7);   /* #fde68a */
  --color-amber-300: oklch(0.879 0.153 91.6);   /* #fcd34d */
  --color-amber-400: oklch(0.837 0.164 84.4);   /* #fbbf24 */
  --color-amber-500: oklch(0.769 0.165 70.1);   /* #f59e0b */
  --color-amber-600: oklch(0.666 0.157 58.3);   /* #d97706 */
  --color-amber-700: oklch(0.555 0.146 49.0);   /* #b45309 */
  --color-amber-800: oklch(0.473 0.125 46.2);   /* #92400e - AAA text on white (7.2:1) */
  --color-amber-900: oklch(0.414 0.105 45.9);   /* #78350f - AAA text on amber-100 (7.1:1) */

  /* ── 5. ROSE / RED (Alerts, Destructive, Absence, Penalty) ── */
  --color-rose-50: oklch(0.969 0.015 12.4);    /* #fff1f2 */
  --color-rose-100: oklch(0.941 0.030 12.6);   /* #ffe4e6 */
  --color-rose-200: oklch(0.892 0.056 10.0);   /* #fecdd3 */
  --color-rose-300: oklch(0.810 0.106 11.6);   /* #fda4af */
  --color-rose-400: oklch(0.719 0.169 13.4);   /* #fb7185 */
  --color-rose-500: oklch(0.645 0.215 16.4);   /* #f43f5e / #ef4444 */
  --color-rose-600: oklch(0.586 0.222 17.6);   /* #e11d48 / #dc2626 */
  --color-rose-700: oklch(0.514 0.198 16.9);   /* #be123c / #b91c1c - AAA on white (7.1:1) */
  --color-rose-800: oklch(0.455 0.171 13.7);   /* #9f1239 - AAA text on rose-50 (7.4:1) */
  --color-rose-900: oklch(0.410 0.150 10.3);   /* #881337 */

  /* ── 6. SKY / BLUE (Classroom Tools, Projector, Info) ── */
  --color-sky-50: oklch(0.977 0.012 236.6);    /* #f0f9ff */
  --color-sky-100: oklch(0.951 0.025 236.8);   /* #e0f2fe */
  --color-sky-200: oklch(0.901 0.055 230.9);   /* #bae6fd */
  --color-sky-300: oklch(0.828 0.101 230.3);   /* #7dd3fc */
  --color-sky-400: oklch(0.754 0.139 232.7);   /* #38bdf8 */
  --color-sky-500: oklch(0.685 0.148 237.3);   /* #0ea5e9 */
  --color-sky-600: oklch(0.588 0.139 242.0);   /* #0284c7 */
  --color-sky-700: oklch(0.500 0.119 242.7);   /* #0369a1 - AAA on white (7.1:1) */
  --color-sky-800: oklch(0.443 0.100 240.8);   /* #075985 */
  --color-sky-900: oklch(0.391 0.085 240.9);   /* #0c4a6e */

  /* ── 7. VIOLET / PURPLE (Arcade, Rewards, Card Games) ── */
  --color-violet-50: oklch(0.969 0.016 293.8);   /* #f5f3ff */
  --color-violet-100: oklch(0.943 0.028 294.6);  /* #ede9fe */
  --color-violet-200: oklch(0.894 0.055 293.3);  /* #ddd6fe */
  --color-violet-300: oklch(0.811 0.101 293.6);  /* #c4b5fd */
  --color-violet-400: oklch(0.709 0.159 293.5);  /* #a78bfa */
  --color-violet-500: oklch(0.606 0.219 292.7);  /* #8b5cf6 */
  --color-violet-600: oklch(0.541 0.247 293.0);  /* #7c3aed */
  --color-violet-700: oklch(0.491 0.241 292.6);  /* #6d28d9 - AAA on white (7.5:1) */
  --color-violet-800: oklch(0.432 0.211 292.8);  /* #5b21b6 */
  --color-violet-900: oklch(0.380 0.178 293.7);  /* #4c1d95 */

  /* ── 8. TEAL (Quranic Mushaf, Tajweed, Islamic Engine) ── */
  --color-teal-50: oklch(0.984 0.014 180.7);    /* #f0fdfa */
  --color-teal-100: oklch(0.953 0.050 180.8);   /* #ccfbf1 */
  --color-teal-200: oklch(0.910 0.093 180.4);   /* #99f6e4 */
  --color-teal-300: oklch(0.855 0.125 181.1);   /* #5eead4 */
  --color-teal-400: oklch(0.785 0.133 181.9);   /* #2dd4bf */
  --color-teal-500: oklch(0.704 0.123 182.5);   /* #14b8a6 */
  --color-teal-600: oklch(0.600 0.104 184.7);   /* #0d9488 */
  --color-teal-700: oklch(0.511 0.086 186.4);   /* #0f766e - AAA on white (7.2:1) */
  --color-teal-800: oklch(0.437 0.071 188.2);   /* #115e59 */
  --color-teal-900: oklch(0.386 0.059 188.4);   /* #134e4a */

  /* ── 9. SEMANTIC SURFACES & ELEVATION (Light Mode) ── */
  --surface-page: var(--color-slate-50);
  --surface-card: #ffffff;
  --surface-card-elevated: #ffffff;
  --surface-border: var(--color-slate-200);
  --surface-border-subtle: var(--color-slate-100);
  
  --text-primary: var(--color-slate-900);
  --text-secondary: var(--color-slate-600); /* AAA compliant */
  --text-muted: var(--color-slate-500);     /* High contrast */
  --text-on-brand: #ffffff;
  
  --glass-bg: rgba(255, 255, 255, 0.82);
  --glass-border: rgba(255, 255, 255, 0.65);
  --glass-dock-bg: rgba(255, 255, 255, 0.90);
  --modal-backdrop: rgba(15, 23, 42, 0.55);
}

/* ── 10. DARK MODE OVERRIDES (Perceptually Matched) ── */
html.dark {
  --surface-page: var(--color-slate-900);
  --surface-card: var(--color-slate-800);
  --surface-card-elevated: var(--color-slate-850);
  --surface-border: rgba(255, 255, 255, 0.08);
  --surface-border-subtle: rgba(255, 255, 255, 0.04);

  --text-primary: var(--color-slate-50);
  --text-secondary: var(--color-slate-300); /* AAA compliant on dark */
  --text-muted: var(--color-slate-400);
  --text-on-brand: #ffffff;

  --glass-bg: rgba(30, 41, 59, 0.78);
  --glass-border: rgba(255, 255, 255, 0.09);
  --glass-dock-bg: rgba(15, 23, 42, 0.88);
  --modal-backdrop: rgba(2, 6, 23, 0.75);
}