/* ==========================================================================
   Keel: the design system of Implentio OS Admin (os.prod.implentio.net)
   tokens.css, version 1.1, 2026-10-29 (1.1: a darker light canvas; the
   chart, KPI and empty-state sizes of the look rounds)

   A NEW system. It does not use the Implentio brand design system (no purple,
   no Sora or Montserrat, no cream paper). Read README.md first, then
   components.md and pages.md.

   Rules for this file:
   - Components and pages use SEMANTIC tokens only (section 3 and later).
     The primitives in section 1 (--p-*) exist so that the themes can map to
     them. Never use a --p-* token in a component.
   - Dark is the default theme. Set data-theme="light" on <html> for light.
     Set data-theme="dark" to force dark. The app sets the attribute before
     first paint (see README.md > Theme).
   - Set data-density="compact" on any element to make its tables and
     controls denser.
   - Colors carry meaning. Each hue family has ONE meaning (README.md >
     Color meaning). Never use a hue for decoration.
   - Every text pair here passes WCAG 2.2 AA (4.5:1). Control borders and
     focus rings pass 3:1. The numbers are in README.md > Contrast.
   ========================================================================== */

/* --- Fonts: IBM Plex Sans and IBM Plex Mono (SIL OFL 1.1, fonts/OFL-LICENSE.txt).
   Latin subset only. The url() paths are relative to this file. ---------- */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }

:root {
  /* ======================================================================
     1. PRIMITIVES (generated from OKLCH; do not use in components)
     ====================================================================== */

  /* Slate: cool neutral, hue 255, very low chroma */
  --p-slate-0: #FFFFFF;    --p-slate-25: #F8FAFD;   --p-slate-50: #F3F5F8;   --p-slate-100: #EBEDEF;
  --p-slate-150: #E3E5E7;  --p-slate-200: #D4DAE1;  --p-slate-300: #B9BEC6;  --p-slate-400: #9A9FA6;
  --p-slate-500: #81878D;  --p-slate-550: #767B81;  --p-slate-600: #6A6F76;  --p-slate-650: #5D6269;
  --p-slate-700: #51565B;  --p-slate-750: #41454B;
  --p-slate-800: #32363B;  --p-slate-850: #262A30;  --p-slate-900: #1D2126;  --p-slate-925: #161A1F;
  --p-slate-950: #111419;  --p-slate-975: #0B0F13;  --p-slate-1000: #06080D;

  /* Blue, hue 257: interaction and tier 1 (reversible change) */
  --p-blue-50: #EFF6FF;  --p-blue-100: #DDEBFF; --p-blue-200: #BAD6FE; --p-blue-300: #94C0FE;
  --p-blue-400: #66A6FE; --p-blue-500: #408EF7; --p-blue-600: #2776DD; --p-blue-700: #1A60BA;
  --p-blue-800: #1C4781; --p-blue-850: #1B355A; --p-blue-900: #16273E; --p-blue-950: #101B2B;

  /* Green, hue 155: safe and OK (safety actions, connected, done, healthy) */
  --p-green-50: #EAFAEF;  --p-green-100: #D3F3DD; --p-green-200: #A8E5BC; --p-green-300: #7AD59C;
  --p-green-400: #43C07A; --p-green-500: #24A965; --p-green-600: #019052; --p-green-700: #027743;
  --p-green-800: #0C5630; --p-green-850: #163F27; --p-green-900: #142C1D; --p-green-950: #0F1F14;

  /* Amber, hue 75: caution (tier 2 high impact, waiting, needs you, paused) */
  --p-amber-50: #FEF3E5;  --p-amber-100: #FCE6C9; --p-amber-200: #F5CD95; --p-amber-300: #EBB25F;
  --p-amber-400: #DB9405; --p-amber-500: #BF8101; --p-amber-600: #A26D01; --p-amber-700: #865900;
  --p-amber-800: #624000; --p-amber-850: #493006; --p-amber-900: #33230C; --p-amber-950: #231809;

  /* Red, hue 25: stop (tier 3 never, failed, error, blocked) */
  --p-red-50: #FFF2F0;  --p-red-100: #FEE2DF; --p-red-200: #FFC3BE; --p-red-300: #FFA098;
  --p-red-400: #FF726B; --p-red-500: #E85854; --p-red-600: #CE3F3E; --p-red-700: #AD2F30;
  --p-red-800: #792927; --p-red-850: #562321; --p-red-900: #3C1C1A; --p-red-950: #291412;

  /* ======================================================================
     2. THEME-INDEPENDENT TOKENS
     ====================================================================== */

  /* Type */
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  /* Size / line height pairs. 14 is the body size; 13 is the dense size (tables, AI panel). */
  --fs-11: 11px;  --lh-11: 16px;   /* micro: tier labels (caps), chart ticks */
  --fs-12: 12px;  --lh-12: 16px;   /* meta, badges, table headers, captions */
  --fs-13: 13px;  --lh-13: 20px;   /* dense body: table cells, AI panel, card text */
  --fs-14: 14px;  --lh-14: 20px;   /* body, controls */
  --fs-16: 16px;  --lh-16: 24px;   /* section heading (h2), dialog title */
  --fs-20: 20px;  --lh-20: 28px;   /* page title (h1) */
  --fs-24: 24px;  --lh-24: 32px;   /* KPI value */
  --fs-32: 32px;  --lh-32: 40px;   /* sign-in page only */
  --ls-tight: -0.01em;             /* h1 and KPI values */
  --ls-caps: 0.06em;               /* 11px uppercase labels only */

  /* Space: 4 px grid */
  --space-0: 0;
  --space-half: 2px;
  --space-1: 4px;
  --space-1h: 6px;     /* the inline step: icon-to-label gaps, badge and chip padding, dense rows (Keel 1.2) */
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Radius: small. Controls are rectangles, not pills. */
  --radius-xs: 3px;     /* coverage cells, inline code, source chips */
  --radius-sm: 4px;     /* badges, checkboxes, tooltips */
  --radius-md: 6px;     /* buttons, inputs, menus, action cards */
  --radius-lg: 8px;     /* cards, panels, tables */
  --radius-xl: 12px;    /* dialogs, sign-in card */
  --radius-full: 999px; /* status dots, avatars, switch track, progress bars */

  /* Borders and focus */
  --bw: 1px;
  --bw-tier: 3px;       /* the left edge of an action card and a tier row */
  --focus-w: 2px;
  --focus-offset: 2px;

  /* Sizes */
  --control-h-sm: 28px;
  --control-h-md: 32px; /* default button and input */
  --control-h-lg: 40px; /* sign-in, empty-state call to action */
  --row-h: 36px;        /* table row, comfortable */
  --icon-sm: 14px;
  --icon-md: 16px;
  --icon-lg: 20px;
  --dot: 8px;           /* status dot */
  --kpi-min-h: 92px;    /* KPI tile: tiles in one row keep one height */
  --empty-tile: 48px;   /* the framed icon of an empty state */
  --chart-h: 176px;     /* the plot height of a bar chart */
  --chart-y-w: 2.75rem; /* the y-axis label column of a chart */
  --mark-lg: 44px;      /* the product mark on the sign-in page */

  /* Layout (breakpoints, for media queries: 720px, 1024px, 1280px, 1536px) */
  --topbar-h: 48px;
  --banner-h: 40px;
  --nav-w: 216px;
  --nav-w-collapsed: 56px;
  --ai-w: 400px;
  --ai-w-min: 340px;
  --ai-w-max: 560px;
  --content-max: 1280px;
  --content-pad: 24px;
  --measure: 72ch;      /* longest line of running text */

  /* Motion: short and calm. No bounce, no spring. */
  --dur-1: 80ms;        /* hover, color change */
  --dur-2: 140ms;       /* press, switch, checkbox */
  --dur-3: 220ms;       /* toast, popover, row insert */
  --dur-4: 320ms;       /* AI panel and drawer open or close */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --ease-linear: linear; /* progress bars only */

  /* Layers */
  --z-sticky: 10;   /* sticky table headers, top bar */
  --z-banner: 20;   /* Pause-all banner */
  --z-panel: 30;    /* AI panel as a drawer (narrow screens) */
  --z-popover: 40;  /* menus, tooltips */
  --z-dialog: 50;
  --z-toast: 60;
}

