/*
  MASAR 360 — Design System v2 — Foundations
  Brand ramp sourced from the shipped logo / P20.3 login identity
  (teal #0bcfae -> sky #0a84c9 -> navy #0b3e8c), extended into a full
  token set. Categorical/sequential/diverging/status colors were
  computed and validated with the dataviz skill's palette validator
  (light + dark run separately against their own surfaces) — not
  eyeballed. Do not hand-edit a color without re-running the validator.

  Arabic type: self-hosted IBM Plex Sans Arabic (SIL OFL), not left to
  OS/browser fallback. Verified via fc-match against this project's own
  screenshot-rendering environment that none of "Segoe UI"/"Tahoma"/
  "IBM Plex Sans Arabic" are actually installed there, and its only
  fonts with real Arabic glyph coverage are FreeMono/FreeSerif — a
  monospace/serif fallback for a cursive script, which is what produced
  the "fragmented/thin/prototype-like" Arabic rendering. Self-hosting
  makes rendering correct and consistent everywhere, not just wherever
  the visitor's OS happens to have a decent Arabic font.
*/
@font-face{
  font-family:"IBM Plex Sans Arabic"; font-style:normal; font-weight:400; font-display:swap;
  src:url("fonts/arabic-400.woff2") format("woff2");
  unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFC,U+200C-200E;
}
@font-face{
  font-family:"IBM Plex Sans Arabic"; font-style:normal; font-weight:400; font-display:swap;
  src:url("fonts/latin-400.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122;
}
@font-face{
  font-family:"IBM Plex Sans Arabic"; font-style:normal; font-weight:500; font-display:swap;
  src:url("fonts/arabic-500.woff2") format("woff2");
  unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFC,U+200C-200E;
}
@font-face{
  font-family:"IBM Plex Sans Arabic"; font-style:normal; font-weight:500; font-display:swap;
  src:url("fonts/latin-500.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122;
}
@font-face{
  font-family:"IBM Plex Sans Arabic"; font-style:normal; font-weight:600; font-display:swap;
  src:url("fonts/arabic-600.woff2") format("woff2");
  unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFC,U+200C-200E;
}
@font-face{
  font-family:"IBM Plex Sans Arabic"; font-style:normal; font-weight:600; font-display:swap;
  src:url("fonts/latin-600.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122;
}
@font-face{
  font-family:"IBM Plex Sans Arabic"; font-style:normal; font-weight:700; font-display:swap;
  src:url("fonts/arabic-700.woff2") format("woff2");
  unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFC,U+200C-200E;
}
@font-face{
  font-family:"IBM Plex Sans Arabic"; font-style:normal; font-weight:700; font-display:swap;
  src:url("fonts/latin-700.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122;
}
:root{
  /* ---- brand primitives (source of truth, real logo ramp) ---- */
  --brand-teal:#0bcfae;
  --brand-sky:#0a84c9;
  --brand-navy:#0b3e8c;
  --brand-ink:#061b33;
  --brand-paper:#f7fafc;
  --brand-amber:#f2a93b;

  /* ---- neutral ramp (surfaces, borders, muted text) ---- */
  --neutral-0:#ffffff;
  --neutral-50:#f7fafc;
  --neutral-100:#eef3f7;
  --neutral-200:#dfe7ee;
  --neutral-300:#c7d3dd;
  --neutral-400:#9fb0bf;
  --neutral-500:#748999;
  --neutral-600:#526779;
  --neutral-700:#374a5c;
  --neutral-800:#213244;
  --neutral-900:#0f1c2c;
  --neutral-950:#061b33;

  /* ---- semantic surface/text/border tokens (light) ---- */
  --surface-page:#f4f7fa;
  --surface-1:#ffffff;
  --surface-2:#f7fafc;
  --surface-raised:#ffffff;
  --surface-sunken:#eef3f7;
  --surface-overlay:rgba(6,27,51,.48);
  --text-primary:#0f1c2c;
  --text-secondary:#4c5d6e;
  --text-muted:#57707f;
  --text-on-brand:#ffffff;
  --text-on-amber:#3a2405;
  --border-hairline:rgba(15,28,44,.10);
  --border-strong:rgba(15,28,44,.18);
  --focus-ring:0 0 0 3px rgba(10,132,201,.32);
  --focus-ring-amber:0 0 0 3px rgba(242,169,59,.38);

  /* ---- brand roles (light) ---- */
  --brand-primary:var(--brand-sky);
  --brand-primary-strong:var(--brand-navy);
  --brand-primary-soft:#e7f2fb;
  --brand-accent:var(--brand-amber);
  --brand-accent-soft:#fdf1de;
  --brand-gradient:linear-gradient(120deg,var(--brand-teal),var(--brand-sky) 62%,var(--brand-navy));

  /* ---- status (fixed, never themed, distinct from categorical) ---- */
  --status-good:#0ca30c;
  --status-good-soft:#e5f6e5;
  --status-warning:#c9860f;
  --status-warning-soft:#fdf0d8;
  --status-serious:#c05a30;
  --status-serious-soft:#fbe8dd;
  --status-critical:#b52a2a;
  --status-critical-soft:#fbe4e4;

  /* ---- categorical chart palette (light) — validated, fixed order ---- */
  --series-1:#0a84c9; /* brand sky */
  --series-2:#0bcfae; /* brand teal */
  --series-3:#eda100; /* yellow */
  --series-4:#008300; /* green */
  --series-5:#4a3aa7; /* violet */
  --series-6:#e34948; /* red */
  --series-7:#e87ba4; /* magenta */
  --series-8:#eb6834; /* orange */

  /* ---- sequential (single-hue, brand-family) ---- */
  --seq-100:#cde2fb; --seq-150:#b7d3f6; --seq-200:#9ec5f4; --seq-250:#86b6ef;
  --seq-300:#6da7ec; --seq-350:#5598e7; --seq-400:#3987e5; --seq-450:#2a78d6;
  --seq-500:#256abf; --seq-550:#1c5cab; --seq-600:#184f95; --seq-650:#104281; --seq-700:#0d366b;

  /* ---- diverging (blue <-> red, neutral midpoint) ---- */
  --div-cool-3:#0d366b; --div-cool-2:#256abf; --div-cool-1:#86b6ef;
  --div-mid:#f0efec;
  --div-warm-1:#f0a3a2; --div-warm-2:#e34948; --div-warm-3:#8f1f1f;

  /* ---- chart chrome ---- */
  --chart-surface:#ffffff;
  --chart-plane:#f7fafc;
  --chart-ink:#0f1c2c;
  --chart-ink-secondary:#4c5d6e;
  --chart-ink-muted:#8b98a3;
  --chart-gridline:#e7edf2;
  --chart-baseline:#c7d3dd;

  /* ---- spacing scale (4px base) ---- */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-7:32px; --space-8:40px; --space-9:48px; --space-10:64px;

  /* ---- radius scale ---- */
  --radius-sm:6px; --radius-md:10px; --radius-lg:14px; --radius-xl:20px; --radius-pill:999px;

  /* ---- shadows ---- */
  --shadow-sm:0 1px 2px rgba(15,28,44,.06);
  --shadow-md:0 4px 12px rgba(15,28,44,.08);
  --shadow-lg:0 12px 32px rgba(15,28,44,.14);
  --shadow-focus-ring:var(--focus-ring);

  /* ---- typography ----
     Weights capped at 700 (IBM Plex Sans Arabic has no 800/900 cut).
     Sizes/weights match the requested Arabic-first enterprise scale. */
  --font-ui:"IBM Plex Sans Arabic","Noto Sans Arabic","Segoe UI","Tahoma",system-ui,-apple-system,sans-serif;
  --fs-display:36px; --lh-display:1.25; --fw-display:700;
  --fs-page-title:30px; --lh-page-title:1.3; --fw-page-title:700;
  --fs-section:20px; --lh-section:1.4; --fw-section:700;
  --fs-card-heading:16px; --lh-card-heading:1.4; --fw-card-heading:600;
  --fs-body:15px; --lh-body:1.6; --fw-body:400;
  --fs-label:13.5px; --lh-label:1.4; --fw-label:600;
  --fs-caption:13px; --lh-caption:1.4; --fw-caption:500;
  --fs-helper:12.5px; --lh-helper:1.5; --fw-helper:400;
  --fs-kpi:34px; --lh-kpi:1.2; --fw-kpi:700;

  /* ---- motion system ----
     Premium/enterprise feel: transform+opacity only, no layout-heavy
     animation, no bounce. Named by intent, not just duration. */
  --ease-standard:cubic-bezier(.2,.7,.3,1);
  --ease-emphasis:cubic-bezier(.16,1,.3,1);
  --duration-instant:0ms;
  --duration-fast:120ms; --duration-base:200ms; --duration-slow:320ms;
  --duration-enter:360ms; --duration-exit:180ms; --duration-emphasis:560ms;
  --stagger-step:45ms;
  --motion-enter-y:10px;

  /* ---- z-index layers ---- */
  --z-nav:100; --z-topbar:110; --z-mobile-nav:200; --z-dropdown:300;
  --z-tooltip:400; --z-modal-backdrop:500; --z-modal:510; --z-toast:600; --z-ai-bubble:650;

  /* ---- breakpoints (reference only, JS/media queries use literals) ---- */
  --bp-xs:360px; --bp-sm:390px; --bp-md:430px; --bp-tablet:768px; --bp-laptop:1024px; --bp-desktop:1366px; --bp-wide:1920px;
}

/* Owner Console dark-mode pass (2026-08-21) found --brand-primary/
   --brand-primary-strong were never redefined here -- only --brand-primary-soft
   was -- so anything keyed to the "strong" role (e.g. ds/components.css's
   .ds-tab.is-active) rendered literal --brand-navy (#0b3e8c) as foreground
   text against a dark surface: near-invisible dark-on-dark. Fixed at the
   token level since this affects every consumer of these two roles across
   the whole app, not just Owner Console. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --surface-page:#0b1420; --surface-1:#101c2b; --surface-2:#0d1826;
    --surface-raised:#142131; --surface-sunken:#0b1420; --surface-overlay:rgba(2,10,20,.62);
    --text-primary:#eef3f7; --text-secondary:#aebccb; --text-muted:#7c8fa1;
    --border-hairline:rgba(238,243,247,.10); --border-strong:rgba(238,243,247,.18);
    --brand-primary:#3aa6e8; --brand-primary-strong:#4fb4f0;
    --brand-primary-soft:#122a3f; --brand-accent:#f2b957; --brand-accent-soft:#3a2c14;
    --text-on-amber:#241601;

    --status-good:#39c239; --status-good-soft:#0e2a12;
    --status-warning:#e7ab35; --status-warning-soft:#332405;
    --status-serious:#e58a5e; --status-serious-soft:#33200f;
    --status-critical:#e6706f; --status-critical-soft:#361212;

    --series-1:#2b8fce; --series-2:#12a48d; --series-3:#c98500; --series-4:#008300;
    --series-5:#9085e9; --series-6:#e66767; --series-7:#d55181; --series-8:#d95926;

    --chart-surface:#101c2b; --chart-plane:#0b1420; --chart-ink:#eef3f7;
    --chart-ink-secondary:#aebccb; --chart-ink-muted:#7c8fa1;
    --chart-gridline:#22344a; --chart-baseline:#33475f;

    --shadow-sm:0 1px 2px rgba(0,0,0,.32);
    --shadow-md:0 4px 14px rgba(0,0,0,.38);
    --shadow-lg:0 16px 40px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  --surface-page:#0b1420; --surface-1:#101c2b; --surface-2:#0d1826;
  --surface-raised:#142131; --surface-sunken:#0b1420; --surface-overlay:rgba(2,10,20,.62);
  --text-primary:#eef3f7; --text-secondary:#aebccb; --text-muted:#7c8fa1;
  --border-hairline:rgba(238,243,247,.10); --border-strong:rgba(238,243,247,.18);
  --brand-primary:#3aa6e8; --brand-primary-strong:#4fb4f0;
  --brand-primary-soft:#122a3f; --brand-accent:#f2b957; --brand-accent-soft:#3a2c14;
  --text-on-amber:#241601;

  --status-good:#39c239; --status-good-soft:#0e2a12;
  --status-warning:#e7ab35; --status-warning-soft:#332405;
  --status-serious:#e58a5e; --status-serious-soft:#33200f;
  --status-critical:#e6706f; --status-critical-soft:#361212;

  --series-1:#2b8fce; --series-2:#12a48d; --series-3:#c98500; --series-4:#008300;
  --series-5:#9085e9; --series-6:#e66767; --series-7:#d55181; --series-8:#d95926;

  --chart-surface:#101c2b; --chart-plane:#0b1420; --chart-ink:#eef3f7;
  --chart-ink-secondary:#aebccb; --chart-ink-muted:#7c8fa1;
  --chart-gridline:#22344a; --chart-baseline:#33475f;

  --shadow-sm:0 1px 2px rgba(0,0,0,.32);
  --shadow-md:0 4px 14px rgba(0,0,0,.38);
  --shadow-lg:0 16px 40px rgba(0,0,0,.5);
}
:root[data-theme="light"]{ color-scheme:light; }
:root[data-theme="dark"]{ color-scheme:dark; }

@media (prefers-reduced-motion: reduce){
  :root{
    --duration-fast:0ms; --duration-base:0ms; --duration-slow:0ms;
    --duration-enter:0ms; --duration-exit:0ms; --duration-emphasis:0ms; --stagger-step:0ms;
    --motion-enter-y:0px;
  }
}

/* ---- domain visual signatures (subtle accent only — never full recolor) ---- */
:root{
  --domain-hr:var(--brand-sky);
  --domain-fleet:var(--brand-navy);
  --domain-alerts:var(--status-critical);
  --domain-finance:#0f7a4a;
  --domain-operations:var(--brand-teal);
  --domain-documents:#8a6d1f;
  --domain-owner:var(--brand-ink);
}