/* ==========================================================================
   I-Kare Design Tokens — v2
   Brand: Primary Blue #00AEEF · Primary Green #8BC53F
   Every colour is a token so light/dark mode is a single attribute swap.
   ========================================================================== */

:root {
  color-scheme: light;

  /* --- Brand ramp (blue) --- */
  --blue-50:  #e8f8fe;
  --blue-100: #c5edfc;
  --blue-200: #8fdefa;
  --blue-300: #4fcbf5;
  --blue-400: #1bbcf1;
  --blue-500: #00aeef;   /* brand */
  --blue-600: #0090c8;
  --blue-700: #0072a0;
  --blue-800: #005579;
  --blue-900: #003b54;

  /* --- Brand ramp (green) --- */
  --green-50:  #f2f9e8;
  --green-100: #e0f1c7;
  --green-200: #c8e69c;
  --green-300: #aed970;
  --green-400: #9bcf52;
  --green-500: #8bc53f;  /* brand */
  --green-600: #74a832;
  --green-700: #5c8527;
  --green-800: #45641d;

  /* --- Neutrals --- */
  --grey-0:   #ffffff;
  --grey-25:  #fcfdfe;
  --grey-50:  #f7f9fb;
  --grey-100: #eef2f6;
  --grey-200: #e3e8ef;
  --grey-300: #cdd5e0;
  --grey-400: #9aa7b8;
  --grey-500: #6b7a8f;
  --grey-600: #4d5a6c;
  --grey-700: #364152;
  --grey-800: #202939;
  --grey-900: #121926;
  --grey-950: #0b1017;

  /* --- Semantic --- */
  --red-50:   #fef2f2;  --red-100: #fee2e2;  --red-500: #dc2626;  --red-600: #b91c1c;  --red-700: #991b1b;
  --amber-50: #fffbeb;  --amber-100:#fef3c7; --amber-500:#f59e0b;  --amber-600:#d97706;  --amber-700:#b45309;
  --emerald-50:#ecfdf5; --emerald-100:#d1fae5;--emerald-500:#10b981;--emerald-600:#059669;--emerald-700:#047857;
  --violet-50:#f5f3ff;  --violet-100:#ede9fe; --violet-500:#8b5cf6; --violet-600:#7c3aed;

  /* --- Surfaces (light) --- */
  --bg:            var(--grey-50);
  --bg-elevated:   var(--grey-0);
  --surface:       var(--grey-0);
  --surface-2:     var(--grey-50);
  --surface-3:     var(--grey-100);
  --surface-hover: var(--grey-100);
  --sidebar-bg:    var(--grey-0);
  --overlay:       rgb(18 25 38 / 45%);

  /* --- Text --- */
  --text:          var(--grey-900);
  --text-secondary:var(--grey-600);
  --text-muted:    var(--grey-500);
  --text-inverse:  var(--grey-0);
  --text-brand:    var(--blue-700);

  /* --- Lines --- */
  --border:        var(--grey-200);
  --border-strong: var(--grey-300);
  --focus-ring:    var(--blue-500);

  /* --- Accents --- */
  --brand:         var(--blue-500);
  --brand-hover:   var(--blue-600);
  --brand-soft:    var(--blue-50);
  --brand-border:  var(--blue-200);
  --accent:        var(--green-500);
  --accent-hover:  var(--green-600);
  --accent-soft:   var(--green-50);
  --accent-border: var(--green-200);

  /* --- Status tones --- */
  --tone-ok-fg:      var(--emerald-700);  --tone-ok-bg:      var(--emerald-50);  --tone-ok-border:      var(--emerald-500);
  --tone-warn-fg:    var(--amber-700);    --tone-warn-bg:    var(--amber-50);    --tone-warn-border:    var(--amber-500);
  --tone-danger-fg:  var(--red-700);      --tone-danger-bg:  var(--red-50);      --tone-danger-border:  var(--red-500);
  --tone-info-fg:    var(--blue-700);     --tone-info-bg:    var(--blue-50);     --tone-info-border:    var(--blue-400);
  --tone-brand-fg:   var(--blue-700);     --tone-brand-bg:   var(--blue-50);     --tone-brand-border:   var(--blue-500);
  --tone-neutral-fg: var(--grey-700);     --tone-neutral-bg: var(--grey-100);    --tone-neutral-border: var(--grey-300);
  --tone-muted-fg:   var(--grey-500);     --tone-muted-bg:   var(--grey-50);     --tone-muted-border:   var(--grey-200);

  /* --- Typography --- */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "SF Mono", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;

  --text-2xs: 0.6875rem;  /* 11px */
  --text-xs:  0.75rem;    /* 12px */
  --text-sm:  0.8125rem;  /* 13px */
  --text-md:  0.875rem;   /* 14px */
  --text-base:0.9375rem;  /* 15px */
  --text-lg:  1.0625rem;  /* 17px */
  --text-xl:  1.25rem;    /* 20px */
  --text-2xl: 1.5rem;     /* 24px */
  --text-3xl: 1.875rem;   /* 30px */

  --leading-tight: 1.25;
  --leading-normal: 1.55;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --tracking-wide: 0.04em;
  --tracking-caps: 0.06em;

  /* --- Spacing (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;

  /* --- Radii --- */
  --radius-sm: 6px;
  --radius:    10px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* --- Elevation (soft, healthcare-appropriate) --- */
  --shadow-xs: 0 1px 2px rgb(16 24 40 / 5%);
  --shadow-sm: 0 1px 3px rgb(16 24 40 / 8%), 0 1px 2px rgb(16 24 40 / 4%);
  --shadow:    0 4px 8px -2px rgb(16 24 40 / 8%), 0 2px 4px -2px rgb(16 24 40 / 4%);
  --shadow-md: 0 12px 16px -4px rgb(16 24 40 / 8%), 0 4px 6px -2px rgb(16 24 40 / 3%);
  --shadow-lg: 0 20px 24px -4px rgb(16 24 40 / 10%), 0 8px 8px -4px rgb(16 24 40 / 4%);

  /* --- Motion --- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 120ms;
  --duration: 200ms;
  --duration-slow: 320ms;

  /* --- Layout --- */
  --sidebar-w: 252px;
  --sidebar-w-collapsed: 68px;
  --topbar-h: 60px;
  --content-max: 1600px;
  --z-sidebar: 20;
  --z-topbar: 30;
  --z-dropdown: 40;
  --z-modal: 50;
  --z-toast: 60;
}

