/*
 * tokens.css v2 — Moonshot Clinic canonical design tokens (single source of truth)
 * ---------------------------------------------------------------------------
 * Spec: docs/design/DESIGN-SYSTEM-SPEC.md (section 1). Rendered: /shared/components.html
 *
 * THEME MODEL: class/attribute based — `body.theme-dark|light` or
 * `:root[data-theme="..."]`. dark is the default. NOT prefers-color-scheme
 * (tenant override needs a class model).
 *
 * TWO THEMES ONLY (2026-09-04): the two experimental extra themes are killed
 * (spec 10a). nav.js maps their saved values to `dark`, so nobody loses access.
 *
 * DELIVERY: injected from shared/api-config.js after PR-C (spec section 2). Until
 * then, new pages <link> it BEFORE their own <style>. Pages keep NO local theme
 * :root block.
 *
 * TENANT ACCENT: tenant-theme.js overrides --accent, --accent-contrast,
 * --brand-text, --accent-hover, --accent-bg at runtime. Components read only the
 * derived --accent-fill / --accent-ink / --accent-text / --accent-bg.
 *
 * CASCADE: everything here is inside @layer mc.tokens. Any unlayered rule (every
 * page's inline <style>, every existing /shared/*.css, nav.js's injected style)
 * beats it by definition. That is what makes global delivery safe. This file
 * carries ZERO importance flags: an important declaration REVERSES layer order,
 * which would let a token repaint a page that never asked for it.
 */
@layer mc.tokens, mc.components, mc.page;

