/* ═══════════════════════════════════════════════════════════════════════════
 * Mosaper.Clinic — Unified Design System
 * The single source of truth for all design tokens. Component CSS reads
 * from semantic tokens; legacy --shell-* and --enc-* names are kept as
 * aliases at the bottom so existing styles keep working.
 *
 * Layers (cascade order):
 *   1. Foundation — primitives (color ramps, type scale, sizes, motion)
 *   2. Semantic   — purpose-bound (--bg, --surface, --text-primary, etc.)
 *   3. Aliases    — legacy --shell-* / --enc-* mapped to semantic
 *
 * Theming: [data-app-theme="dark"] on <html> or <body>.
 * RTL:     [dir="rtl"].
 * ═══════════════════════════════════════════════════════════════════════════
 */

/* ─── 1. Foundation — primitives ────────────────────────────────────────── */
:root {
    /* ── Type families ──
       Inter: humanist sans used for both body and display (Latin) — Clinical
       Precision uses a single family across all roles, no separate display face.
       Tajawal / Cairo: Arabic display + body
       JetBrains Mono: clinical numerics / IDs / dates */
    --font-display:        "Inter", "Tajawal", "Cairo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-body:           "Inter", "Cairo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-arabic-display: "Tajawal", "Cairo", "Inter", sans-serif;
    --font-mono:           "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* ── Type scale ── */
    --text-2xs: 11px;
    --text-xs:  12px;
    --text-sm:  13px;
    --text-base: 14px;
    --text-md:  15px;
    --text-lg:  17px;
    --text-xl:  20px;
    --text-2xl: 24px;
    --text-3xl: 30px;
    --text-4xl: 38px;
    --text-5xl: 48px;
    --text-6xl: 60px;

    --leading-tight:  1.15;
    --leading-snug:   1.35;
    --leading-normal: 1.5;
    --leading-loose:  1.7;

    --tracking-tighter: -0.03em;
    --tracking-tight:   -0.02em;
    --tracking-snug:    -0.01em;
    --tracking-normal:  0;
    --tracking-wide:     0.04em;
    --tracking-widest:   0.08em;

    --weight-regular: 400;
    --weight-medium:  500;
    --weight-semi:    600;
    --weight-bold:    700;

    /* Clinical Precision data-mono spec (Stitch: 13px/400/18px line-height) */
    --text-mono:    13px;
    --leading-mono: 18px;

    /* ── Spacing scale ── */
    --space-0:   0;
    --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;
    --space-11: 80px;
    --space-12: 96px;

    /* ── Radii — Clinical Precision's tight "soft" shape scale:
       buttons/inputs land on --radius-sm (4px), cards/containers on
       --radius-lg (8px), dialogs on --radius-xl (12px). ── */
    --radius-xs:   2px;
    --radius-sm:   4px;
    --radius-md:   6px;
    --radius-lg:   8px;
    --radius-xl:  12px;
    --radius-2xl: 16px;
    --radius-pill: 999px;

    /* ── Borders ── */
    --hairline: 1px;

    /* ── Motion ── */
    --duration-instant: 80ms;
    --duration-fast:    150ms;
    --duration-normal:  220ms;
    --duration-slow:    320ms;

    --ease-standard: cubic-bezier(0.2, 0.0, 0.2, 1);
    --ease-decel:    cubic-bezier(0.0, 0.0, 0.2, 1);
    --ease-accel:    cubic-bezier(0.4, 0.0, 1, 1);
    --ease-spring:   cubic-bezier(0.5, 1.6, 0.4, 1);

    /* ── Z-index ── */
    --z-base:    0;
    --z-raised:  10;
    --z-sticky:  100;
    --z-drawer:  200;
    --z-overlay: 400;
    --z-modal:   500;
    --z-toast:   700;
    --z-tooltip: 800;

    /* ── Color ramps (oklch) ──
       Clinical Precision (Google Stitch design system). Values below are
       computed via real sRGB→OKLCH conversion from the Stitch hex palette
       (not hand-approximated) so design-system.css and MosaperTheme.cs
       derive from the same source numbers — see MosaperTheme.cs header. */

    /* Neutral — cool blue-gray (hue 250), matching Stitch's on-surface/
       outline neutrals. Replaces the previous warm (hue 80) ramp. */
    --neutral-h: 250;
    --neutral-0:   oklch(1     0     0);
    --neutral-50:  oklch(0.985 0.007 var(--neutral-h));
    --neutral-100: oklch(0.965 0.009 var(--neutral-h));
    --neutral-150: oklch(0.945 0.011 var(--neutral-h));
    --neutral-200: oklch(0.920 0.013 var(--neutral-h));
    --neutral-300: oklch(0.860 0.015 var(--neutral-h));
    --neutral-400: oklch(0.720 0.018 var(--neutral-h));
    --neutral-500: oklch(0.580 0.020 var(--neutral-h));
    --neutral-600: oklch(0.460 0.022 var(--neutral-h));
    --neutral-700: oklch(0.350 0.022 var(--neutral-h));
    --neutral-800: oklch(0.250 0.018 var(--neutral-h));
    --neutral-900: oklch(0.180 0.013 var(--neutral-h));
    --neutral-950: oklch(0.130 0.011 var(--neutral-h));

    /* Brand — Clinical Blue. --brand-600 is calibrated to Stitch's
       `primary` #003c90 exactly; hue 259 (was 215) is a real shift from
       teal-blue to true navy blue. */
    --brand-h: 259;
    --brand-50:  oklch(0.966 0.023 var(--brand-h));
    --brand-100: oklch(0.931 0.046 var(--brand-h));
    --brand-200: oklch(0.862 0.078 var(--brand-h));
    --brand-300: oklch(0.748 0.111 var(--brand-h));
    --brand-400: oklch(0.610 0.130 var(--brand-h));
    --brand-500: oklch(0.472 0.143 var(--brand-h));
    --brand-600: oklch(0.381 0.150 var(--brand-h));
    --brand-700: oklch(0.314 0.137 var(--brand-h));
    --brand-800: oklch(0.248 0.117 var(--brand-h));
    --brand-900: oklch(0.182 0.098 var(--brand-h));

    /* Accent — Slate, retired from the previous editorial gold. Calibrated
       to Stitch's `tertiary` #324257 at --accent-700 (sparing icon/text use). */
    --accent-h: 255;
    --accent-100: oklch(0.937 0.016 var(--accent-h));
    --accent-300: oklch(0.775 0.042 var(--accent-h));
    --accent-500: oklch(0.600 0.048 var(--accent-h));
    --accent-700: oklch(0.374 0.042 var(--accent-h));

    /* Semantic ramps — success (green) is calibrated to Stitch's
       "Calming Teal" secondary #006a63 at --green-700; hue 187 (was 155)
       shifts from spring-green toward teal. */
    --green-100: oklch(0.952 0.030 187);
    --green-300: oklch(0.789 0.075 187);
    --green-500: oklch(0.635 0.097 187);
    --green-700: oklch(0.472 0.082 187);

    /* Warning (amber) calibrated to Stitch's narrative Amber #F59E0B at --amber-700. */
    --amber-100: oklch(0.979 0.063 70);
    --amber-300: oklch(0.918 0.152 70);
    --amber-500: oklch(0.856 0.190 70);
    --amber-700: oklch(0.769 0.165 70);

    /* Danger (red) calibrated to Stitch's narrative Critical Red #E11D48
       at --red-700 (used over the muted strict-M3 error token — matches
       this app's real allergy/alert alert use case). */
    --red-100: oklch(0.962 0.056 18);
    --red-300: oklch(0.834 0.180 18);
    --red-500: oklch(0.699 0.250 18);
    --red-700: oklch(0.586 0.222 18);

    /* Info (blue) — no Stitch equivalent, left unchanged; stays visibly
       distinct from the new brand hue (245 vs 259). */
    --blue-100: oklch(0.95 0.03 245);
    --blue-300: oklch(0.78 0.10 245);
    --blue-500: oklch(0.60 0.13 245);
    --blue-700: oklch(0.43 0.12 245);
}

