/* =====================================================================
   DARB DESIGN TOKENS (v4)
   Calm path green + warm gold for achievements · flat, quiet surfaces
   Bilingual (RTL / LTR) · Offline-first
   Variable names are kept from v3.5 so existing component CSS still works.
   ===================================================================== */

:root {
  /* --- Brand --- */
  --brand: #0f6e56;
  --brand-deep: #0c4a3c;
  --midnight: #14201c;
  --midnight-soft: #22302b;
  --saudi-gold: #b8891a;
  --saudi-gold-light: #f3dfa6;
  --saudi-gold-dark: #8a6510;
  --saudi-gold-soft: #fbf4e0;

  --emerald: #0f6e56;
  --emerald-light: #5fd3ae;
  --emerald-dark: #0b5644;
  --emerald-soft: #e3f2ec;

  /* Exam tracks */
  --gat-purple: #5646a8;
  --gat-purple-soft: #efedfa;
  --gat-deep: #3a2f78;
  --saat-teal: #0f6e56;
  --saat-teal-soft: #e3f2ec;

  /* --- Surfaces & text --- */
  --paper: #f6f7f5;
  --paper-pattern: #f0f2ef;
  --surface: #ffffff;
  --surface-2: #f0f2ef;
  --surface-3: #e3e7e3;

  --ink: #14201c;
  --ink-secondary: #3a4843;
  --muted: #5f6d68;
  --muted-soft: #95a19c;
  --line: #e2e6e2;
  --line-strong: #cdd4cf;

  --accent: var(--brand);
  --accent-ink: #ffffff;
  --accent-soft: var(--emerald-soft);
  --accent-hover: var(--emerald-dark);

  --gold: var(--saudi-gold);
  --gold-soft: var(--saudi-gold-soft);

  --ochre: #a65f0a;
  --ochre-soft: #fdf0dc;

  /* --- Feedback --- */
  --good: #1f8a4c;
  --good-soft: #e5f4ea;
  --bad: #c8372d;
  --bad-soft: #fbe9e7;
  --warn: #b5650b;
  --warn-soft: #fdf0dc;
  --info: #2563a8;
  --info-soft: #e8f0fa;

  /* Header / tab bar backdrop (kept opaque enough to read over content) */
  --glass-bg: rgba(255, 255, 255, 0.94);
  --glass-surface: #ffffff;
  --glass-border: var(--line);
  --glass-blur: blur(10px);

  /* --- Elevation: quiet, one step at a time --- */
  --shadow-xs: 0 1px 2px rgba(20, 32, 28, 0.05);
  --shadow-sm: 0 1px 3px rgba(20, 32, 28, 0.07);
  --shadow: 0 1px 2px rgba(20, 32, 28, 0.04), 0 2px 8px rgba(20, 32, 28, 0.04);
  --shadow-md: 0 8px 24px rgba(20, 32, 28, 0.08);
  --shadow-lg: 0 16px 40px rgba(20, 32, 28, 0.12);
  --shadow-glow-gold: none;
  --shadow-glow-emerald: none;

  /* --- Type --- */
  --font-display: "Readex Pro", "IBM Plex Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Tahoma, sans-serif;
  --font-body: "IBM Plex Sans Arabic", "Readex Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Tahoma, sans-serif;
  --font-mono: "IBM Plex Mono", "Cascadia Mono", Consolas, "Courier New", monospace;

  --step--2: 0.75rem;
  --step--1: 0.875rem;
  --step-0: 1rem;
  --step-1: 1.125rem;
  --step-2: 1.35rem;
  --step-3: 1.6rem;
  --step-4: clamp(1.75rem, 1.4rem + 1.6vw, 2.4rem);
  --step-5: clamp(2.1rem, 1.7rem + 2.2vw, 3rem);

  --lh-tight: 1.25;
  --lh-heading: 1.4;
  --lh-body: 1.72;

  /* --- Spacing --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* --- Shape --- */
  --radius-xs: 4px;
  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 16px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  --tap: 48px;
  --maxw: 72rem;

  /* --- Motion --- */
  --ease-spring: cubic-bezier(0.34, 1.3, 0.64, 1);
  --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-norm: 220ms;
  --duration-slow: 360ms;

  /* Background texture removed for a calmer page; kept as a hook. */
  --pattern-islamic: none;

  color-scheme: light;
}