@layer mc.tokens {

/* ===== theme-agnostic: type, scale, semantic, derived ===== */
:root {
  --font-body: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Oswald', var(--font-body);
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-heading: var(--font-display);

  /* type — nothing below --text-xs (11px). Operator-read VALUES (dose, result, date) use
     --text-sm (13px) or larger; --text-xs is for labels, badges and table meta only. */
  --text-xs: 11px;  --text-sm: 13px;  --text-base: 14px; --text-md: 16px;
  --text-lg: 18px;  --text-xl: 22px;  --text-2xl: 28px;  --text-3xl: 36px;

  /* weight: four steps. 750/800 retired. 700 only for .mc-label, th, titles, count badges. */
  --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700;
  /* line-height */
  --leading-none: 1; --leading-tight: 1.25; --leading-snug: 1.4; --leading-normal: 1.55; --leading-relaxed: 1.7;
  --tracking-label: 0.06em;

  /* radius: raw steps + roles. Ladder 12 card -> 8 control/nested -> 4 chip.
     Nested radius = max(outer - gap, --radius-sm). */
  --radius-sm: 4px; --radius: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-full: 999px;
  --radius-card: var(--radius-md); --radius-control: var(--radius); --radius-chip: var(--radius-sm);

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px;

  /* control heights. 28 (not 24) because nav.js applies zoom:0.9 on desktop; 28 renders 25.2. */
  --control-sm: 28px; --control-md: 36px; --control-lg: 44px;

  /* z scale — transcribed from shared/modal.js (pinned by modal-stacking.test.js) */
  --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-dropdown: 500; --z-header: 1000;
  --z-drawer: 1500; --z-modal: 2000; --z-modal-content: 9999; --z-toast: 10001;
  --z-support: 10500; --z-confirm: 11000; --z-system: 99999;

  /* Rendered height of the sticky staff header (#mc-nav). nav.js writes the
     live value on <html>; 0 on pages without the shared header. */
  --mc-header-h: 0px;

  /* shadow — per-theme --shadow-color below. Dark themes define edges with borders;
     shadows are for floating layers only. */
  --shadow-sm: 0 1px 3px var(--shadow-color);
  --shadow-md: 0 4px 16px var(--shadow-color);
  --shadow-lg: 0 8px 32px var(--shadow-color);
  --shadow-inset-top: inset 0 1px 0 rgba(255,255,255,0.04);

  /* motion */
  --duration-fast: 100ms; --duration-base: 150ms; --duration-slow: 250ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);

  /* icon (sprite /shared/icons.svg is a 24-grid, stroke 2, currentColor) */
  --icon-sm: 14px; --icon-md: 16px; --icon-lg: 20px; --icon-stroke: 2;

  /* focus ring — the ONE definition. Ring = accent, drawn 2px OUTSIDE the control, so the
     governing pair is ring-vs-page-bg (9.37 dark / 6.56 light), never ring-vs-fill.
     nav.js aliases --mc-focus-ring to this. */
  --focus-ring: var(--accent); --focus-width: 2px; --focus-offset: 2px;
  --mc-focus-ring: var(--focus-ring);

  /* derived accent — components read THESE, never --accent.
     --accent-fill : the accent as a fill, border or underline
     --accent-ink  : ink ON an accent fill (tenant-theme.js recomputes it per tenant)
     --accent-text : the accent as text on a page surface */
  --accent-fill: var(--accent);
  --accent-ink:  var(--accent-contrast);
  --accent-text: var(--accent);

  /* semantic status set — dark family. Light overrides below. Every pair verified >= 4.5:1
     on --bg, --bg-card, --bg-elevated and its own tint composited over all three, AND over a
     selected row (--accent-bg) on --bg-card and on --bg-elevated (Tom 2026-10-02 review:
     selected rows now carry --accent-bg, and a status badge sits inside them).
     Fills/icons >= 3:1. Never use --accent as a status.
     (--info-text gap closed 2026-09-04: see the --info line below.) */
  --danger: #ff6b6b;  --danger-text: #ff8787;  --danger-bg: rgba(255,107,107,0.09);
  /*                  ^ text was #ff6b6b: 4.34 on its tint in a selected row (2026-10-02).
                        Now 6.86 tint/bg / 4.57 tint in a selected row on --bg-elevated.
                        --danger (fill) and --on-danger unchanged. */
  --success: #51cf66; --success-text: #51cf66; --success-bg: rgba(81,207,102,0.12);
  --warning: #ffd43b; --warning-text: #ffd43b; --warning-bg: rgba(255,212,59,0.12);
  --info: #6e8efb;    --info-text: #9db4ff;    --info-bg: rgba(110,142,251,0.12);
  /*                  ^ text brightened from #6e8efb (4.01 on --info-bg over --bg-elevated), then
                        from #8aa6ff (4.27 on its tint in a selected row, 2026-10-02).
                        Now 8.80 bg / 6.03 tint over elevated / 4.95 tint in a selected row.
                        --info (fill) and --on-info unchanged. */
  --neutral: var(--text-secondary); --neutral-text: var(--text-secondary); --neutral-bg: var(--bg-hover);
  /* ink ON a saturated semantic fill (solid danger button, count badge). Never #fff on a fill. */
  --on-danger: #16202b;  /* 5.93 on #ff6b6b  */
  --on-success: #16202b; /* 8.21 on #51cf66  */
  --on-warning: #16202b; /* 11.55 on #ffd43b */
  --on-info: #16202b;    /* 6.21 on #6e8efb  */

  /* categorical (kind) hues — never used for status; max 4; no hue shared with red/green/amber/info.
     Dark text lightened 2026-10-02 (same hues): #a78bda / #7ea8d6 / #c4849a were 4.09 / 4.58 / 4.01
     on their own tint over --bg-elevated (the Queue lane label). Now >= 4.84 there, in a selected row. */
  --cat-1: #c2aeec; --cat-2: #3bc9db; --cat-3: #9dc1e6; --cat-4: #dcaabb;
  --cat-1-bg: rgba(167,139,218,0.14); --cat-2-bg: rgba(59,201,219,0.14);
  --cat-3-bg: rgba(126,168,214,0.14); --cat-4-bg: rgba(196,132,154,0.14);

  --overlay: rgba(0,0,0,0.55);
  --white: #ffffff;

  /* ===== legacy aliases — kept for one release =====
     Retirement list: docs/design/DESIGN-SYSTEM-SPEC.md section 1.3. Delete each
     line when `grep -rn 'var(--name)' public` is clean; a later PR does the
     retirement, this file only holds them. Each resolves to the active theme's
     value at use-time. */
  --border-color: var(--border);
  --text-primary: var(--text);
  --text-dim: var(--text-muted);
  --color-text-main: var(--text);
  --color-text-muted: var(--text-muted);
  --color-bg-body: var(--bg);
  --bg-page: var(--bg);
  --bg-secondary: var(--bg-card);
  --surface: var(--bg-card);
  --card-bg: var(--bg-card);
  --surface-hover: var(--bg-hover);
  --bg-card-hover: var(--bg-hover);
  --border-strong: var(--border-control);
  --border-hover: var(--border-control);
  --primary: var(--accent);
  --brand-primary: var(--accent);
  --error: var(--danger);
  --warn: var(--warning);
}

/* ===== THEME: dark (default) ===== */
:root, body.theme-dark, :root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #101921; --bg-subtle: rgba(187,180,190,0.02); --bg-card: rgba(187,180,190,0.04);
  --bg-input: rgba(187,180,190,0.05); --bg-hover: rgba(187,180,190,0.08);
  --bg-elevated: #1e2a36;                 /* OPAQUE popover/menu/dialog surface */
  /* surface de-emphasis overlays (elapsed time, closed hours on the calendar grid):
     darker on the dark theme, grayer on light - a bg-derived overlay vanishes on a white grid */
  --shade-elapsed: color-mix(in srgb, var(--bg) 55%, transparent);
  --shade-closed:  color-mix(in srgb, var(--bg) 45%, transparent);
  --text: #f0eee9; --text-secondary: #bbb4be;
  --text-muted: rgba(187,180,190,0.86);   /* was 0.4 (2.46:1), then 0.72 (4.48 on --bg-elevated,
                                             the dialog/menu surface), then 0.78 (4.22 in a selected row on
                                             --bg-elevated, 2026-10-02). Now 6.79 bg / 5.74 elevated / 4.77 there */
  --border: rgba(187,180,190,0.08);       /* decorative hairline only */
  --border-light: rgba(187,180,190,0.04);
  --border-control: rgba(187,180,190,0.50); /* 3.14:1 boundary for inputs/outlined buttons */
  --border-focus: var(--focus-ring);
  --accent: #b2bfbe; --accent-bg: rgba(178,191,190,0.1);
  --accent-contrast: #101921; --accent-hover: #9eabaa;   /* 9.37:1 ink on fill */
  --brand-text: var(--accent-contrast);
  --modal-bg: var(--bg-elevated);
  --shadow-color: rgba(0,0,0,0.3);
  --header-bg: linear-gradient(180deg, rgba(187,180,190,0.05) 0%, rgba(187,180,190,0.02) 100%);
  --sidebar-bg: rgba(187,180,190,0.02);
  --radial-1: rgba(187,180,190,0.03); --radial-2: rgba(187,180,190,0.025); --radial-3: rgba(187,180,190,0.02);
}