/* ==========================================================================
   3. SEMANTIC COLOR: DARK (default)
   ========================================================================== */
:root, [data-theme="dark"] {
  color-scheme: dark;

  /* Surfaces */
  --bg: var(--p-slate-950);            /* app canvas */
  --surface-1: var(--p-slate-925);     /* cards, panels, tables, AI panel, top bar */
  --surface-2: var(--p-slate-900);     /* row hover, inset wells (diff, code), input fill */
  --surface-3: var(--p-slate-850);     /* selected row, active nav item, pressed */
  --surface-inverse: var(--p-slate-100); /* tooltip */
  --overlay: rgb(6 8 13 / 0.72);       /* dialog scrim */

  /* Borders */
  --border-subtle: var(--p-slate-850); /* table row dividers */
  --border: var(--p-slate-800);        /* card and panel edges */
  --border-strong: var(--p-slate-700); /* hover edge, separators that must show */
  --border-control: var(--p-slate-550);/* input, checkbox, switch track edge (3:1) */
  --field-bg: var(--p-slate-950);      /* input and textarea fill */

  /* Text */
  --text: var(--p-slate-100);
  --text-muted: var(--p-slate-300);    /* secondary text, table headers, ledes */
  --text-subtle: var(--p-slate-400);   /* meta: times, versions, captions */
  --text-disabled: var(--p-slate-600);
  --text-inverse: var(--p-slate-950);  /* text on --surface-inverse */

  /* Accent = interaction (links, focus, primary buttons, selection) */
  --accent-solid: var(--p-blue-400);       /* primary button fill */
  --accent-solid-hover: var(--p-blue-300);
  --accent-solid-active: var(--p-blue-500);
  --on-accent: var(--p-slate-975);         /* text on --accent-solid */
  --accent-fg: var(--p-blue-300);          /* links, selected text, accent icons */
  --accent-subtle: var(--p-blue-900);      /* selected row tint, user-message tint */
  --accent-border: var(--p-blue-800);
  --focus-ring: var(--p-blue-400);

  /* Status families. Each: solid (dot, edge, icon), fg (text), subtle (tint), border. */
  --info-solid: var(--p-blue-400);   --info-fg: var(--p-blue-300);   --info-subtle: var(--p-blue-900);   --info-border: var(--p-blue-800);
  --ok-solid: var(--p-green-400);    --ok-fg: var(--p-green-300);    --ok-subtle: var(--p-green-900);    --ok-border: var(--p-green-800);
  --warn-solid: var(--p-amber-400);  --warn-fg: var(--p-amber-300);  --warn-subtle: var(--p-amber-900);  --warn-border: var(--p-amber-800);
  --bad-solid: var(--p-red-400);     --bad-fg: var(--p-red-300);     --bad-subtle: var(--p-red-900);     --bad-border: var(--p-red-800);
  --neutral-solid: var(--p-slate-400); --neutral-fg: var(--p-slate-300); --neutral-subtle: var(--p-slate-900); --neutral-border: var(--p-slate-800);

  /* Caution button (tier 2 Confirm, Resume). Same fill in both themes. */
  --caution-solid: var(--p-amber-400);
  --caution-solid-hover: var(--p-amber-300);
  --caution-border: var(--p-amber-400);
  --on-caution: var(--p-amber-950);

  /* Diff (config changes in action cards and version history) */
  --diff-add-bg: var(--p-green-950);  --diff-add-fg: var(--p-green-200);  --diff-add-mark: var(--p-green-400);
  --diff-del-bg: var(--p-red-950);    --diff-del-fg: var(--p-red-200);    --diff-del-mark: var(--p-red-400);

  /* Data visualization (validated with the dataviz validator on --surface-1; see README.md) */
  --data-1: #3987E5;  /* blue    : the single-series color */
  --data-2: #D95926;  /* orange  */
  --data-3: #199E70;  /* aqua    */
  --data-4: #C98500;  /* yellow  */
  --data-5: #D55181;  /* magenta */
  --data-6: #008300;  /* green   */
  --data-7: #9085E9;  /* violet  */
  --data-8: #E66767;  /* red     */
  --chart-grid: var(--p-slate-850);
  --chart-axis: var(--p-slate-750);
  --chart-label: var(--p-slate-400);
  /* Coverage grid states (Data page, connection cards) */
  --cov-full: var(--data-1);
  --cov-missing-bg: transparent;
  --cov-missing-line: var(--p-slate-600); /* 45-degree hatch lines and dashed edge */
  --cov-excluded: var(--p-slate-850);     /* left out on purpose */
  --cov-running: var(--data-1);           /* 45-degree stripes, backfill in progress */
  --cov-empty: var(--p-slate-900);        /* the part of a partial cell that has no data */

  /* Shadows: dark theme relies on borders; shadows only for layers above the page */
  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.40);
  --shadow-2: 0 4px 12px rgb(0 0 0 / 0.45), 0 0 0 1px rgb(255 255 255 / 0.04);
  --shadow-3: 0 16px 40px rgb(0 0 0 / 0.55), 0 0 0 1px rgb(255 255 255 / 0.05);
}

