/* ResQ OS design tokens, v2 (Joe, Nov 8; spec: docs/design-system.md).
   Shared by the ResQ OS shell, every module and other ResQWare apps' staff
   screens (the Helpdesk console copies this file). Served at /ui/tokens.css.
   Change colors here, never in a module stylesheet.

   The same --os-* names as v1, so every module and Collab follow; v2 changed
   the values and added a few tokens (marked NEW).

   Light is the default (data-theme="light"), dark is each person's choice.
   Foundation: Joe's palette (primary #2563EB, text #0F172A, canvas #F8FAFC,
   border #E2E8F0, surface #FFFFFF) on a slate neutral scale. Color carries
   meaning: blue for the one main action, links and focus; status colors for
   status; the ResQ orange (--os-brand) as a small brand accent: the dock and
   Home tile, the active tab marker, record avatars and brand icons. */

/* ---------- Light (default) ---------- */
:root:not([data-theme=dark]) {
  /* Surfaces, back to front */
  --os-ground: #F8FAFC;          /* canvas: the page */
  --os-card: #FFFFFF;            /* surface: cards, tables, menus */
  --os-soft: #F1F5F9;            /* secondary surface: tab tracks, table heads, wells */
  --os-raised: #FFFFFF;          /* elevated surface: menus, dialogs (with shadow) */
  --os-hover: #F1F5F9;           /* row and ghost-button hover */
  --os-line: #E2E8F0;            /* border: cards, dividers */
  --os-line-strong: #CBD5E1;     /* inputs, outline buttons */
  /* Text */
  --os-ink: #0F172A;             /* primary text (17.9:1 on white) */
  --os-ink-2: #334155;           /* body text in long rows (10.4:1) */
  --os-muted: #475569;           /* secondary text, labels (7.6:1) */
  --os-subtle: #5E6E82;          /* NEW: metadata, timestamps, ids (5.2:1 on white, 4.8:1 on soft) */
  /* Primary accent */
  --os-accent: #2563EB;          /* text, links, active markers (5.2:1) */
  --os-accent-bg: #2563EB;       /* filled primary button (white text 5.2:1) */
  --os-accent-bg-hover: #1D4ED8;
  --os-accent-soft: #EFF6FF;     /* selected rows, active tab tint */
  --os-focus: rgba(37, 99, 235, 0.35);  /* NEW: 3px focus ring */
  --os-link: #2563EB;
  /* Brand accent: the ResQ orange, for brand moments only (never buttons, links or status) */
  --os-brand: #C8381E;           /* marks, active markers, brand icons (5.2:1 on white) */
  --os-brand-soft: #FFF1EC;      /* avatar and icon-container fill (brand ink 4.7:1 on it) */
  /* Status pairs (background / text) */
  --os-live-bg: #ECFDF3;    --os-live-ink: #067647;     /* success, active, connected-ok */
  --os-partial-bg: #FFFAEB; --os-partial-ink: #93370D;  /* warning, pending */
  --os-gap-bg: #FEF3F2;     --os-gap-ink: #B42318;      /* error, overdue, failed */
  --os-info-bg: #EFF6FF;    --os-info-ink: #1D4ED8;     /* informational, connected */
  --os-ext-bg: #F1F5F9;     --os-ext-ink: #475569;      /* neutral, inactive, external */
  /* Dock and brand mark (the ResQ orange stays the brand, not the UI accent) */
  --os-dock: #0F172A;
  --os-dock-line: #1E293B;
  --os-tile: #1E293B;
  --os-tile-ink: #CBD5E1;
  --os-navy: #0F172A;
  --os-chart-2: #64748B;
  --os-violet: #7C3AED;          /* data-only accent (e.g. "edited" in approval bars) */
  /* Categorical chart series, in fixed order (validated with the dataviz checks, Nov 8).
     Slots 4 and 5 sit under 3:1 on white: charts using them show labels or a legend. */
  --os-chart-1: #2a78d6;         /* blue: "met", first series */
  --os-chart-3: #eb6834;         /* orange: "short", second series */
  --os-chart-4: #1baf7a;         /* aqua */
  --os-chart-5: #eda100;         /* yellow */
  /* Sequential blue ramp, light to dark (heatmaps; validated with the dataviz checks).
     --os-seq-ink-lo is the text on steps 1–3, --os-seq-ink-hi on steps 4–5. */
  --os-seq-1: #cde2fb; --os-seq-2: #9ec5f4; --os-seq-3: #6da7ec; --os-seq-4: #256abf; --os-seq-5: #104281;
  --os-seq-ink-lo: #14202E; --os-seq-ink-hi: #FFFFFF;
  --os-overlay: rgba(15, 23, 42, 0.45);
  /* Elevation: e0 = border only (default card), e1 hover/raised, e2 menus, e3 dialogs */
  --os-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --os-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.06);
  --os-shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.06);  /* NEW */
  --os-shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.14);
  color-scheme: light;
}