/* ==========================================================================
   Dark mode — surfaces deepen, brand colours lighten to hold contrast
   ========================================================================== */

[data-theme="dark"] {
  color-scheme: dark;

  --bg:            var(--grey-950);
  --bg-elevated:   var(--grey-900);
  --surface:       var(--grey-900);
  --surface-2:     var(--grey-800);
  --surface-3:     #26303f;
  --surface-hover: var(--grey-800);
  --sidebar-bg:    #0e141d;
  --overlay:       rgb(0 0 0 / 65%);

  --text:          #e9eef5;
  --text-secondary:#a7b4c6;
  --text-muted:    #7d8b9e;
  --text-inverse:  var(--grey-900);
  --text-brand:    var(--blue-300);

  --border:        #26303f;
  --border-strong: #35414f;

  --brand:         var(--blue-400);
  --brand-hover:   var(--blue-300);
  --brand-soft:    rgb(0 174 239 / 14%);
  --brand-border:  rgb(0 174 239 / 38%);
  --accent:        var(--green-400);
  --accent-hover:  var(--green-300);
  --accent-soft:   rgb(139 197 63 / 14%);
  --accent-border: rgb(139 197 63 / 38%);

  --tone-ok-fg:      #6ee7b7;  --tone-ok-bg:      rgb(16 185 129 / 13%);  --tone-ok-border:      #10b981;
  --tone-warn-fg:    #fcd34d;  --tone-warn-bg:    rgb(245 158 11 / 13%);  --tone-warn-border:    #f59e0b;
  --tone-danger-fg:  #fca5a5;  --tone-danger-bg:  rgb(220 38 38 / 15%);   --tone-danger-border:  #ef4444;
  --tone-info-fg:    #7dd3fc;  --tone-info-bg:    rgb(0 174 239 / 13%);   --tone-info-border:    #38bdf8;
  --tone-brand-fg:   #7dd3fc;  --tone-brand-bg:   rgb(0 174 239 / 15%);   --tone-brand-border:   #00aeef;
  --tone-neutral-fg: #c3cddb;  --tone-neutral-bg: rgb(255 255 255 / 6%);  --tone-neutral-border: #35414f;
  --tone-muted-fg:   #8894a6;  --tone-muted-bg:   rgb(255 255 255 / 3%);  --tone-muted-border:   #26303f;

  --shadow-xs: 0 1px 2px rgb(0 0 0 / 40%);
  --shadow-sm: 0 1px 3px rgb(0 0 0 / 50%);
  --shadow:    0 4px 10px rgb(0 0 0 / 50%);
  --shadow-md: 0 12px 20px rgb(0 0 0 / 55%);
  --shadow-lg: 0 20px 30px rgb(0 0 0 / 60%);
}