/* ==========================================================================
   4. SEMANTIC COLOR: LIGHT
   ========================================================================== */
[data-theme="light"] {
  color-scheme: light;

  --bg: var(--p-slate-100);            /* 1.1: one step darker, so white cards stand off the canvas */
  --surface-1: var(--p-slate-0);
  --surface-2: var(--p-slate-25);
  --surface-3: var(--p-slate-150);     /* 1.1: one step darker, so the active nav item shows on the canvas */
  --surface-inverse: var(--p-slate-900);
  --overlay: rgb(17 20 25 / 0.40);

  --border-subtle: var(--p-slate-150);
  --border: var(--p-slate-200);
  --border-strong: var(--p-slate-300);
  --border-control: var(--p-slate-550); /* 1.1: keeps 3:1 on the darker surface-3 */
  --field-bg: var(--p-slate-0);

  --text: var(--p-slate-950);
  --text-muted: var(--p-slate-700);
  --text-subtle: var(--p-slate-650);
  --text-disabled: var(--p-slate-400);
  --text-inverse: var(--p-slate-50);

  --accent-solid: var(--p-blue-700);
  --accent-solid-hover: var(--p-blue-800);
  --accent-solid-active: var(--p-blue-800);
  --on-accent: var(--p-slate-0);
  --accent-fg: var(--p-blue-700);
  --accent-subtle: var(--p-blue-50);
  --accent-border: var(--p-blue-200);
  --focus-ring: var(--p-blue-600);

  --info-solid: var(--p-blue-600);   --info-fg: var(--p-blue-700);   --info-subtle: var(--p-blue-50);   --info-border: var(--p-blue-200);
  --ok-solid: var(--p-green-600);    --ok-fg: var(--p-green-700);    --ok-subtle: var(--p-green-50);    --ok-border: var(--p-green-200);
  --warn-solid: var(--p-amber-500);  --warn-fg: var(--p-amber-700);  --warn-subtle: var(--p-amber-50);  --warn-border: var(--p-amber-200);
  --bad-solid: var(--p-red-600);     --bad-fg: var(--p-red-700);     --bad-subtle: var(--p-red-50);     --bad-border: var(--p-red-200);
  --neutral-solid: var(--p-slate-500); --neutral-fg: var(--p-slate-700); --neutral-subtle: var(--p-slate-50); --neutral-border: var(--p-slate-200);

  --caution-solid: var(--p-amber-400);
  --caution-solid-hover: var(--p-amber-300);
  --caution-border: var(--p-amber-600); /* the fill alone is under 3:1 on white */
  --on-caution: var(--p-amber-950);

  --diff-add-bg: var(--p-green-50);  --diff-add-fg: var(--p-green-800);  --diff-add-mark: var(--p-green-600);
  --diff-del-bg: var(--p-red-50);    --diff-del-fg: var(--p-red-800);    --diff-del-mark: var(--p-red-600);

  --data-1: #2A78D6;
  --data-2: #EB6834;
  --data-3: #1BAF7A;
  --data-4: #EDA100;
  --data-5: #E87BA4;
  --data-6: #008300;
  --data-7: #6250D6;
  --data-8: #E34948;
  --chart-grid: var(--p-slate-150);
  --chart-axis: var(--p-slate-300);
  --chart-label: var(--p-slate-600);
  --cov-full: var(--data-1);
  --cov-missing-bg: transparent;
  --cov-missing-line: var(--p-slate-500);
  --cov-excluded: var(--p-slate-150);
  --cov-running: var(--data-1);
  --cov-empty: var(--p-slate-100);

  --shadow-1: 0 1px 2px rgb(17 20 25 / 0.08);
  --shadow-2: 0 4px 12px rgb(17 20 25 / 0.10), 0 0 0 1px rgb(17 20 25 / 0.04);
  --shadow-3: 0 16px 40px rgb(17 20 25 / 0.16), 0 0 0 1px rgb(17 20 25 / 0.05);
}

