/* Design tokens — docs/05-design-system.md is the source. Change it there first.
 *
 * C4-10 refresh: a calm clinical palette built on the logo's green, with
 * hairline borders, layered soft shadows and a tinted "soft" step for every
 * status colour. Still no gradients (owner's rule). Every text/background pair
 * below is checked by tests/unit/contrast.test.mjs in both themes, so an edit
 * that breaks readability fails `npm run check`.
 */
:root {
  /* Chart series, fixed order. Validated for CVD and contrast against the
     light surface (dataviz six checks); the dark steps below are their own
     validated steps, not a flip. */
  --chart-1: #0E8A74; --chart-2: #A85A00; --chart-3: #3061D6; --chart-4: #AA2E8F; --chart-5: #5B6B0F;

  --lane-clinic: #13482C;
  --lane-pharmacy: #1F6FB2;
  --lane-nursing: #7A4EA8;
  --lane-health: #8A6A1E;
  --lane-reps: #4A5568;
  /* Console-only lanes, for the live monitor: money, support, the platform's
     own housekeeping. An icon and a word always sit beside the colour. */
  --lane-money: #8A6A1E;
  --lane-support: #A23B63;
  --lane-platform: #0E6F78;

  /* Surfaces: a faintly green canvas, white cards, one sunken step. */
  --bg: #F5F7F6;
  --surface: #FFFFFF;
  --surface-raised: #FFFFFF;
  --surface-sunken: #EEF2EF;
  --surface-hover: #F3F6F4;
  --border: #E1E8E3;
  --border-strong: #CBD6CF;

  --text: #0B1A12;
  --text-muted: #516358;
  --text-subtle: #617268;
  --text-inverse: #FFFFFF;

  /* Brand: the logo's green, one step darker for hover, one soft tint. */
  --brand: #13482C;
  --brand-hover: #0D3821;
  --brand-soft: #E6F0EA;
  --brand-text: #13482C;
  --accent: #C9A05A; /* decoration only: 2.4:1 on white */

  /* Status: a readable foreground and a soft background for each. */
  --success: #146C44;  --success-soft: #E3F2EA;
  --warning: #8F5A00;  --warning-soft: #FBF0DC;
  --danger: #B42318;   --danger-soft: #FCE8E6;
  --info: #1D5FA6;     --info-soft: #E6EFFA;
  --emergency: #D62828;
  --focus-ring: #1F6FB2;
  --focus-soft: rgba(31, 111, 178, .22);

  --overlay: rgba(9, 20, 14, .42);
  --glass: rgba(255, 255, 255, .78);

  --font-display: "Noto Kufi Arabic", "Noto Sans Arabic", system-ui, sans-serif;
  --font-body: "IBM Plex Sans Arabic", "IBM Plex Sans", "Noto Sans Arabic", system-ui, sans-serif;
  --font-data: "IBM Plex Sans", system-ui, sans-serif;

  --fs-display-l: 32px; --lh-display-l: 40px;
  --fs-title-l: 26px;   --lh-title-l: 34px;
  --fs-title-m: 18px;   --lh-title-m: 26px;
  --fs-body-l: 18px;    --lh-body-l: 28px;
  --fs-body-m: 16px;    --lh-body-m: 24px;
  --fs-label: 14px;     --lh-label: 20px;
  --fs-caption: 13px;   --lh-caption: 18px;

  --sp-1: 2px; --sp-2: 4px; --sp-3: 8px; --sp-4: 12px; --sp-5: 16px; --sp-6: 20px;
  --sp-7: 24px; --sp-8: 32px; --sp-9: 40px; --sp-10: 56px; --sp-11: 72px;

  --r-sm: 8px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-pill: 999px;

  /* Layered shadows: a contact shadow plus a soft ambient one. */
  --e-0: none;
  --e-1: 0 1px 2px rgba(12, 30, 20, .05), 0 1px 1px rgba(12, 30, 20, .03);
  --e-2: 0 6px 16px -4px rgba(12, 30, 20, .10), 0 2px 4px -2px rgba(12, 30, 20, .06);
  --e-3: 0 24px 48px -12px rgba(12, 30, 20, .22), 0 8px 16px -8px rgba(12, 30, 20, .10);

  --ease: cubic-bezier(.2, 0, 0, 1);
  --ease-slow: cubic-bezier(.16, 1, .3, 1);
  --m-instant: 100ms;
  --m-fast: 160ms;
  --m-base: 220ms;
  --m-slow: 380ms;

  --target: 48px;
  --control: 40px;      /* visual height of compact controls; hit area stays 48 */
  --nav-width: 264px;
  --nav-width-collapsed: 72px;
  --topbar: 64px;
  --content-max: 1440px;
  color-scheme: light;
}

[data-theme="dark"] {
  --chart-1: #2AA88F; --chart-2: #C58325; --chart-3: #5F89DC; --chart-4: #C95FA8; --chart-5: #8A9C38;

  --lane-clinic: #4FB07A;
  --lane-pharmacy: #57A8E6;
  --lane-nursing: #B48BDD;
  --lane-health: #E2B768;
  --lane-reps: #9AA5B5;
  --lane-money: #E2B768;
  --lane-support: #E58FB0;
  --lane-platform: #4FC3CC;

  --bg: #0A110D;
  --surface: #0F1813;
  --surface-raised: #142019;
  --surface-sunken: #08100C;
  --surface-hover: #15211A;
  --border: #1E2B24;
  --border-strong: #2B3B32;

  --text: #E8F0EA;
  --text-muted: #9FB2A6;
  --text-subtle: #84978B;
  --text-inverse: #06130C;

  --brand: #4FB07A;
  --brand-hover: #63C08B;
  --brand-soft: #122A1D;
  --brand-text: #6CC592;
  --accent: #E2B768;

  --success: #5CC994;  --success-soft: #0F2A1D;
  --warning: #E8B04F;  --warning-soft: #2E2210;
  --danger: #F28B7F;   --danger-soft: #331613;
  --info: #7DB5F0;     --info-soft: #102436;
  --emergency: #FF6B6B;
  --focus-ring: #8CC8FF;
  --focus-soft: rgba(140, 200, 255, .25);

  --overlay: rgba(2, 6, 4, .62);
  --glass: rgba(15, 24, 19, .78);

  /* In the dark, depth is a lighter surface plus a faint rim, not a shadow. */
  --e-1: 0 0 0 1px rgba(255, 255, 255, .02);
  --e-2: 0 8px 24px -6px rgba(0, 0, 0, .55);
  --e-3: 0 28px 56px -12px rgba(0, 0, 0, .7);
  color-scheme: dark;
}

/* Arabic and Kurdish need more leading (docs/05 §3). */
[dir="rtl"] {
  --lh-body-m: 26px;
  --lh-label: 22px;
  --lh-title-m: 28px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --m-instant: 0ms;
    --m-fast: 0ms;
    --m-base: 0ms;
    --m-slow: 100ms;
  }
}