/*
 * CyberAutomations design tokens. CANONICAL SOURCE.
 * Copies: public/ca-tokens.css (site + public tools) and G:\CyberDash\_assets\ca-tokens.css (portal),
 * written by scripts/sync-tokens.mjs. Edit this file, then run the sync.
 *
 * Two themes, one system:
 *   public  (default)          premium light: white and cool grey, navy text, cyan-to-mint colour pop
 *   portal  [data-theme=portal] Verdigris dark: green-black, brass accent, dense tool UI
 *
 * Public theme (decided 2026-09-26, replaces the 2026-09-25 paper theme):
 *   - Cabinet Grotesk (self-hosted, Fontshare, ITF Free Font License) for headings and UI,
 *     JetBrains Mono for labels, numbers and code.
 *   - Cyan-to-mint gradient on the primary button (navy text), gradient top edges on cards, soft navy shadows.
 *   - Bright cyan and mint are fills, gradients, borders and glows only; text uses the deep partners.
 *   - Corners: 16px on cards and panels, 8px on controls.
 *   - Every text/background pair measured at WCAG AA (4.5, or 3.0 for control borders),
 *     including text over the hero orbs and tinted cards.
 *
 * Portal isolation: the :root block below keeps the shared type, space and shape values that the
 * portal inherits, unchanged. Its colours are public-only because [data-theme="portal"] redefines
 * every one of them. Public-only type, shape and effect tokens live in the
 * :root:not([data-theme="portal"]) block, so nothing the portal renders changes.
 */

:root {
  /* Type */
  --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-ui: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-num: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --fs-meta: 13px;   /* captions, footers, secondary labels */
  --fs-small: 14px;  /* nav, table headers, dense UI */
  --fs-body: 16px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 28px;
  --fs-h1: 38px;     /* public hero only; portal h1 uses --fs-portal-h1 */
  --fs-portal-h1: 20px;
  --lh-tight: 1.15;
  --lh-ui: 1.4;
  --lh-body: 1.55;

  /* Space: 4px grid */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  /* Shape */
  --r-shell: 2px;  /* page chrome, panels, tables, cards */
  --r-ctl: 6px;    /* buttons, inputs, selects */

  /* Widths */
  --w-read: 68ch;
  --w-wide: 1200px;

  /* ===== public theme (default) colours. The portal block redefines every one. ===== */
  --bg: #ffffff;
  --surface: #ffffff;        /* cards and panels (lifted by a soft shadow and a 1px line) */
  --surface-2: #f4f7fa;      /* alternating sections, table header band */
  --text: #0a1525;           /* 18.31:1 on white, 17.03:1 on --surface-2 */
  --muted: #3d5169;          /* 8.14:1 on white, 7.57:1 on --surface-2, 6.69:1 on the strongest hero orb */
  --line: #e3e9f0;           /* decorative dividers (exempt, WCAG 1.4.11) */
  --line-strong: #cdd6e1;
  --border-input: #768ca3;   /* 3.47:1 on white, 3.23:1 on --surface-2, control boundaries */
  --control-border: #768ca3; /* 3.47:1 on white. Resting control boundary for buttons/tabs (QA-001:
                                --line-strong #cdd6e1 is a DECORATIVE table rule at 1.47:1, never a control boundary) */
  --accent: #006f8f;         /* deep cyan: the static tools use it as text too, so it is text-safe (5.72:1 on white) */
  --accent-text: #006f8f;    /* 5.72:1 on white, 5.32:1 on --surface-2, 4.70:1 on the strongest orb */
  --accent-soft: #e8f8fc;    /* row highlight, tinted chips */
  --on-accent: #ffffff;      /* 5.72:1 on --accent */
  --ok: #116b30;             /* 6.63:1 on white */
  --warn: #8a5a00;           /* 5.93:1 on white */
  --crit: #b91c1c;           /* 6.47:1 on white */
  --focus: #0090b8;          /* 3.70:1 on white, 3.44:1 on --surface-2 */
  --control-checked: #0090b8; /* checkbox / radio accent-color */
}