/* ==========================================================================
   5. TIERS (admin AI action tiers; aliases of the status families)
   One tier = one hue. Never show a tier by color alone: always the label
   and the icon too (components.md > Tier badge).
   ========================================================================== */
:root, [data-theme] {
  /* Tier 0 Look: read only, no confirmation. Neutral: nothing changes. */
  --tier-0-solid: var(--neutral-solid); --tier-0-fg: var(--neutral-fg); --tier-0-subtle: var(--neutral-subtle); --tier-0-border: var(--neutral-border);
  /* Tier 1 Change: reversible; one Confirm, then Undo. Blue: the normal action color. */
  --tier-1-solid: var(--info-solid);    --tier-1-fg: var(--info-fg);    --tier-1-subtle: var(--info-subtle);    --tier-1-border: var(--info-border);
  /* Tier 2 High impact: typed word + reason; may need a second admin. Amber: caution. */
  --tier-2-solid: var(--warn-solid);    --tier-2-fg: var(--warn-fg);    --tier-2-subtle: var(--warn-subtle);    --tier-2-border: var(--warn-border);
  /* Tier 3 Never: blocked in code; refusal + alternative. Red: stop. */
  --tier-3-solid: var(--bad-solid);     --tier-3-fg: var(--bad-fg);     --tier-3-subtle: var(--bad-subtle);     --tier-3-border: var(--bad-border);
  /* Safety: Pause all, pause one workflow. Always allowed, no confirmation. Green: makes it safe. */
  --tier-s-solid: var(--ok-solid);      --tier-s-fg: var(--ok-fg);      --tier-s-subtle: var(--ok-subtle);      --tier-s-border: var(--ok-border);
}

/* ==========================================================================
   6. DENSITY
   ========================================================================== */
[data-density="compact"] {
  --control-h-md: 28px;
  --control-h-sm: 24px;
  --row-h: 28px;
}

/* ==========================================================================
   7. REDUCED MOTION: keep state changes, remove movement
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; --dur-4: 0ms; }
}

/* ==========================================================================
   8. FORCED COLORS (Windows high contrast): tiers keep their edge and label
   ========================================================================== */
@media (forced-colors: active) {
  :root { --bw-tier: 4px; }
}