/* ─── 2. Semantic — light theme (default) ──────────────────────────────── */
:root,
:root[data-app-theme="light"],
html[data-app-theme="light"],
body[data-app-theme="light"] {
    --bg:              var(--neutral-50);
    --bg-subtle:       var(--neutral-100);
    --surface:         var(--neutral-0);
    --surface-raised:  var(--neutral-0);
    --surface-sunken:  var(--neutral-100);
    --surface-overlay: var(--neutral-0);

    --text-primary:   var(--neutral-900);
    --text-secondary: var(--neutral-600);
    --text-tertiary:  var(--neutral-500);
    --text-disabled:  var(--neutral-400);
    --text-inverse:   var(--neutral-0);
    --text-on-brand:  var(--neutral-0);

    --border:        var(--neutral-200);
    --border-subtle: var(--neutral-150);
    --border-strong: var(--neutral-300);
    --border-focus:  var(--brand-500);

    --brand:            var(--brand-600);
    --brand-hover:      var(--brand-700);
    --brand-active:     var(--brand-800);
    --brand-soft:       var(--brand-100);
    --brand-soft-hover: var(--brand-200);
    --brand-fg:         var(--neutral-0);

    --success:        var(--green-700);
    --success-strong: var(--green-500);
    --success-soft:   var(--green-100);
    --warning:        var(--amber-700);
    --warning-strong: var(--amber-500);
    --warning-soft:   var(--amber-100);
    --danger:         var(--red-700);
    --danger-strong:  var(--red-500);
    --danger-soft:    var(--red-100);
    --info:           var(--blue-700);
    --info-strong:    var(--blue-500);
    --info-soft:      var(--blue-100);

    --hover-bg:    rgba(15, 23, 42, 0.04);
    --pressed-bg:  rgba(15, 23, 42, 0.07);
    --selection-bg: var(--brand-100);
    --focus-ring:  0 0 0 3px color-mix(in oklch, var(--brand-500) 25%, transparent);

    /* Tight, subtle elevation. Card shadow (xs) is brand-blue-tinted per
       Stitch's Level-1 spec (rgba 15,82,186 = Stitch's own primary-container
       hex); xl is tightened to Stitch's Level-2 modal spec. */
    --shadow-xs: 0 2px 4px rgba(15, 82, 186, 0.05);
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.04);
    --shadow-lg: 0 12px 28px rgba(15, 23, 42, 0.10), 0 4px 8px rgba(15, 23, 42, 0.04);
    --shadow-xl: 0 10px 25px rgba(0, 0, 0, 0.10);

    color-scheme: light;
}