/* Respect the OS preference until the user picks a side explicitly. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) { color-scheme: dark; }
}

/* Honour reduced-motion for every transition and animation. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   Refinements — 2.23
   Overrides only. Every name above keeps its meaning, so nothing
   that already consumes a token needs to change.
   ============================================================ */

:root {
  /* Elevation with a hint of the brand hue rather than neutral grey. A card
     lifted with pure black reads as a drop shadow from 2012; tinting it toward
     the surface underneath is what makes the lift look like light. */
  --shadow-xs: 0 1px 2px rgb(15 30 55 / 4%);
  --shadow-sm: 0 1px 2px rgb(15 30 55 / 6%), 0 2px 6px -1px rgb(15 30 55 / 5%);
  --shadow:    0 2px 4px -1px rgb(15 30 55 / 6%), 0 8px 16px -4px rgb(15 30 55 / 8%);
  --shadow-md: 0 4px 8px -2px rgb(15 30 55 / 6%), 0 16px 28px -8px rgb(15 30 55 / 10%);
  --shadow-lg: 0 8px 16px -4px rgb(15 30 55 / 8%), 0 28px 48px -12px rgb(15 30 55 / 14%);

  /* Slightly softer corners at the small end, rounder at the large — the
     difference between a form control and a surface should be legible. */
  --radius-sm: 6px;
  --radius:    9px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --radius-xl: 18px;

  /* Motion: quick enough to feel immediate, slow enough to be followed. */
  --duration-fast: 110ms;
  --duration: 180ms;
  --duration-slow: 280ms;
}

[data-theme="dark"] {
  /* Tuned for a long shift under clinic lighting.
     Pure black on a bright ward screen produces halation around white text and
     is tiring within an hour, so the darkest surface here is a deep blue-grey,
     not #000. Contrast between text and background still clears WCAG AA at
     every size used in the interface. */
  --bg:            #0d1219;
  --bg-elevated:   #141b24;
  --surface:       #141b24;
  --surface-2:     #1a232e;
  --surface-3:     #223040;
  --surface-hover: #1f2937;
  --sidebar-bg:    #0a0f16;

  --border:        #243040;
  --border-strong: #33445a;

  /* Text sits a little off pure white for the same reason. */
  --text:           #e8edf4;
  --text-secondary: #b6c2d1;
  --text-muted:     #8695a8;

  /* Shadow does almost nothing in the dark; separation comes from borders and
     a lighter surface, so the shadows here are restrained rather than heavy. */
  --shadow-xs: 0 1px 2px rgb(0 0 0 / 30%);
  --shadow-sm: 0 1px 3px rgb(0 0 0 / 36%);
  --shadow:    0 4px 12px rgb(0 0 0 / 40%);
  --shadow-md: 0 12px 24px rgb(0 0 0 / 45%);
  --shadow-lg: 0 24px 48px rgb(0 0 0 / 55%);
}

