/* ==========================================================================
   Blue Care Health OS — Design Tokens
   Colour is a safety channel, not decoration. See /DESIGN.md for rationale.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- Surfaces ---- */
  --surface: oklch(1.000 0.000 0);
  --canvas: oklch(0.975 0.004 250);
  --chrome: oklch(0.955 0.007 252);
  --chrome-strong: oklch(0.925 0.010 252);
  --border: oklch(0.884 0.006 252);
  --border-strong: oklch(0.78 0.008 252);
  --overlay: oklch(0.20 0.02 255 / 55%);

  /* ---- Ink ---- */
  --ink: oklch(0.24 0.020 255);
  --ink-secondary: oklch(0.42 0.020 255);
  --ink-muted: oklch(0.52 0.018 255);
  --ink-faint: oklch(0.62 0.014 255); /* decorative only — never text */
  --ink-on-brand: oklch(0.99 0.000 0);
  --ink-link: var(--brand);

  /* ---- Brand (deep structural blue) ----
     --brand is TEXT/icon/border use (links, active nav, active tab).
     --brand-fill is solid backgrounds carrying white text (buttons, the
     brand mark, active step dots). In light mode one value serves both;
     in dark mode they diverge — text needs to stay light against dark
     surfaces, but a fill behind white text needs to stay mid-tone, or
     white-on-brand drops to ~2.7:1. Verified via scripted WCAG check. */
  --brand: oklch(0.460 0.140 252);
  --brand-hover: oklch(0.400 0.140 252);
  --brand-active: oklch(0.360 0.135 252);
  --brand-fill: oklch(0.460 0.140 252);
  --brand-fill-hover: oklch(0.400 0.140 252);
  --brand-fill-active: oklch(0.360 0.135 252);
  --brand-subtle: oklch(0.940 0.030 252);
  --brand-subtle-strong: oklch(0.90 0.045 252);
  --brand-ring: oklch(0.700 0.140 252 / 45%);

  /* ---- Semantic (rationed — clinical meaning only) ---- */
  --critical: oklch(0.520 0.190 27);
  --critical-hover: oklch(0.460 0.190 27);
  --critical-subtle: oklch(0.960 0.030 27);
  --critical-ink: oklch(0.360 0.170 27);

  --caution: oklch(0.560 0.150 75);
  --caution-hover: oklch(0.500 0.150 75);
  --caution-subtle: oklch(0.960 0.050 75);
  --caution-ink: oklch(0.400 0.130 75);

  --positive: oklch(0.470 0.130 155);
  --positive-hover: oklch(0.410 0.130 155);
  --positive-subtle: oklch(0.955 0.035 155);
  --positive-ink: oklch(0.360 0.110 155);

  --info: oklch(0.480 0.130 240);
  --info-hover: oklch(0.420 0.130 240);
  --info-subtle: oklch(0.955 0.025 240);
  --info-ink: oklch(0.360 0.110 240);

  /* ---- Identity (MPI / Health ID states ONLY — never clinical) ---- */
  --identity: oklch(0.480 0.160 300);
  --identity-hover: oklch(0.420 0.160 300);
  --identity-subtle: oklch(0.960 0.030 300);
  --identity-ink: oklch(0.380 0.140 300);

  /* ---- Facility attribution (dot + chip only, never a border accent) ---- */
  --facility-1: oklch(0.50 0.13 252);   /* Princess Marina · Gaborone */
  --facility-1-subtle: oklch(0.945 0.025 252);
  --facility-2: oklch(0.48 0.10 175);   /* Nyangabgwe · Francistown */
  --facility-2-subtle: oklch(0.945 0.030 175);
  --facility-3: oklch(0.52 0.13 40);    /* reserve */
  --facility-3-subtle: oklch(0.955 0.035 40);

  /* ---- Type ---- */
  --font-sans: 'IBM Plex Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-serif: 'IBM Plex Serif', Georgia, serif;

  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.3125rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;

  --leading-tight: 1.25;
  --leading-normal: 1.5;

  /* ---- Space (4px base) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* ---- Radius ---- */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-full: 999px;

  /* ---- Shadow (used sparingly — flat instrument, not floaty cards) ---- */
  --shadow-sm: 0 1px 2px oklch(0.2 0.02 255 / 6%);
  --shadow-md: 0 4px 12px oklch(0.2 0.02 255 / 10%), 0 1px 3px oklch(0.2 0.02 255 / 8%);
  --shadow-lg: 0 12px 32px oklch(0.2 0.02 255 / 16%), 0 2px 6px oklch(0.2 0.02 255 / 8%);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --duration-slow: 250ms;
  --duration-deliberate: 420ms;

  /* ---- Z-index scale ---- */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-drawer: 300;
  --z-modal-backdrop: 400;
  --z-modal: 410;
  --z-toast: 500;
  --z-tooltip: 600;

  /* ---- Density ---- */
  --row-h: 44px;
  --control-h: 36px;
  --content-pad: var(--space-6);

  /* ---- Layout ---- */
  --shell-topbar-h: 56px;
  --shell-sidebar-w: 236px;
  --shell-sidebar-w-collapsed: 60px;
}

[data-density='compact'] {
  --row-h: 34px;
  --control-h: 30px;
  --content-pad: var(--space-4);
  --text-base: 0.8125rem;
}

