/*
  Moeen teacher design tokens — brand palette approved by the product owner:
  one brand color (#2e7a93), black / dark grey, white, and neutral greys.
  Red is reserved for alerts and recitation errors only.
  Tints of the brand color are used for soft backgrounds; no other hues.
*/
:root {
  /* Surfaces */
  --bg: #eef0f1;
  --surface: #ffffff;
  --surface-2: #f5f6f7;
  --surface-3: #e7eaec;
  --scrim: rgba(20, 23, 25, .42);

  /* Ink (black and dark greys) */
  --ink: #1a3640;           /* brand charcoal (brand sheet) */
  --ink-2: #3d4347;
  --muted: #7b8287;
  --line: #e3e6e8;
  --line-2: #d0d5d8;
  --on-ink: #ffffff;

  /* Brand */
  --brand: #2e7a93;
  --accent: #2e7a93;
  --accent-2: #5d9cb2;
  --accent-soft: #e3eff3;
  --accent-ink: #235d71;
  --lime: #8a9398;          /* third circle colour: neutral grey (review 5 removed the green) */
  --lime-soft: #eef0f1;
  --brand-lime: #b1eb51;    /* brand lime (brand sheet): accents only */
  --brand-dark: #165b62;    /* wordmark teal */
  --f-brand: "Aref Ruqaa", var(--f-display);

  /* Semantic, mapped onto the approved palette */
  --ok: var(--accent);           /* done, present, mastered */
  --ok-soft: var(--accent-soft);
  --warn: var(--ink-2);          /* needs attention (not an alert) */
  --warn-soft: var(--surface-3);
  --info: var(--accent);
  --info-soft: var(--accent-soft);
  --gold: var(--ink);            /* official approvals: solid black */
  --gold-soft: var(--surface-3);
  --bad: #d23c32;                /* alerts and errors only */
  --bad-soft: #fbe5e3;
  --warm: #c98a12;               /* pending / waiting notes */
  --warm-soft: #fff8eb;
  --warm-line: #efe6cf;
  --green-soft: #e3eff3;
  --green-line: #b6d3dd;
  --card-shadow: none;
  --on-lime: #1a3640;            /* text on brand lime: always dark, in both themes */

  /* Patterns (secondary data series) */
  --hatch: repeating-linear-gradient(135deg, var(--line-2) 0 3px, transparent 3px 7px);
  --hatch-accent: repeating-linear-gradient(135deg, var(--accent) 0 4px, var(--accent-2) 4px 8px);

  /* Type */
  --f-ui: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --f-display: "Readex Pro", "IBM Plex Sans Arabic", Tahoma, sans-serif;
  --f-quran: "Amiri Quran", "Amiri", "Traditional Arabic", serif;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 15px;
  --fs-lg: 17px;
  --fs-xl: 21px;
  --fs-2xl: 28px;
  --fs-3xl: 36px;

  /* Shape */
  --r-xl: 26px;
  --r-lg: 18px;
  --r-md: 14px;
  --r-sm: 10px;
  --r-pill: 999px;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px;

  --shadow-pop: 0 20px 48px -16px rgba(20, 23, 25, .30), 0 2px 6px rgba(20, 23, 25, .06);

  --rail-w: 248px;
  --rail-w-min: 84px;
  --row-h: 52px;
  color-scheme: light;
}

/*
  Dark theme: same brand, re-layered for low light.
  Depth comes from stepped surfaces (bg < surface < surface-2 < surface-3) and hairline borders,
  not shadows. Text is off-white, never pure white; the brand teal is lifted so it reads on black.
*/
:root[data-theme="dark"] {
  /* Slate dark: page #13282f, cards in the brand charcoal, controls one step lighter */
  --bg: #13282f;
  --surface: #1a3640;
  --surface-2: #21414c;
  --surface-3: #284a55;
  --scrim: rgba(10, 13, 15, .62);
  --ink: #f3f5f6;
  --ink-2: #cdd4d8;
  --muted: #9ca6ac;
  --line: #2a4752;
  --line-2: #365864;
  --on-ink: #13282f;
  --brand: #2e7a93;
  --accent: #3687a3;
  --accent-2: #2e7a93;
  --accent-soft: rgba(70, 160, 190, .16);
  --accent-ink: #9fd3e5;
  --lime: #6a7578;
  --lime-soft: #21414c;
  --brand-dark: #6fb3c4;
  --warn-soft: #284a55;
  --gold-soft: #284a55;
  --bad: #f0675c;
  --bad-soft: rgba(240, 103, 92, .13);
  --warm: #e2ad4f;
  --warm-soft: rgba(226, 173, 79, .1);
  --warm-line: rgba(226, 173, 79, .28);
  --green-soft: rgba(46, 122, 147, .12);
  --green-line: rgba(46, 122, 147, .32);
  --card-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
  --hatch: repeating-linear-gradient(135deg, #355762 0 3px, transparent 3px 7px);
  --shadow-pop: 0 24px 60px -18px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .05);
  color-scheme: dark;
}

:root[data-density="compact"] { --row-h: 42px; }