/* ============================================================================
   AL-MANARA — one theme system for the whole connected app
   ----------------------------------------------------------------------------
   Load this FIRST in every surface (shell + every module iframe + the portal),
   before styles-compiled.css / light-mode.css / any inline <style>.

   THE SYSTEM  (agreed with Manar, from the Doctor-Registry reference)
   - Neutrals: clean cool grey — light from the reference mock, dark from its
     dark variant. This is the ground everything sits on.
   - BLUE  = the interface colour: links, active nav / tab, selected row,
     focus ring, "info", secondary actions.  ("this does a job")
   - GOLD  = Al-Manara the brand: the ONE primary button per screen, the
     wordmark / logo, a hero KPI, the active rail marker.  ("this is us")
   - Status colours (green / amber / red) are for status ONLY.

   HOW THE SWITCH WORKS
   - Tokens live on `body`, so a body-level `.light-mode` class flips the whole
     set. `.light-mode` is the existing mechanism the shell already propagates
     to every iframe — kept on purpose.
   - theme.js resolves the user's choice (auto / light / dark) and toggles
     `body.light-mode` + `html.mn-light`; no CSS media query here, so the theme
     is one deterministic source of truth across every iframe.

   USING THE TOKENS  (never write a hex in a component again)
     background: var(--surface);
     color: var(--ink-dim);
     border: 1px solid var(--rule);
     primary button ....... background: var(--gold);  color: var(--on-gold);
     link / active / info .. color: var(--blue);
   ============================================================================ */

/* ---- DARK (the app's primary skin — deep, calm navy; not a glowing blue) - */
body {
  --bg:          #0f131b;   /* app ground — very dark, a whisper of navy */
  --bg-2:        #0b0e15;   /* deeper wells, page edges, the nav rail */
  --surface:     #171c26;   /* cards, panels, header, modals — muted blue-charcoal */
  --surface-2:   #1f2530;   /* inset fields, table head, hover rows, avatars */
  --rule:        #2a3140;   /* borders, dividers */
  --overlay:     rgba(4,6,10,.66);   /* modal scrim */

  --ink:         #e7eaf0;   /* primary text + headings */
  --ink-dim:     #98a1b2;   /* body copy, secondary */
  --ink-faint:   #69717f;   /* captions, uppercase table heads, placeholders */
  --on-gold:     #1c1403;   /* text on a gold fill */
  --on-blue:     #ffffff;   /* text on a blue fill */

  --blue:        #5b90e6;   /* INTERFACE: links, active nav/tab, selected row, focus, info */
  --blue-strong: #7aa6ee;   /* hover on a blue link */
  --blue-wash:   rgba(91,144,230,.14);   /* info fill, selected row, pill bg */

  --gold:        #daa520;   /* BRAND: the one primary button, wordmark, hero KPI, active rail */
  --gold-soft:   #e8c56a;   /* gradient top / hover lift */
  --gold-deep:   #b8860b;   /* gradient base / pressed */
  --gold-ink:    #e2b64a;   /* gold used AS TEXT on a dark surface */
  --gold-wash:   rgba(218,165,32,.13);   /* brand highlight fill, glow */

  --purple:      #a78bfa;   /* the house / practice tag (from the mock) */
  --purple-wash: rgba(139,92,246,.16);

  --green:       #45c47d;   /* enabled / paid / active */
  --green-wash:  rgba(69,196,125,.15);
  --amber:       #e0a53a;   /* on hold / needs attention */
  --amber-wash:  rgba(224,165,58,.15);
  --red:         #ec6a5f;   /* overdue / delete / error */
  --red-wash:    rgba(236,106,95,.15);

  --shadow-sm:   0 1px 2px rgba(2,6,18,.5);
  --shadow:      0 1px 2px rgba(2,6,18,.45), 0 16px 40px -22px rgba(2,6,18,.75);
  --shadow-lg:   0 24px 70px -20px rgba(2,6,18,.78);

  --radius:      12px;
  --radius-sm:   8px;
  --radius-lg:   18px;

  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-sans:    "Inter", "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", "Cascadia Code", "Consolas", monospace;
}

/* ---- LIGHT  (from the reference mock — clean cool grey) -----------------
   Two selectors on purpose:
   - `html.mn-light body`  — set synchronously by the tiny <head> snippet, so
     tokens are right on the very first paint (no flash).
   - `body.light-mode`     — the class the shell toggles on itself and on every
     iframe; also what light-mode.css's existing overrides key off.
   theme.js keeps the two in sync.                                          */
html.mn-light body,
body.light-mode {
  --bg:          #e8ecf3;   /* the cool, airy ground — a touch deeper so white cards lift off it */
  --bg-2:        #dde3ee;
  --surface:     #ffffff;   /* cards, table, search, header */
  --surface-2:   #eef1f7;   /* inset fields, table head, hover rows, avatars */
  --rule:        #dfe4ec;   /* borders, row dividers */
  --overlay:     rgba(20,25,35,.4);

  --ink:         #1c2534;   /* headings — slate near-black */
  --ink-dim:     #64748b;   /* body / secondary — slate-500 */
  --ink-faint:   #94a3b8;   /* uppercase table heads, placeholders — slate-400 */
  --on-gold:     #1c1403;
  --on-blue:     #ffffff;

  --blue:        #2563eb;   /* the mock's blue — links, active, info */
  --blue-strong: #1d4ed8;
  --blue-wash:   #e9f0fe;

  --gold:        #c8901a;   /* BRAND primary-button fill on light — vivid, dark text on top */
  --gold-soft:   #e0ad3c;
  --gold-deep:   #a0700f;
  --gold-ink:    #8a5e0c;   /* gold as TEXT on light — deep, ~5:1 */
  --gold-wash:   rgba(200,144,26,.12);

  --purple:      #6d28d9;
  --purple-wash: #ede9fe;

  --green:       #15803d;
  --green-wash:  #dcfce7;
  --amber:       #b07914;
  --amber-wash:  #fef1d6;
  --red:         #c0453a;
  --red-wash:    #fde8e6;

  --shadow-sm:   0 1px 2px rgba(20,25,35,.05), 0 1px 3px rgba(20,25,35,.09);
  --shadow:      0 1px 2px rgba(20,25,35,.05), 0 14px 34px -20px rgba(20,25,35,.18);
  --shadow-lg:   0 24px 60px -18px rgba(20,25,35,.22);
}

/* ---- cross-fade on switch (added to <html> for ~380ms by theme.js) ------- */
html.theme-anim,
html.theme-anim body,
html.theme-anim body * {
  transition: background-color .34s ease, color .34s ease,
              border-color .34s ease, box-shadow .34s ease,
              fill .34s ease, stroke .34s ease !important;
}
@media (prefers-reduced-motion: reduce) {
  html.theme-anim, html.theme-anim body, html.theme-anim body * { transition: none !important; }
}

/* ---- a couple of primitives every surface can lean on ------------------- */
.mn-focus:focus-visible,
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 3px;
}
::selection { background: var(--blue-wash); color: var(--ink); }