/* ---- Dark theme (projector demos) ---- */
[data-theme='dark'] {
  color-scheme: dark;

  --surface: oklch(0.20 0.012 255);
  --canvas: oklch(0.15 0.010 255);
  --chrome: oklch(0.225 0.014 255);
  --chrome-strong: oklch(0.27 0.016 255);
  --border: oklch(0.32 0.014 255);
  --border-strong: oklch(0.40 0.016 255);
  --overlay: oklch(0.05 0.01 255 / 65%);

  --ink: oklch(0.94 0.006 255);
  --ink-secondary: oklch(0.82 0.010 255);
  --ink-muted: oklch(0.68 0.012 255);
  --ink-faint: oklch(0.52 0.012 255);
  --ink-on-brand: oklch(0.99 0.000 0);

  /* --brand stays light here (text/icon/border use against dark surfaces).
     --brand-fill is deliberately mid-tone, NOT the same value — a fill
     behind white button text needs 0.50/0.54/0.44, not 0.685/0.74/0.60;
     the lighter value measures ~2.7:1 for white text. Verified via
     scripted WCAG check. */
  --brand: oklch(0.685 0.140 252);
  --brand-hover: oklch(0.740 0.130 252);
  --brand-active: oklch(0.60 0.140 252);
  --brand-fill: oklch(0.50 0.140 252);
  --brand-fill-hover: oklch(0.54 0.140 252);
  --brand-fill-active: oklch(0.44 0.135 252);
  --brand-subtle: oklch(0.30 0.055 252);
  --brand-subtle-strong: oklch(0.35 0.07 252);
  --brand-ring: oklch(0.60 0.140 252 / 50%);

  --critical: oklch(0.660 0.180 27);
  --critical-hover: oklch(0.72 0.170 27);
  --critical-subtle: oklch(0.30 0.070 27);
  --critical-ink: oklch(0.86 0.090 27);

  --caution: oklch(0.72 0.150 75);
  --caution-hover: oklch(0.78 0.140 75);
  --caution-subtle: oklch(0.32 0.060 75);
  --caution-ink: oklch(0.86 0.090 75);

  --positive: oklch(0.640 0.140 155);
  --positive-hover: oklch(0.70 0.130 155);
  --positive-subtle: oklch(0.28 0.050 155);
  --positive-ink: oklch(0.84 0.090 155);

  --info: oklch(0.640 0.130 240);
  --info-hover: oklch(0.70 0.120 240);
  --info-subtle: oklch(0.28 0.045 240);
  --info-ink: oklch(0.84 0.080 240);

  --identity: oklch(0.660 0.150 300);
  --identity-hover: oklch(0.72 0.140 300);
  --identity-subtle: oklch(0.30 0.055 300);
  --identity-ink: oklch(0.86 0.080 300);

  --facility-1: oklch(0.66 0.120 252);
  --facility-1-subtle: oklch(0.28 0.045 252);
  --facility-2: oklch(0.66 0.100 175);
  --facility-2-subtle: oklch(0.28 0.045 175);
  --facility-3: oklch(0.68 0.120 40);
  --facility-3-subtle: oklch(0.30 0.050 40);

  --shadow-sm: 0 1px 2px oklch(0 0 0 / 30%);
  --shadow-md: 0 4px 12px oklch(0 0 0 / 40%), 0 1px 3px oklch(0 0 0 / 30%);
  --shadow-lg: 0 12px 32px oklch(0 0 0 / 50%), 0 2px 6px oklch(0 0 0 / 30%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --surface: oklch(0.20 0.012 255);
    --canvas: oklch(0.15 0.010 255);
    --chrome: oklch(0.225 0.014 255);
    --chrome-strong: oklch(0.27 0.016 255);
    --border: oklch(0.32 0.014 255);
    --border-strong: oklch(0.40 0.016 255);
    --overlay: oklch(0.05 0.01 255 / 65%);
    --ink: oklch(0.94 0.006 255);
    --ink-secondary: oklch(0.82 0.010 255);
    --ink-muted: oklch(0.68 0.012 255);
    --ink-faint: oklch(0.52 0.012 255);
    --brand: oklch(0.685 0.140 252);
    --brand-hover: oklch(0.740 0.130 252);
    --brand-active: oklch(0.60 0.140 252);
    --brand-fill: oklch(0.50 0.140 252);
    --brand-fill-hover: oklch(0.54 0.140 252);
    --brand-fill-active: oklch(0.44 0.135 252);
    --brand-subtle: oklch(0.30 0.055 252);
    --brand-subtle-strong: oklch(0.35 0.07 252);
    --critical: oklch(0.660 0.180 27);
    --critical-subtle: oklch(0.30 0.070 27);
    --critical-ink: oklch(0.86 0.090 27);
    --caution: oklch(0.72 0.150 75);
    --caution-subtle: oklch(0.32 0.060 75);
    --caution-ink: oklch(0.86 0.090 75);
    --positive: oklch(0.640 0.140 155);
    --positive-subtle: oklch(0.28 0.050 155);
    --positive-ink: oklch(0.84 0.090 155);
    --info: oklch(0.640 0.130 240);
    --info-subtle: oklch(0.28 0.045 240);
    --info-ink: oklch(0.84 0.080 240);
    --identity: oklch(0.660 0.150 300);
    --identity-subtle: oklch(0.30 0.055 300);
    --identity-ink: oklch(0.86 0.080 300);
    --facility-1: oklch(0.66 0.120 252);
    --facility-1-subtle: oklch(0.28 0.045 252);
    --facility-2: oklch(0.66 0.100 175);
    --facility-2-subtle: oklch(0.28 0.045 175);
    --facility-3: oklch(0.68 0.120 40);
    --facility-3-subtle: oklch(0.30 0.050 40);
  }
}