/* ===== THEME: light ===== */
body.theme-light, :root[data-theme="light"] {
  color-scheme: light;
  /* --bg-card is an OPAQUE white work surface on the cool page gray (Tom 2026-10-02 review: "gray
     panels inside gray panels flatten the hierarchy"). Was rgba(0,0,0,0.03), which stacked a
     darker gray each time a card sat in a card. --border carries the card edge; nested surfaces
     (--bg-subtle, --bg-input, --bg-hover) are still translucent and read as gray ON the white.
     Dark keeps its translucent card: the lift there comes from the lighter overlay. */
  --bg: #f4f5f7; --bg-subtle: rgba(0,0,0,0.02); --bg-card: #ffffff;
  --bg-input: rgba(0,0,0,0.04); --bg-hover: rgba(0,0,0,0.06);
  --bg-elevated: #ffffff;
  --shade-elapsed: color-mix(in srgb, var(--text) 9%, transparent);
  --shade-closed:  color-mix(in srgb, var(--text) 7%, transparent);
  --text: #1a1a2e; --text-secondary: #4b5563; --text-muted: #52606e;  /* 5.91 bg / 6.45 card */
  --border: rgba(0,0,0,0.1); --border-light: rgba(0,0,0,0.05);
  --border-control: rgba(0,0,0,0.42);     /* 3.00:1 */
  --border-focus: var(--focus-ring);
  --accent: #3a5a7c; --accent-bg: rgba(58,90,124,0.1);
  --accent-contrast: #ffffff; --accent-hover: #2e4a68; /* 7.16:1 ink on fill */
  --brand-text: var(--accent-contrast);
  --modal-bg: var(--bg-elevated);
  --shadow-color: rgba(0,0,0,0.1);
  --header-bg: linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(244,245,247,0.95) 100%);
  --sidebar-bg: rgba(0,0,0,0.02);
  --radial-1: rgba(0,0,0,0.02); --radial-2: rgba(0,0,0,0.015); --radial-3: rgba(0,0,0,0.01);
  /* semantic darkened for AA on a light bg */
  --danger: #dc2626;  --danger-text: #b91c1c;  --danger-bg: rgba(220,38,38,0.10);
  --success: #16a34a; --success-text: #166534; --success-bg: rgba(22,163,74,0.10);
  --warning: #a35c00; --warning-text: #845000; --warning-bg: rgba(163,92,0,0.10);
  /*        ^ was #d97706 (2.92 fill)   ^ was #b45309 (4.31 card / 4.16 tint)
              now 4.71 fill               now 6.15 bg / 5.76 card / 5.40 tint */
  --info: #2563eb;    --info-text: #1d4ed8;    --info-bg: rgba(37,99,235,0.10);
  --on-danger: #ffffff;  /* 4.83 on #dc2626 */
  --on-success: #052e16; /* 4.52 on #16a34a — white is only 3.30 */
  --on-warning: #ffffff; /* 5.14 on #a35c00 */
  --on-info: #ffffff;    /* 5.17 on #2563eb */
  --cat-1: #6f4fb8; --cat-2: #0a6676; --cat-3: #2b5f9e; --cat-4: #a0446a;  /* >= 4.5:1 on #f4f5f7 */
  /*                   ^ was #0b7285: 4.44 on its tint in a selected row (2026-10-02). Now 5.26.
     Every light text token >= 4.5:1 on --bg, the white card, and its tint inside a selected row. */
  --overlay: rgba(0,0,0,0.4);
}

/* ===== focus: the single rule (reaches chart because tokens.css does, nav.js does not) ===== */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: var(--focus-offset);
}
@media (forced-colors: active) {
  :focus-visible { outline: 2px solid CanvasText; outline-offset: 2px; }
}

/* ===== motion opt-out at the token layer (no per-page copies) ===== */
@media (prefers-reduced-motion: reduce) {
  :root { --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; }
}

} /* end @layer mc.tokens */