/* ─── Dark theme ────────────────────────────────────────────────────────── */
:root[data-app-theme="dark"],
html[data-app-theme="dark"],
body[data-app-theme="dark"],
[data-theme="dark"] {
    --bg:              var(--neutral-950);
    --bg-subtle:       var(--neutral-900);
    --surface:         var(--neutral-900);
    --surface-raised:  var(--neutral-800);
    --surface-sunken:  var(--neutral-950);
    --surface-overlay: var(--neutral-800);

    --text-primary:   var(--neutral-50);
    --text-secondary: var(--neutral-300);
    --text-tertiary:  var(--neutral-400);
    --text-disabled:  var(--neutral-500);
    --text-inverse:   var(--neutral-950);
    --text-on-brand:  var(--neutral-50);

    --border:        var(--neutral-800);
    --border-subtle: var(--neutral-900);
    --border-strong: var(--neutral-700);
    --border-focus:  var(--brand-400);

    --brand:            var(--brand-400);
    --brand-hover:      var(--brand-300);
    --brand-active:     var(--brand-200);
    --brand-soft:       oklch(0.30 0.05 var(--brand-h));
    --brand-soft-hover: oklch(0.35 0.06 var(--brand-h));
    --brand-fg:         var(--neutral-950);

    --success:        var(--green-300);
    --success-strong: var(--green-300);
    --success-soft:   oklch(0.28 0.04 187);
    --warning:        var(--amber-300);
    --warning-strong: var(--amber-300);
    --warning-soft:   oklch(0.30 0.05 70);
    --danger:         var(--red-300);
    --danger-strong:  var(--red-300);
    --danger-soft:    oklch(0.30 0.05 18);
    --info:           var(--blue-300);
    --info-strong:    var(--blue-300);
    --info-soft:      oklch(0.28 0.04 245);

    --hover-bg:     rgba(255, 255, 255, 0.05);
    --pressed-bg:   rgba(255, 255, 255, 0.08);
    --selection-bg: var(--brand-soft);
    --focus-ring:   0 0 0 3px color-mix(in oklch, var(--brand-400) 30%, transparent);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.40), 0 1px 2px rgba(0, 0, 0, 0.30);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.50), 0 1px 3px rgba(0, 0, 0, 0.30);
    --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.55), 0 4px 8px rgba(0, 0, 0, 0.30);
    --shadow-xl: 0 24px 56px rgba(0, 0, 0, 0.60), 0 8px 16px rgba(0, 0, 0, 0.30);

    color-scheme: dark;
}

/* ─── 3. Aliases — legacy --shell-* namespace ──────────────────────────── */
:root {
    --shell-bg:                   var(--bg);
    --shell-bg-strong:            var(--bg-subtle);
    --shell-surface:              var(--surface);
    --shell-surface-strong:       var(--surface);
    --shell-border:               var(--border);
    --shell-shadow:               var(--shadow-sm);
    --shell-primary:              var(--text-secondary);
    --shell-primary-soft:         var(--text-tertiary);
    --shell-primary-strong:       var(--text-primary);
    --shell-text:                 var(--text-primary);
    --shell-muted:                var(--text-tertiary);

    --shell-brand:                var(--brand);
    --shell-brand-soft:           var(--brand-400);
    --shell-brand-weak:           var(--brand-soft);
    --shell-brand-hover:          var(--brand-hover);

    --shell-color-success:        var(--success-strong);
    --shell-color-warning:        var(--warning-strong);
    --shell-color-danger:         var(--danger-strong);
    --shell-color-info:           var(--info-strong);
    --shell-color-success-bg:     var(--success-soft);
    --shell-color-warning-bg:     var(--warning-soft);
    --shell-color-danger-bg:      var(--danger-soft);
    --shell-color-info-bg:        var(--info-soft);
    --shell-color-unread-bg:      var(--info-soft);

    --shell-chrome-bg:            var(--bg-subtle);
    --shell-chrome-bg-strong:     var(--surface);
    --shell-chrome-surface:       var(--surface);
    --shell-chrome-border:        var(--border);
    --shell-chrome-text:          var(--text-primary);
    --shell-chrome-text-muted:    var(--text-secondary);
    --shell-chrome-accent:        var(--hover-bg);
    --shell-chrome-accent-strong: var(--pressed-bg);
    --shell-chrome-avatar:        var(--surface-sunken);

    /* Hero — solid (no gradients) */
    --shell-hero-bg:              var(--bg-subtle);
    --shell-hero-text:            var(--text-primary);
    --shell-hero-subtle:          var(--text-secondary);
    --shell-hero-input:           var(--surface);
    --shell-hero-input-text:      var(--text-primary);
    --shell-hero-input-muted:     var(--text-secondary);
}