/* Public-only tokens: type, shape and effects the portal must not inherit. */
:root:not([data-theme="portal"]) {
  color-scheme: light;
  --font-display: "Cabinet Grotesk", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-ui: "Cabinet Grotesk", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-num: "JetBrains Mono", "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --fs-h1: 56px;
  --fs-2xl: 36px;
  --fs-xl: 22px;
  --lh-tight: 1.08;
  --r-shell: 16px;
  --r-ctl: 8px;
  /* TOK-002: role-based radii. Cards 12, panels/frames 16, controls 8, pills only for true capsules. */
  --r-card: 12px;
  --r-panel: 16px;
  --r-frame: 16px;
  --r-control: 8px;
  --r-pill: 999px;

  /* Bright brand colours: fills, gradients, borders and glows only. They fail as text on white. */
  --cyan: #00c5f5;
  --on-grad: #0a1525;        /* navy on the cyan-to-mint gradient: 8.99:1 to 13.90:1 */
  --mint: #00ffb2;
  --violet: #7b61ff;
  --amber: #ffb020;
  /* Text-safe partners (all 4.5:1 or better on white, --surface-2 and the hero orbs) */
  --mint-text: #00755a;      /* 5.69:1 on white */
  --violet-text: #5b3fd9;    /* 6.65:1 on white */
  --amber-text: #8a5a00;     /* 5.93:1 on white */
  --faint: #52697f;          /* 5.70:1 on white: tertiary labels */
  --link-hover: #005a74;     /* 7.74:1 on white */

  /* Dark code card (hero terminal) on the light page */
  --terminal: #0b1221;
  --terminal-bar: #121a29;
  --term-dim: #8ea3ba;       /* 7.21:1 on --terminal */
  --term-cmd: #1ad6ff;       /* 10.78:1 */
  --term-ok: #00ffb2;        /* 14.20:1 */
  --term-key: #ffc347;       /* 11.71:1 */

  /* Gradients, glows, glass, shadows */
  --grad-brand: linear-gradient(120deg, #00c5f5 0%, #00ffb2 100%);
  --grad-text: linear-gradient(100deg, #006a8a 0%, #00704f 100%); /* both ends 5.03:1 or better on every hero background */
  --grad-edge: linear-gradient(90deg, #00c5f5, #00ffb2);
  --grad-border: linear-gradient(135deg, rgba(0, 197, 245, 0.75), rgba(0, 255, 178, 0.75));
  --shadow-sm: 0 1px 2px rgba(10, 21, 37, 0.05), 0 2px 6px rgba(10, 21, 37, 0.04);
  --shadow-md: 0 2px 4px rgba(10, 21, 37, 0.04), 0 8px 20px rgba(10, 21, 37, 0.07), 0 20px 40px rgba(10, 21, 37, 0.05);
  --shadow-lg: 0 4px 8px rgba(10, 21, 37, 0.05), 0 18px 40px rgba(10, 21, 37, 0.10), 0 40px 80px rgba(10, 21, 37, 0.06);
  --glow-sm: 0 6px 18px rgba(0, 144, 184, 0.12);
  --glow: 0 10px 30px rgba(0, 144, 184, 0.16), 0 2px 8px rgba(0, 255, 178, 0.10);
  --glow-btn: 0 6px 18px rgba(0, 197, 245, 0.18), 0 1px 2px rgba(10, 21, 37, 0.10);
  --glow-btn-hover: 0 10px 28px rgba(0, 220, 200, 0.24), 0 1px 2px rgba(10, 21, 37, 0.10);
  --border-glow: rgba(0, 144, 184, 0.35);
  --border-subtle: #e3e9f0;
  --glass-bg: rgba(255, 255, 255, 0.78);
  --glass-border: rgba(10, 21, 37, 0.08);
  --glass-blur: 12px;  /* PERF-003: reduced from 24px; opaque fallback lives in ca-base @supports */

  /* TOK-001: component surface colors defined once here so contrast.py can test them as pairs.
     Raw color literals must not reappear in ca-base.css or components. */
  --chip-border: rgba(0, 144, 184, 0.3);
  --chip-mint-bg: #e6faf3;
  --chip-mint-border: rgba(0, 191, 133, 0.35);
  --chip-violet-bg: #f1eeff;
  --chip-violet-border: rgba(123, 97, 255, 0.3);
  --chip-amber-bg: #fff6e5;
  --chip-amber-border: rgba(255, 176, 32, 0.45);
  --focus-halo: 0 0 0 3px rgba(0, 197, 245, 0.2);
  --focus-halo-invalid: 0 0 0 3px rgba(185, 28, 28, 0.2);
  --row-hover: rgba(0, 144, 184, 0.04);
  --selection-bg: rgba(0, 197, 245, 0.25);
  --blueprint-line: rgba(0, 144, 184, 0.045);
  --terminal-border: #1c2a40;
  --terminal-shadow: 0 20px 60px rgba(0, 144, 184, 0.18);
  --terminal-dot-r: #ff5f57;
  --terminal-dot-y: #ffbd2e;
  --terminal-dot-g: #28ca41;
  --pulse-dot: #10d98f;
  --pulse-dot-halo: 0 0 0 3px rgba(16, 217, 143, 0.18);

  /* Orb fills and hover washes (decorative, alpha-blended over --bg) */
  --orb-cyan: radial-gradient(closest-side, rgba(0, 197, 245, 0.2), transparent);
  --orb-mint: radial-gradient(closest-side, rgba(0, 255, 178, 0.2), transparent);
  --orb-violet: radial-gradient(closest-side, rgba(123, 97, 255, 0.12), transparent);
  --nav-hover-bg: rgba(10, 21, 37, 0.05);
  --skip-link-bg: #0a1525;
  --skip-link-fg: #ffffff;
  --print-ink: #000000;
  --print-paper: #ffffff;
  --grad-mint-edge: linear-gradient(90deg, #00ffb2, #00d6a0);
  --grad-violet-edge: linear-gradient(90deg, #7b61ff, #00c5f5);
  --grad-amber-edge: linear-gradient(90deg, #ffb020, #ffd166);
  --cta-tint-cyan: radial-gradient(60% 90% at 50% 0%, rgba(0, 197, 245, 0.14), transparent 70%);
  --cta-tint-mint: radial-gradient(50% 70% at 100% 100%, rgba(0, 255, 178, 0.12), transparent 70%);

  /* Motion: micro-interactions 150-300ms, reveals 500ms, stagger 50ms */
  --t-fast: 150ms ease;
  --t-base: 220ms ease;
  --t-reveal: 500ms cubic-bezier(0.22, 1, 0.36, 1);
  --stagger: 50ms;
  --touch-min: 44px;
}

[data-theme="portal"] {
  color-scheme: dark;  /* THEME-001: native controls and scrollbars render dark in the portal UI */
  --bg: #0d1010;
  --surface: #151a1a;
  --surface-2: #1b2222;
  --text: #dde5e3;           /* 14.92:1 */
  --muted: #9aaba6;          /* 7.32:1 on --surface */
  --line: #263030;
  --line-strong: #364444;
  --border-input: #587070;   /* 3.61:1 */
  --accent: #c9a66b;
  --accent-text: #d1b07a;    /* 9.29:1 */
  --accent-soft: #1f2a24;
  --on-accent: #1a1307;      /* 8.03:1 on --accent */
  --ok: #5aab7f;
  --warn: #c99a3e;
  --crit: #ca6b6b;           /* 4.88:1 on --surface */
  --focus: #d1b07a;
  --control-checked: #5aab7f; /* not brass: brass is reserved for the active nav item and one primary button */
  /* Portal pages are dashboards: they fill the window. (68ch/1200px squeezed .wrap and .wrap.read
     into a centred column, and the old portal widths were 900/1320px.) */
  --w-read: 100%;
  --w-wide: 100%;
}

/*
 * Legacy aliases. The portal pages and portal.css use these names (counted 2026-09-25:
 * --fs-meta 448 uses, --accent 257, --border 225, --muted 188, --mono 188, --faint 181, ...).
 * They resolve to the canonical tokens above, so existing pages restyle without edits.
 * Page-specific names that JS reads as literal strings (instacart: --critical --good --series)
 * are NOT aliased here; those pages keep their own local aliases.
 */
:root, [data-theme="portal"] {
  --sans: var(--font-ui);
  --mono: var(--font-num);
  --display: var(--font-display);
  --panel: var(--surface);
  --panel-2: var(--surface-2);
  --panel2: var(--surface-2);
  --card: var(--surface);
  --card2: var(--surface-2);
  --paper: var(--surface);
  --border: var(--line);
  --border-2: var(--line-strong);
  --border2: var(--line-strong);
  --bd: var(--line);
  --line-2: var(--line-strong);
  --rule: var(--line);
  --tx: var(--text);
  --fg: var(--text);
  --mut: var(--muted);
  --dim: var(--muted);
  --dim2: var(--muted);
  --faint: var(--muted);
  --acc: var(--accent);
  --green: var(--ok);
  --bad: var(--crit);
  --red: var(--crit);
  --amber: var(--warn);
  --r-sm: var(--r-shell);
  --r-md: var(--r-ctl);
  --r-lg: var(--r-shell);
  --fs-3xl: var(--fs-h1);
}