/* --- Dark theme: deep green-black, same roles --- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand: #3fbf98;
    --brand-deep: #123a31;
    --gat-purple: #a99cf0;
    --gat-purple-soft: rgba(169, 156, 240, 0.14);
    --gat-deep: #2a2456;
    --saat-teal: #3fbf98;
    --saat-teal-soft: rgba(63, 191, 152, 0.14);
    --emerald-soft: rgba(63, 191, 152, 0.14);

    --paper: #0e1513;
    --paper-pattern: #111a17;
    --surface: #151e1b;
    --surface-2: #1c2724;
    --surface-3: #26332f;

    --ink: #eef3f1;
    --ink-secondary: #c3cdc9;
    --muted: #8d9a95;
    --muted-soft: #66736e;
    --line: #24302c;
    --line-strong: #33413c;

    --accent: #3fbf98;
    --accent-ink: #04231a;
    --accent-soft: rgba(63, 191, 152, 0.14);
    --accent-hover: #5fd3ae;

    --gold: #e3b84a;
    --gold-soft: rgba(227, 184, 74, 0.14);
    --saudi-gold-dark: #c99a2e;

    --ochre: #f0a94a;
    --ochre-soft: rgba(240, 169, 74, 0.14);

    --good: #4cc483;
    --good-soft: rgba(76, 196, 131, 0.14);
    --bad: #f07a70;
    --bad-soft: rgba(240, 122, 112, 0.14);
    --warn: #f0a94a;
    --warn-soft: rgba(240, 169, 74, 0.14);
    --info: #6ea8ec;
    --info-soft: rgba(110, 168, 236, 0.14);

    --glass-bg: rgba(21, 30, 27, 0.94);
    --glass-surface: #151e1b;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --brand: #3fbf98;
  --brand-deep: #123a31;
  --gat-purple: #a99cf0;
  --gat-purple-soft: rgba(169, 156, 240, 0.14);
  --gat-deep: #2a2456;
  --saat-teal: #3fbf98;
  --saat-teal-soft: rgba(63, 191, 152, 0.14);
  --emerald-soft: rgba(63, 191, 152, 0.14);

  --paper: #0e1513;
  --paper-pattern: #111a17;
  --surface: #151e1b;
  --surface-2: #1c2724;
  --surface-3: #26332f;

  --ink: #eef3f1;
  --ink-secondary: #c3cdc9;
  --muted: #8d9a95;
  --muted-soft: #66736e;
  --line: #24302c;
  --line-strong: #33413c;

  --accent: #3fbf98;
  --accent-ink: #04231a;
  --accent-soft: rgba(63, 191, 152, 0.14);
  --accent-hover: #5fd3ae;

  --gold: #e3b84a;
  --gold-soft: rgba(227, 184, 74, 0.14);
  --saudi-gold-dark: #c99a2e;

  --ochre: #f0a94a;
  --ochre-soft: rgba(240, 169, 74, 0.14);

  --good: #4cc483;
  --good-soft: rgba(76, 196, 131, 0.14);
  --bad: #f07a70;
  --bad-soft: rgba(240, 122, 112, 0.14);
  --warn: #f0a94a;
  --warn-soft: rgba(240, 169, 74, 0.14);
  --info: #6ea8ec;
  --info-soft: rgba(110, 168, 236, 0.14);

  --glass-bg: rgba(21, 30, 27, 0.94);
  --glass-surface: #151e1b;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);

  color-scheme: dark;
}

/* Numerals utilities: Eastern (٠١٢٣) vs Western (0123) */
.num-eastern {
  font-feature-settings: "numr" 1;
}
.num-western {
  font-feature-settings: "numr" 0, "latn" 1;
}