/* =========================================================================
   PAPER IS ALWAYS LIGHT.

   A doctor working the evening list in dark mode pressed Print and got a
   prescription on a near-black background. Two things combined to do that,
   and removing either one alone makes it worse rather than better:

     1. `[data-theme="dark"]` sets --bg/--surface to #0d1219 and --text to
        #e8edf4. Nothing reset those for print, so the document carried the
        screen's palette onto the page.
     2. base.css asks for `print-color-adjust: exact`, which tells the browser
        NOT to do its usual trick of dropping backgrounds when printing. That
        rule is right — without it the letterhead, the status tones and the
        flagged-result emphasis all vanish — but with a dark palette behind it
        it faithfully reproduces the dark.

   Dropping `exact` on its own would leave near-white text (#e8edf4) printing
   on white paper: invisible ink, which is worse than a black page because it
   looks like it worked. So the palette is what has to change. Every token the
   dark theme overrides is restored to its light value here, for print only.

   Declared LAST in this file on purpose: `:root` and `[data-theme="dark"]`
   have the same specificity, so source order is what decides, and this block
   has to come after the dark block to win.
   ====================================================================== */
@media print {
  :root,
  :root[data-theme="dark"],
  :root[data-theme="light"] {
    color-scheme: light;

    --bg:            #ffffff;
    --bg-elevated:   #ffffff;
    --surface:       #ffffff;
    --surface-2:     #ffffff;
    --surface-3:     var(--grey-100);
    --surface-hover: #ffffff;
    --sidebar-bg:    #ffffff;
    --overlay:       transparent;

    --text:           var(--grey-900);
    --text-secondary: var(--grey-700);
    --text-muted:     var(--grey-600);
    --text-inverse:   #ffffff;
    --text-brand:     var(--blue-700);

    --border:        var(--grey-300);
    --border-strong: var(--grey-400);

    --brand:         var(--blue-600);
    --brand-hover:   var(--blue-700);
    --brand-soft:    var(--blue-50);
    --brand-border:  var(--blue-200);
    --accent:        var(--green-600);
    --accent-hover:  var(--green-700);
    --accent-soft:   var(--green-50);
    --accent-border: var(--green-200);

    /*
       Tone backgrounds are printed as white rather than as their pale tints.
       An ink-saving printer renders a 5% tint as a grey wash that makes small
       type harder to read, and the border and the text colour already carry
       the meaning. The foregrounds are darkened one step so they hold up
       against white at 9pt.
    */
    --tone-ok-fg:      var(--emerald-700);  --tone-ok-bg:      #ffffff;  --tone-ok-border:      var(--emerald-600);
    --tone-warn-fg:    var(--amber-700);    --tone-warn-bg:    #ffffff;  --tone-warn-border:    var(--amber-600);
    --tone-danger-fg:  var(--red-700);      --tone-danger-bg:  #ffffff;  --tone-danger-border:  var(--red-600);
    --tone-info-fg:    var(--blue-700);     --tone-info-bg:    #ffffff;  --tone-info-border:    var(--blue-600);
    --tone-brand-fg:   var(--blue-700);     --tone-brand-bg:   #ffffff;  --tone-brand-border:   var(--blue-600);
    --tone-neutral-fg: var(--grey-800);     --tone-neutral-bg: #ffffff;  --tone-neutral-border: var(--grey-400);
    --tone-muted-fg:   var(--grey-600);     --tone-muted-bg:   #ffffff;  --tone-muted-border:   var(--grey-300);

    /* Shadows are an artefact of a screen. On paper they print as grey smears. */
    --shadow-xs: none; --shadow-sm: none; --shadow: none;
    --shadow-md: none; --shadow-lg: none;
  }

  /*
     Belt and braces for anything that took a colour from somewhere other than
     a token — an inline style, a third-party fragment, a rule written before
     the palette existed. The page itself is white and the default ink is
     black, whatever the screen was doing.
  */
  html, body { background: #ffffff !important; color: var(--grey-900) !important; }
}