/*
 * AlisQI design tokens, the single source for colour, type, spacing, radius and shadow (PLAN.md "Design input").
 * The light block is design/tcoq/ds/tokens.css (design system 1793205988-13b4) unchanged, except:
 * - @font-face points at assets/fonts/ and only the Poppins weights the boards use (300–700) are declared;
 *   Silkscreen and Poppins 800/900 are not shipped (no board uses them);
 * - the TCoQ additions at the end: bucket colours, the page/chrome roles the boards use, and a dark theme.
 * The design system has no dark theme (tokens.json lists "light" only). The dark values below are ours, chosen from
 * the same palette; see docs/decisions.md (D-004).
 */

:root, [data-theme="light"] {
  --white: #ffffff;
  --dark-matter: #0f172a;
  --sun: #fff870;
  --prodigy: #00ece9;
  --slate-950: #0b1120;
  --slate-900: #0f172a;
  --slate-800: #1e293b;
  --slate-700: #334155;
  --slate-600: #475569;
  --slate-500: #64748b;
  --slate-400: #94a3b8;
  --slate-300: #cbd5e1;
  --slate-200: #e2e8f0;
  --slate-100: #f1f5f9;
  --slate-50: #f8fafc;
  --prodigy-700: #0e7490;
  --prodigy-600: #0891b2;
  --prodigy-100: #cffafe;
  --prodigy-050: #ecfeff;
  --sun-600: #b59a00;
  --sun-200: #fffbc2;
  --sun-050: #fefce8;
  --green-600: #0e9f6e;
  --green-100: #d7f5e9;
  --green-700: #047857;
  --amber-600: #d97706;
  --amber-100: #fdefd3;
  --amber-700: #b45309;
  --red-600: #e02424;
  --red-100: #fbe0e0;
  --red-700: #b91c1c;
  --blue-600: #2563eb;
  --blue-100: #dce6fd;
  --blue-700: #1d4ed8;
  --blue-950: #172554;
  --blue-900: #1e3a8a;
  --blue-800: #1e40af;
  --blue-500: #3b82f6;
  --blue-400: #60a5fa;
  --blue-300: #93c5fd;
  --blue-200: #bfdbfe;
  --surface-page: var(--white);
  --surface-subtle: var(--slate-50);
  --surface-muted: var(--slate-100);
  --surface-card: var(--white);
  --surface-sunken: var(--slate-100);
  --surface-inverse: var(--dark-matter);
  --surface-inverse-2: var(--slate-800);
  --text-strong: var(--dark-matter);
  --text-body: var(--slate-700);
  --text-muted: var(--slate-500);
  --text-subtle: var(--slate-400);
  --text-on-dark: var(--white);
  --text-on-dark-muted: var(--slate-400);
  --text-link: var(--prodigy-700);
  --border-subtle: var(--slate-200);
  --border-default: var(--slate-300);
  --border-strong: var(--slate-400);
  --border-inverse: rgba(255,255,255,0.14);
  --grid-line: var(--slate-200);
  --grid-line-strong: var(--slate-300);
  --grid-line-graphic: var(--slate-500);
  --grid-line-on-dark: rgba(255,255,255,0.12);
  --grid-line-on-sun: rgba(15,23,42,0.14);
  --grid-line-on-prodigy: rgba(15,23,42,0.16);
  --grid-tile-divider: var(--dark-matter);
  --accent: var(--prodigy);
  --accent-2: var(--sun);
  --focus-ring: var(--prodigy);
  --status-success-fg: var(--green-700);
  --status-success-bg: var(--green-100);
  --status-success: var(--green-600);
  --status-warning-fg: var(--amber-700);
  --status-warning-bg: var(--amber-100);
  --status-warning: var(--amber-600);
  --status-danger-fg: var(--red-700);
  --status-danger-bg: var(--red-100);
  --status-danger: var(--red-600);
  --status-info-fg: var(--blue-700);
  --status-info-bg: var(--blue-100);
  --status-info: var(--blue-600);
  --shadow-xs: 0 1px 2px rgba(15,23,42,0.06);
  --shadow-sm: 0 1px 3px rgba(15,23,42,0.08), 0 1px 2px rgba(15,23,42,0.04);
  --shadow-md: 0 4px 12px rgba(15,23,42,0.08), 0 2px 4px rgba(15,23,42,0.04);
  --shadow-lg: 0 12px 28px rgba(15,23,42,0.12), 0 4px 8px rgba(15,23,42,0.05);
  --shadow-xl: 0 24px 56px rgba(15,23,42,0.18), 0 8px 16px rgba(15,23,42,0.06);
  --shadow-focus: 0 0 0 3px rgba(0,236,233,0.45);
}

