/* ══════════════════════════════════════════════════════════════════════════
   Resource Management — colour and type tokens (the one source of colour).
   Dark is the default; [data-theme=light] on <html> switches to light.
   Pages and modules use these variables only — no hex or rgba values elsewhere,
   except the neutral black used for shadows/overlays (--shadow, --overlay).
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  /* Base palette — dark */
  --bg:            #15171a;   /* page background */
  --surface:       #212429;   /* cards, panels, sidebar, header, modals */
  --surface-2:     #2a2e34;   /* inputs, hover rows, nested blocks */
  --surface-3:     #30353c;   /* pressed / selected rows */
  --border:        #353a41;
  --border-strong: #464c55;   /* input borders, focus-free separators */
  --text:          #eceef1;
  --text-2:        #a7adb6;   /* secondary text, labels */
  --text-3:        #939aa3;   /* hints, axis ticks, placeholders (≥ 4.5:1 on --surface-2) */
  --brand:         #2b7ea3;   /* petrol — buttons, active nav, links, focus */
  --brand-text:    #62a9c9;   /* petrol used as text on --surface (readable) */
  --brand-hover:   #25708f;   /* darker on hover so white text keeps ≥ 4.5:1 */
  --on-brand:      #ffffff;   /* text on --brand fills */
  --nav-active:    var(--table-head);   /* same petrol as the table header row */
  --on-nav-active: #ffffff;
  --nav-hover:     color-mix(in srgb, var(--nav-active) 45%, transparent);
  --table-head:    #1f5976;   /* table header row background */
  --on-table-head: #eceef1;
  --gold:          #b99a62;   /* indicators only (targets, markers, highlights) — never for large fills */
  --ok:            #5aa179;
  --warn:          #d2a85d;
  --danger:        #c96a63;
  /* Status colours used as small text (≥ 4.5:1 on --surface and on their tints) */
  --ok-text:       #6bb08a;
  --warn-text:     #d2a85d;
  --danger-text:   #e3938d;
  /* "Becomes free" highlight (Capacity Plan): a saturated green fill with white text (>= 4.5:1), and its ring */
  --fresh:         #16804a;
  --on-fresh:      #ffffff;
  --fresh-ring:    #3ccf82;

  /* Tints (backgrounds for pills, notes, selected states) */
  --brand-tint:  color-mix(in srgb, var(--brand) 16%, transparent);
  --gold-tint:   color-mix(in srgb, var(--gold) 16%, transparent);
  --ok-tint:     color-mix(in srgb, var(--ok) 16%, transparent);
  --warn-tint:   color-mix(in srgb, var(--warn) 16%, transparent);
  --danger-tint: color-mix(in srgb, var(--danger) 16%, transparent);
  --neutral-tint: color-mix(in srgb, var(--text-2) 14%, transparent);
  --serious:      color-mix(in srgb, var(--danger) 50%, var(--warn));   /* between warn and danger */
  --serious-text: color-mix(in srgb, var(--danger-text) 50%, var(--warn-text));   /* serious as small text */
  --serious-tint: color-mix(in srgb, var(--serious) 16%, transparent);

  --shadow:  0 1px 2px rgba(0,0,0,0.35);
  --shadow-pop: 0 12px 32px rgba(0,0,0,0.45);   /* menus, modals, toasts only */
  --overlay: rgba(0,0,0,0.55);                   /* modal / menu backdrop */
  --card-shadow: none;                           /* cards are flat in dark */

  /* Overview hero banner (imagery). It stays dark in both themes, like a photo does, so these are
     not redefined for light. Its text uses --on-hero* only (all >= 7:1 on --hero-ink). */
  --hero-ink:      #0d2531;   /* the dark petrol panel behind the greeting */
  --hero-petrol:   #1f5976;   /* translucent facets (same petrol as --table-head) */
  --hero-scrim:    rgba(9,28,38,0.86);   /* behind the date, over the bright sky of the photo */
  --hero-tag:      rgba(255,255,255,0.12);
  --hero-tag-line: rgba(255,255,255,0.28);
  --hero-shadow:   rgba(0,0,0,0.55);     /* text-shadow for legibility on imagery */
  --on-hero:       #ffffff;
  --on-hero-2:     #cddde6;   /* secondary text on the hero */
  --on-hero-3:     #a8c3d1;   /* tagline */
  /* Fallback illustration (used when img/hero.jpg is missing) */
  --hero-sky-1:    #102f40;   /* top of the sky */
  --hero-sky-2:    #2a6887;
  --hero-sky-3:    #86b9cf;   /* dusk band at the horizon */
  --hero-glow:     #b99a62;   /* low sun glow, lights (gold) */
  --hero-far:      #3f7c98;   /* far silhouettes */
  --hero-mid:      #123547;
  --hero-near:     #0a1d28;   /* nearest silhouettes and ground */
  --hero-steel:    #6fa6bf;   /* fine line details */

  /* Type */
  --font-sans: 'IBM Plex Sans Arabic', 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;   /* all numbers */

  /* Shape */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;

  /* ── Legacy names (older CSS still uses them) → mapped to the palette ── */
  --ink: var(--bg);        --ink2: var(--surface);   --ink3: var(--surface-2);  --ink4: var(--surface-3);
  --slate: var(--border);  --line: var(--border);    --line2: var(--border-strong);
  --white: var(--text);    --silver: var(--text-2);
  --teal: var(--brand);    --teal-l: var(--brand-text); --teal-bg: var(--brand-tint);
  --blue: var(--brand);    --blue-l: var(--brand-text); --blue-bg: var(--brand-tint);
  --gold-l: var(--gold);   --gold-bg: var(--gold-tint);
  --green: var(--ok);      --green-l: var(--ok-text);     --green-bg: var(--ok-tint);
  --amber: var(--warn);    --amber-l: var(--warn-text);   --amber-bg: var(--warn-tint);
  --red: var(--danger);    --red-l: var(--danger-text);   --red-bg: var(--danger-tint);
  --radius-xs: 3px; --radius-xl: var(--radius-lg);
  --shadow-card: var(--shadow); --shadow-hover: var(--shadow);
}