/* ─── Aliases — legacy --enc-* namespace ───────────────────────────────── */
:root {
    --enc-font-sans:     var(--font-body);
    --enc-font-mono:     var(--font-mono);

    --enc-brand-h:       var(--brand-h);
    --enc-brand:         var(--brand);
    --enc-brand-weak:    var(--brand-soft);
    --enc-brand-hover:   var(--brand-hover);
    --enc-brand-fg:      var(--brand-fg);

    --enc-ok:            var(--success);
    --enc-ok-weak:       var(--success-soft);
    --enc-warn:          var(--warning);
    --enc-warn-weak:     var(--warning-soft);
    --enc-danger:        var(--danger);
    --enc-danger-weak:   var(--danger-soft);
    --enc-info:          var(--info);
    --enc-info-weak:     var(--info-soft);

    --enc-bg:            var(--bg);
    --enc-surface:       var(--surface);
    --enc-surface-2:     var(--bg-subtle);
    --enc-surface-3:     var(--surface-sunken);
    --enc-border:        var(--border);
    --enc-border-strong: var(--border-strong);
    --enc-border-subtle: var(--border-subtle);

    --enc-fg:            var(--text-primary);
    --enc-fg-2:          var(--text-secondary);
    --enc-fg-3:          var(--text-tertiary);
    --enc-fg-4:          var(--text-disabled);

    --enc-r-sm:          var(--radius-xs);
    --enc-r:             var(--radius-sm);
    --enc-r-md:          var(--radius-md);
    --enc-r-lg:          var(--radius-md);
    --enc-r-xl:          var(--radius-lg);

    --enc-shadow-1:      var(--shadow-xs);
    --enc-shadow-2:      var(--shadow-sm);
    --enc-shadow-pop:    var(--shadow-lg);

    --enc-row-h:     32px;
    --enc-control-h: 30px;
    --enc-gap:       10px;
    --enc-pad:       14px;
}

/* Density modes (encounter) */
[data-density="compact"] {
    --enc-row-h:     28px;
    --enc-control-h: 26px;
    --enc-gap:        8px;
    --enc-pad:       10px;
}
[data-density="comfy"] {
    --enc-row-h:     36px;
    --enc-control-h: 34px;
    --enc-gap:       12px;
    --enc-pad:       18px;
}

/* ─── Base typography ──────────────────────────────────────────────────── */
html {
    font-size: 16px;
    text-rendering: optimizeLegibility;
    /* `antialiased` forces grayscale AA and thins every glyph; on a standard
       (non-Retina) Windows display that reads as blurry/washed-out text.
       `auto` lets Chromium pick subpixel AA where it's sharper. */
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
}

html, body {
    margin: 0;
    min-height: 100%;
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--text-primary);
    background: var(--bg);
    font-feature-settings: "cv11", "ss01", "ss03", "tnum" off;
}

/* Display type — used on h1/h2 + utility class */
h1, h2, .ds-display {
    font-family: var(--font-display);
    font-weight: var(--weight-semi);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
}

[lang="ar"] h1, [lang="ar"] h2,
[dir="rtl"] h1, [dir="rtl"] h2,
[lang="ar"] .ds-display, [dir="rtl"] .ds-display {
    font-family: var(--font-arabic-display);
    letter-spacing: 0;
}

.ds-mono, code, kbd, samp, pre {
    font-family: var(--font-mono);
    font-size: var(--text-mono);
    line-height: var(--leading-mono);
    font-feature-settings: "tnum", "zero", "ss01";
}

/* Tabular numerics for data displays */
.ds-tabular {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* Selection */
::selection {
    background: var(--selection-bg);
    color: var(--text-primary);
}

/* Focus */
:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
}