:root {
  --space-0: 0;
  --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;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 16px;
  --radius-pill: 999px;
  --border-hairline: 1px;
  --border-thin: 1px;
  --border-thick: 2px;
  --grid-line-weight: 1px;
  --grid-tile-weight: 8px;
  --grid-cell: 64px;
  --container-max: 1200px;
  --container-wide: 1320px;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fw-black: 900;
  --text-2xs: 0.6875rem;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;
  --text-7xl: 4.5rem;
  --text-8xl: 6rem;
  --leading-none: 1;
  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;
  --tracking-tighter: -0.03em;
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-eyebrow: 0.08em;
  --z-base: 1;
  --z-sticky: 100;
  --z-overlay: 1000;
  --z-modal: 1100;
  --z-toast: 1200;
  --font-sans: "Poppins", "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;
  --font-pixel: "Silkscreen", "Poppins", monospace;
  --font-data: "Poppins", "Segoe UI", system-ui, sans-serif;
}

@font-face { font-family: "Poppins"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/Poppins-Light-dMTosaS.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/Poppins-Regular-hBRJlB7.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/Poppins-Medium-swBHwia.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/Poppins-SemiBold-u6Y9fHz.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/Poppins-Bold-dkvJ0T8.ttf") format("truetype"); }

/* ------------------------------------------------------------------------------------------------------------------
 * TCoQ additions (light)
 * ---------------------------------------------------------------------------------------------------------------- */
:root, [data-theme="light"] {
  color-scheme: light;

  /* The AlisQI main app's chart palette (src/javascript/util/charts.ts: main, goal, yellow, boundary, min, trend), so
     charts read the same in both apps (decisions D-102). */
  --alisqi-chart-main: #0e4293;
  --alisqi-chart-goal: #06823b;
  --alisqi-chart-yellow: #bc9d32;
  --alisqi-chart-boundary: #ff736b;
  --alisqi-chart-min: #aa0300;
  --alisqi-chart-trend: #5f2f6a;

  /* Fixed bucket colours (PLAN.md "Bucket colours"), from the main app's palette (D-102): prevention green, appraisal
     blue, internal failure yellow, external failure red. Charts read these through assets/charts/theme.ts. */
  --bucket-p: var(--alisqi-chart-goal);
  --bucket-a: var(--alisqi-chart-main);
  --bucket-if: var(--alisqi-chart-yellow);
  --bucket-ef: var(--alisqi-chart-min);
  --bucket-none: var(--slate-300);
  /* Plants when a chart shows them as series (D-121): a blue scale, so plants never look like buckets. Unassigned
     (records without a plant) uses --bucket-none. */
  --plant-1: var(--blue-900);
  --plant-2: var(--blue-700);
  --plant-3: var(--blue-500);
  --plant-4: var(--blue-300);
  --plant-5: var(--blue-800);
  --plant-6: var(--blue-400);
  /* Sub-buckets (D-129, D-132): side A and side B of a split; uncategorized uses --bucket-none. */
  --split-a: var(--blue-700);
  --split-b: var(--blue-300);

  /* Roles the boards use that the design system has no name for. */
  --surface-app: var(--slate-50);          /* page background behind the cards (boards: #f8fafc) */
  --surface-header: var(--dark-matter);    /* app header bar */
  --surface-selected: var(--prodigy-050);  /* selected table row */
  --divider: var(--slate-100);             /* row separators inside cards (boards: #f1f5f9) */
  --track: var(--slate-100);               /* empty part of a bar or meter */
  --marker: var(--dark-matter);            /* benchmark marker */
  --chart-total: var(--dark-matter);       /* total line in the monthly chart */
  --chart-trend: var(--alisqi-chart-trend); /* dashed trendline (the main app's trend colour) */
  --chart-copq: var(--alisqi-chart-min);   /* COPQ line, "cost up" bars */
  --chart-band-80: #f9d9a6;                /* COGQ vs COPQ 80% prediction band (board value, no token) */
  --chart-band-95: var(--amber-100);
  --overlay-scrim: rgb(15 23 42 / 0.45);   /* behind the chart dialog: dark-matter at 45% (no design token) */
  --chart-navigator-mask: rgb(14 116 144 / 0.14); /* selected range in the time navigator: prodigy-700 at 14% */
  --text-good: var(--green-700);
  --text-bad: var(--amber-700);

  /* Analytics toolbox (board 5). */
  --chart-cost-down: var(--alisqi-chart-goal); /* cost bridge "cost down" bars */
  --chart-bridge-total: var(--slate-700);   /* cost bridge start and end bars */
  --chart-flow-node: var(--slate-700);      /* cost flow plant nodes */
  --chart-flow-link: var(--slate-400);      /* cost flow plant → set links */
  --heat-1: var(--blue-100);                /* plant × month ramp, low to high: blue (D-123) */
  --heat-2: var(--blue-300);
  --heat-3: var(--blue-500);
  --heat-4: var(--blue-700);
  --heat-5: var(--blue-900);
  --meter-good: var(--prodigy-700);         /* data-quality gauge at or above the target */
  --meter-warn: var(--amber-600);
  /* Product quality capability bands (D-157): not capable, marginal, capable (accent at 50%), highly capable. */
  --pq-not-capable: var(--status-danger);
  --pq-marginal: var(--status-warning);
  --pq-capable: color-mix(in srgb, var(--accent) 50%, transparent);
  --pq-highly-capable: var(--accent);
  --pq-few: var(--slate-200);               /* a spec, fewer than 5 results */
  --pq-unspecified: var(--slate-400);       /* measured without a spec */
  /* Product-inspection stages (D-163): the stage navigator, its bar and the stage overview chart. Aliases of themed
     tokens, so they follow dark mode; text on a stage colour uses --surface-card. */
  --stage-raw-material: var(--plant-5);
  --stage-intermediate: var(--plant-3);
  --stage-final-product: var(--status-danger);
}

/* ------------------------------------------------------------------------------------------------------------------
 * Dark theme: follows prefers-color-scheme unless the page forces [data-theme="light"]; [data-theme="dark"] forces it.
 * The two blocks must stay identical.
 * ---------------------------------------------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --surface-page: var(--slate-950);
    --surface-subtle: #131c2e;
    --surface-muted: var(--slate-800);
    --surface-card: var(--slate-900);
    --surface-sunken: var(--slate-950);
    --surface-inverse: var(--slate-100);
    --surface-inverse-2: var(--slate-200);
    --text-strong: var(--slate-50);
    --text-body: var(--slate-300);
    --text-muted: var(--slate-400);
    --text-subtle: var(--slate-500);
    --text-link: var(--prodigy);
    --border-subtle: var(--slate-800);
    --border-default: var(--slate-700);
    --border-strong: var(--slate-600);
    --grid-line: var(--slate-800);
    --grid-line-strong: var(--slate-700);
    --status-success-fg: #6ee7b7;
    --status-success-bg: rgba(14,159,110,0.18);
    --status-warning-fg: #fcd34d;
    --status-warning-bg: rgba(217,119,6,0.18);
    --status-danger-fg: #fca5a5;
    --status-danger-bg: rgba(224,36,36,0.18);
    --status-info-fg: #93c5fd;
    --status-info-bg: rgba(37,99,235,0.2);
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.4);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.45), 0 1px 2px rgba(0,0,0,0.3);

    --alisqi-chart-main: #9abef7;
    --alisqi-chart-goal: #08ca6b;
    --alisqi-chart-yellow: #f7c56c;
    --alisqi-chart-boundary: #ff736b;
    --alisqi-chart-min: #ff736b;
    --alisqi-chart-trend: #5f2f6a;
    --bucket-p: var(--alisqi-chart-goal);
    --bucket-a: var(--alisqi-chart-main);
    --bucket-if: var(--alisqi-chart-yellow);
    --bucket-ef: var(--alisqi-chart-min);
    --bucket-none: var(--slate-600);
    --plant-1: var(--blue-300);
    --plant-2: var(--blue-500);
    --plant-3: var(--blue-200);
    --plant-4: var(--blue-700);
    --plant-5: var(--blue-400);
    --plant-6: var(--blue-600);
    --split-a: var(--blue-300);
    --split-b: var(--blue-600);

    --surface-app: var(--slate-950);
    --surface-header: #060a14;
    --surface-selected: rgba(0,236,233,0.08);
    --divider: var(--slate-800);
    --track: var(--slate-800);
    --marker: var(--slate-100);
    --chart-total: var(--slate-100);
    --chart-trend: var(--alisqi-chart-trend);
    --chart-copq: var(--alisqi-chart-min);
    --chart-band-80: rgba(245,158,11,0.35);
    --chart-band-95: rgba(245,158,11,0.16);
    --text-good: #6ee7b7;
    --text-bad: #fcd34d;

    --chart-cost-down: var(--alisqi-chart-goal);
    --chart-bridge-total: var(--slate-400);
    --chart-flow-node: var(--slate-400);
    --chart-flow-link: var(--slate-600);
    --heat-1: var(--blue-950);
    --heat-2: var(--blue-900);
    --heat-3: var(--blue-700);
    --heat-4: var(--blue-500);
    --heat-5: var(--blue-300);
    --meter-good: var(--prodigy-600);
    --meter-warn: var(--amber-600);
    --pq-few: var(--slate-800);
    --pq-unspecified: var(--slate-600);
  }
}

[data-theme="dark"] {
  color-scheme: dark;
  --surface-page: var(--slate-950);
  --surface-subtle: #131c2e;
  --surface-muted: var(--slate-800);
  --surface-card: var(--slate-900);
  --surface-sunken: var(--slate-950);
  --surface-inverse: var(--slate-100);
  --surface-inverse-2: var(--slate-200);
  --text-strong: var(--slate-50);
  --text-body: var(--slate-300);
  --text-muted: var(--slate-400);
  --text-subtle: var(--slate-500);
  --text-link: var(--prodigy);
  --border-subtle: var(--slate-800);
  --border-default: var(--slate-700);
  --border-strong: var(--slate-600);
  --grid-line: var(--slate-800);
  --grid-line-strong: var(--slate-700);
  --status-success-fg: #6ee7b7;
  --status-success-bg: rgba(14,159,110,0.18);
  --status-warning-fg: #fcd34d;
  --status-warning-bg: rgba(217,119,6,0.18);
  --status-danger-fg: #fca5a5;
  --status-danger-bg: rgba(224,36,36,0.18);
  --status-info-fg: #93c5fd;
  --status-info-bg: rgba(37,99,235,0.2);
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.45), 0 1px 2px rgba(0,0,0,0.3);

  --alisqi-chart-main: #9abef7;
  --alisqi-chart-goal: #08ca6b;
  --alisqi-chart-yellow: #f7c56c;
  --alisqi-chart-boundary: #ff736b;
  --alisqi-chart-min: #ff736b;
  --alisqi-chart-trend: #5f2f6a;
  --bucket-p: var(--alisqi-chart-goal);
  --bucket-a: var(--alisqi-chart-main);
  --bucket-if: var(--alisqi-chart-yellow);
  --bucket-ef: var(--alisqi-chart-min);
  --bucket-none: var(--slate-600);
  --plant-1: var(--blue-300);
  --plant-2: var(--blue-500);
  --plant-3: var(--blue-200);
  --plant-4: var(--blue-700);
  --plant-5: var(--blue-400);
  --plant-6: var(--blue-600);
  --split-a: var(--blue-300);
  --split-b: var(--blue-600);

  --surface-app: var(--slate-950);
  --surface-header: #060a14;
  --surface-selected: rgba(0,236,233,0.08);
  --divider: var(--slate-800);
  --track: var(--slate-800);
  --marker: var(--slate-100);
  --chart-total: var(--slate-100);
  --chart-trend: var(--alisqi-chart-trend);
  --chart-copq: var(--alisqi-chart-min);
  --chart-band-80: rgba(245,158,11,0.35);
  --chart-band-95: rgba(245,158,11,0.16);
  --text-good: #6ee7b7;
  --text-bad: #fcd34d;

  --chart-cost-down: var(--alisqi-chart-goal);
  --chart-bridge-total: var(--slate-400);
  --chart-flow-node: var(--slate-400);
  --chart-flow-link: var(--slate-600);
  --heat-1: var(--blue-950);
  --heat-2: var(--blue-900);
  --heat-3: var(--blue-700);
  --heat-4: var(--blue-500);
  --heat-5: var(--blue-300);
  --meter-good: var(--prodigy-600);
  --meter-warn: var(--amber-600);
  --pq-few: var(--slate-800);
  --pq-unspecified: var(--slate-600);
}