[data-theme=light] {
  --bg:            #f6f6f7;
  --surface:       #ffffff;
  --surface-2:     #f1f2f4;
  --surface-3:     #e8eaed;
  --border:        #e1e3e7;
  --border-strong: #cdd1d7;
  --text:          #1a1c1f;
  --text-2:        #555b64;
  --text-3:        #676d76;
  --brand:         #1f6c93;
  --brand-text:    #1f6c93;
  --brand-hover:   #195b7c;
  --on-brand:      #ffffff;
  --nav-active:    var(--table-head);   /* same petrol as the table header row */
  --on-nav-active: #ffffff;
  --nav-hover:     color-mix(in srgb, var(--nav-active) 14%, transparent);
  --table-head:    #1f5976;
  --on-table-head: #ffffff;
  --gold:          #9d7a4c;
  --ok:            #35785a;
  --warn:          #a97830;
  --danger:        #b95550;
  --ok-text:       #2e6b50;
  --warn-text:     #7f5719;
  --danger-text:   #963b37;
  --fresh:         #16804a;
  --on-fresh:      #ffffff;
  --fresh-ring:    #1f9d5c;

  --brand-tint:  color-mix(in srgb, var(--brand) 10%, transparent);
  --gold-tint:   color-mix(in srgb, var(--gold) 12%, transparent);
  --ok-tint:     color-mix(in srgb, var(--ok) 11%, transparent);
  --warn-tint:   color-mix(in srgb, var(--warn) 12%, transparent);
  --danger-tint: color-mix(in srgb, var(--danger) 10%, transparent);
  --neutral-tint: color-mix(in srgb, var(--text-2) 10%, transparent);
  --serious:      color-mix(in srgb, var(--danger) 50%, var(--warn));
  --serious-text: color-mix(in srgb, var(--danger-text) 50%, var(--warn-text));   /* serious as small text */
  --serious-tint: color-mix(in srgb, var(--serious) 11%, transparent);

  --shadow:  0 1px 2px rgba(0,0,0,0.05);
  --shadow-pop: 0 12px 32px rgba(0,0,0,0.14);
  --overlay: rgba(0,0,0,0.35);
  --card-shadow: var(--shadow);
}

/* Printing always uses the light palette (petrol table header kept). */
@media print {
  :root, [data-theme] {
    --bg:            #f6f6f7;
    --surface:       #ffffff;
    --surface-2:     #f1f2f4;
    --surface-3:     #e8eaed;
    --border:        #e1e3e7;
    --border-strong: #cdd1d7;
    --text:          #1a1c1f;
    --text-2:        #555b64;
    --text-3:        #676d76;
    --brand:         #1f6c93;
    --brand-text:    #1f6c93;
    --brand-hover:   #195b7c;
    --on-brand:      #ffffff;
  --nav-active:    var(--table-head);   /* same petrol as the table header row */
  --on-nav-active: #ffffff;
  --nav-hover:     color-mix(in srgb, var(--nav-active) 14%, transparent);
    --table-head:    #1f5976;
    --on-table-head: #ffffff;
    --gold:          #9d7a4c;
    --ok:            #35785a;
    --warn:          #a97830;
    --danger:        #b95550;
    --ok-text:       #2e6b50;
    --warn-text:     #7f5719;
    --danger-text:   #963b37;
    --fresh-ring:    #1f9d5c;
  
    --brand-tint:  color-mix(in srgb, var(--brand) 10%, transparent);
    --gold-tint:   color-mix(in srgb, var(--gold) 12%, transparent);
    --ok-tint:     color-mix(in srgb, var(--ok) 11%, transparent);
    --warn-tint:   color-mix(in srgb, var(--warn) 12%, transparent);
    --danger-tint: color-mix(in srgb, var(--danger) 10%, transparent);
    --neutral-tint: color-mix(in srgb, var(--text-2) 10%, transparent);
    --serious:      color-mix(in srgb, var(--danger) 50%, var(--warn));
    --serious-text: color-mix(in srgb, var(--danger-text) 50%, var(--warn-text));   /* serious as small text */
    --serious-tint: color-mix(in srgb, var(--serious) 11%, transparent);
  
    --shadow:  0 1px 2px rgba(0,0,0,0.05);
    --shadow-pop: 0 12px 32px rgba(0,0,0,0.14);
    --overlay: rgba(0,0,0,0.35);
    --card-shadow: var(--shadow);
  }
}