/* ---------- Dark (each person's choice) ---------- */
:root[data-theme=dark] {
  --os-ground: #0B1120;
  --os-card: #111827;
  --os-soft: #0F172A;
  --os-raised: #172033;
  --os-hover: #172033;
  --os-line: #1E293B;
  --os-line-strong: #334155;
  --os-ink: #F1F5F9;
  --os-ink-2: #CBD5E1;
  --os-muted: #94A3B8;
  --os-subtle: #8492A6;
  --os-accent: #7AA7FA;          /* 7.4:1 on cards */
  --os-accent-bg: #2563EB;
  --os-accent-bg-hover: #1D4ED8;
  --os-accent-soft: #172554;
  --os-focus: rgba(122, 167, 250, 0.45);
  --os-link: #7AA7FA;
  --os-brand: #FF8A6E;
  --os-brand-soft: #3A1A12;
  --os-live-bg: #0B2E1F;    --os-live-ink: #6CE9A6;
  --os-partial-bg: #33230A; --os-partial-ink: #FEC84B;
  --os-gap-bg: #3A1414;     --os-gap-ink: #FDA29B;
  --os-info-bg: #142449;    --os-info-ink: #93B8FC;
  --os-ext-bg: #1E293B;     --os-ext-ink: #CBD5E1;
  --os-dock: #070B14;
  --os-dock-line: #1E293B;
  --os-tile: #172033;
  --os-tile-ink: #CBD5E1;
  --os-navy: #0F172A;
  --os-chart-2: #94A3B8;
  --os-violet: #A78BFA;
  --os-chart-1: #3987e5;
  --os-chart-3: #d95926;
  --os-chart-4: #199e70;
  --os-chart-5: #c98500;
  --os-seq-1: #0d366b; --os-seq-2: #184f95; --os-seq-3: #256abf; --os-seq-4: #6da7ec; --os-seq-5: #9ec5f4;
  --os-seq-ink-lo: #E6E9EE; --os-seq-ink-hi: #0E1320;
  --os-overlay: rgba(2, 6, 23, 0.65);
  --os-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --os-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.3);
  --os-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --os-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);
  color-scheme: dark;
}

/* ---------- Both themes ---------- */
:root {
  /* Paper: a document page drawn on screen (ResQ Legal e-sign) is white in both
     themes, so what sits on it keeps the light theme's ink and series colours. */
  --os-paper: #FFFFFF;
  --os-paper-ink: #0F172A;
  --os-paper-line: #CBD5E1;
  --os-paper-1: #2a78d6;
  --os-paper-2: #64748B;
  --os-paper-3: #eb6834;
  --os-paper-4: #1baf7a;
  --os-paper-5: #eda100;
  /* Type */
  --os-sans: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --os-num: var(--os-sans);       /* always with font-variant-numeric: tabular-nums */
  --os-mono: var(--os-sans);      /* legacy name; Inter */
  --os-code: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;  /* ids, codes, keys only */
  /* Type scale (size/line-height) NEW */
  --os-text-xs: 12px/16px;   /* metadata, chips, table captions */
  --os-text-sm: 13px/18px;   /* labels, secondary rows, buttons (sm) */
  --os-text-md: 14px/20px;   /* body, table cells, inputs, buttons */
  --os-text-lg: 16px/24px;   /* card titles in detail views, lead text */
  --os-text-xl: 20px/28px;   /* record name in identity headers */
  --os-text-2xl: 24px/32px;  /* page titles */
  --os-text-kpi: 28px/34px;  /* metric values */
  /* Weights: 400 body, 500 labels and buttons, 600 headings and values, 700 page titles only */
  /* Spacing: 4px scale */
  --os-s1: 4px; --os-s2: 8px; --os-s3: 12px; --os-s4: 16px; --os-s5: 24px; --os-s6: 32px; --os-s7: 48px;
  --os-s-5: 20px;  /* NEW: card padding on desktop */
  /* Radius */
  --os-radius: 12px;          /* cards, panels, dialogs (dialogs 16px: --os-radius-lg) */
  --os-radius-lg: 16px;       /* NEW */
  --os-radius-sm: 8px;        /* inputs, buttons, menu items */
  --os-radius-xs: 6px;        /* NEW: icon containers, small tags */
  --os-radius-pill: 999px;    /* chips, tab tracks, segmented controls */
  /* Controls */
  --os-control-h: 36px;       /* NEW: desktop control height */
  --os-control-h-sm: 30px;    /* NEW */
  --os-touch: 44px;           /* NEW: minimum hit area on touch screens */
  /* Icons (Lucide): 16px in controls and rows, 18px in headers, 20px in icon containers; stroke 1.75 */
  --os-icon: 16px; --os-icon-md: 18px; --os-icon-lg: 20px;
  /* Brand gradient: the Home tile and the logo only */
  --os-home-from: #F28C4B; --os-home-to: #C8381E;
  --os-brand-gradient: linear-gradient(135deg, var(--os-home-from), var(--os-home-to));
  /* Status words used by module CSS (same values as the chips) */
  --os-success: var(--os-live-ink); --os-success-bg: var(--os-live-bg);
  --os-warn: var(--os-partial-ink); --os-warn-bg: var(--os-partial-bg);
  --os-danger: var(--os-gap-ink); --os-danger-bg: var(--os-gap-bg);
  --os-info: var(--os-info-ink);
  --os-neutral: var(--os-ext-ink); --os-neutral-bg: var(--os-ext-bg);
}

/* Collab's own variable names map onto the tokens (unchanged from v1). */
:root {
  --canvas: var(--os-ground); --bg: var(--os-card); --bg-soft: var(--os-soft); --bg-hover: var(--os-hover);
  --border: var(--os-line); --text: var(--os-ink); --text-2: var(--os-ink-2); --muted: var(--os-muted);
  --accent: var(--os-accent-bg); --accent-hover: var(--os-accent-bg-hover); --accent-soft: var(--os-accent-soft);
  --accent-text: var(--os-accent); --link: var(--os-link); --ink: var(--os-ink);
  --radius: var(--os-radius-sm); --shadow: var(--os-shadow-sm); --shadow-lg: var(--os-shadow-lg);
  --side-bg: var(--os-soft); --side-hover: var(--os-hover);
}
:root:not([data-theme=dark]) { --mention: #FFFAEB; }
:root[data-theme=dark] { --mention: #33230A; }