/* ===========================================================================
   AutoCops Netgraph — brand theme
   AUTO-GENERATED by build/generate_theme.py from build/tokens.json
   Source: docs/autocops_netgraph_logo.svg
   Generated: 2026-05-26 10:29 UTC
   Do NOT edit by hand — edit tokens.json and rerun the generator.
   =========================================================================== */

:root {
  /* --- raw brand (from logo) --- */
  --ng-blue: #1E73EA;
  --ng-blue-deep: #1976D2;
  --ng-blue-royal: #1F41AF;
  --ng-azure: #1893D8;
  --ng-teal: #16A89C;
  --ng-green: #13A35E;
  --ng-green-bright: #26C281;
  --ng-navy: #1A2D5A;

  /* --- brand as rgb triplets (for rgba() use) --- */
  --ng-blue-rgb: 30, 115, 234;
  --ng-teal-rgb: 22, 168, 156;
  --ng-green-rgb: 19, 163, 94;
  --ng-navy-rgb: 26, 45, 90;

  /* --- derived brand tints/shades --- */
  --ng-blue-100: #E4EEFC;
  --ng-blue-200: #C0D8F9;
  --ng-blue-300: #8EB9F4;
  --ng-blue-600: #1A65CE;
  --ng-blue-700: #1653A8;
  --ng-teal-100: #E3F5F3;
  --ng-teal-200: #BEE7E3;
  --ng-teal-300: #8AD4CE;
  --ng-teal-600: #139489;
  --ng-teal-700: #107970;
  --ng-green-100: #E3F4EC;
  --ng-green-200: #BDE5D2;
  --ng-green-300: #89D1AE;
  --ng-green-600: #118F53;
  --ng-green-700: #0E7544;

  /* --- signature gradients --- */
  --ng-grad-main: linear-gradient(135deg, #1E73EA, #1893D8, #16A89C, #13A35E);
  --ng-grad-rim: linear-gradient(135deg, #4DA3F0, #3FB8C6, #3FCB85);
  --ng-grad-text: linear-gradient(90deg, #1976D2, #26C281);
  --ng-grad-hero: linear-gradient(160deg, #0A2A66, #0E3B86, #103E7E);

  /* --- radii / shadows / type / layout --- */
  --ng-radius-sm: 8px;
  --ng-radius-md: 14px;
  --ng-radius-lg: 22px;
  --ng-radius-pill: 999px;
  --ng-shadow-sm: 0 1px 2px rgba(11,18,32,.06), 0 1px 3px rgba(11,18,32,.08);
  --ng-shadow-md: 0 6px 18px rgba(11,18,32,.08), 0 2px 6px rgba(11,18,32,.06);
  --ng-shadow-lg: 0 24px 60px rgba(11,18,32,.14), 0 8px 24px rgba(11,18,32,.10);
  --ng-shadow-glow: 0 18px 50px rgba(22,168,156,.22);
  --ng-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --ng-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ng-maxw: 1180px;
  --ng-gutter: clamp(20px, 5vw, 56px);

  /* --- semantic neutrals (light, default) --- */
  --ng-ink: #0B1220;
  --ng-ink-soft: #1A2D5A;
  --ng-slate: #3F4F66;
  --ng-muted: #5B6A82;
  --ng-line: #DCE5EF;
  --ng-line-strong: #C5D2E1;
  --ng-surface: #FFFFFF;
  --ng-surface-alt: #F4F8FC;
  --ng-surface-sunken: #EAF1F8;

  /* --- semantic roles (light) --- */
  --ng-link: #1565C0;
  --ng-link-strong: #0E4A99;
  --ng-accent: #0E7F75;
  --ng-success: #118F53;
  --ng-success-strong: #0E7544;
  --ng-highlight-row: #E3F5F3;
  --ng-highlight-row-ink: #0B1220;
  --ng-code-panel: #0F2552;
  --ng-code-panel-ink: #E8EEF6;
  --ng-code-panel-dim: #A8B6CC;

  /* --- corporate-blue palette (used by hero + context-graph band) --- */
  --ng-hero-top: #0A2A66;
  --ng-hero-mid: #0E3B86;
  --ng-hero-bot: #103E7E;
  --ng-hero-accent: #6FB1FF;
  --ng-hero-ink: #FFFFFF;
  --ng-hero-ink-soft: #CFE0FF;
  --ng-hero-line: #264F95;
  --ng-hero-chip-bg: rgba(255,255,255,.08);
  --ng-hero-chip-border: rgba(255,255,255,.22);

  /* --- ui chrome (theme-stable across light/dark) --- */
  --ng-white: #FFFFFF;
  --ng-black: #000000;
  --ng-window-red: #EF6A5E;
  --ng-window-amber: #F3BD4E;
  --ng-danger: #D14343;
  color-scheme: light;
}

/* --- dark palette: auto (system) + explicit [data-theme=dark] --- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
  /* semantic overrides for dark */
  --ng-ink: #F3F7FC;
  --ng-ink-soft: #C7D2E3;
  --ng-slate: #A8B6CC;
  --ng-muted: #8593AC;
  --ng-line: #26334F;
  --ng-line-strong: #35466A;
  --ng-surface: #0B1220;
  --ng-surface-alt: #121C36;
  --ng-surface-sunken: #0A1124;
  /* roles (dark) */
  --ng-link: #6FB1FF;
  --ng-link-strong: #A9CCFF;
  --ng-accent: #5CD6C6;
  --ng-success: #4ED38A;
  --ng-success-strong: #7BE3A8;
  --ng-highlight-row: #143B3A;
  --ng-highlight-row-ink: #F3F7FC;
  --ng-code-panel: #04102A;
  --ng-code-panel-ink: #E8EEF6;
  --ng-code-panel-dim: #94A3B8;
  /* shadows (dark) */
  --ng-shadow-sm: 0 1px 2px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.55);
  --ng-shadow-md: 0 8px 20px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.45);
  --ng-shadow-lg: 0 28px 64px rgba(0,0,0,.65), 0 10px 28px rgba(0,0,0,.55);
  --ng-shadow-glow: 0 18px 50px rgba(92, 214, 198,.28);
  /* corporate-blue overrides (dark) */
  --ng-hero-top: #061833;
  --ng-hero-mid: #0A2456;
  --ng-hero-bot: #0C2E68;
  --ng-hero-accent: #3F8DF0;
  --ng-hero-ink: #F3F7FC;
  --ng-hero-ink-soft: #B7CDED;
  --ng-hero-line: #1B3568;
  --ng-hero-chip-bg: rgba(255,255,255,.06);
  --ng-hero-chip-border: rgba(255,255,255,.20);
  --ng-grad-hero: linear-gradient(160deg, #061833, #0A2456, #0C2E68);
  color-scheme: dark;
  }
}
[data-theme='dark'] {
  /* semantic overrides for dark */
  --ng-ink: #F3F7FC;
  --ng-ink-soft: #C7D2E3;
  --ng-slate: #A8B6CC;
  --ng-muted: #8593AC;
  --ng-line: #26334F;
  --ng-line-strong: #35466A;
  --ng-surface: #0B1220;
  --ng-surface-alt: #121C36;
  --ng-surface-sunken: #0A1124;
  /* roles (dark) */
  --ng-link: #6FB1FF;
  --ng-link-strong: #A9CCFF;
  --ng-accent: #5CD6C6;
  --ng-success: #4ED38A;
  --ng-success-strong: #7BE3A8;
  --ng-highlight-row: #143B3A;
  --ng-highlight-row-ink: #F3F7FC;
  --ng-code-panel: #04102A;
  --ng-code-panel-ink: #E8EEF6;
  --ng-code-panel-dim: #94A3B8;
  /* shadows (dark) */
  --ng-shadow-sm: 0 1px 2px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.55);
  --ng-shadow-md: 0 8px 20px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.45);
  --ng-shadow-lg: 0 28px 64px rgba(0,0,0,.65), 0 10px 28px rgba(0,0,0,.55);
  --ng-shadow-glow: 0 18px 50px rgba(92, 214, 198,.28);
  /* corporate-blue overrides (dark) */
  --ng-hero-top: #061833;
  --ng-hero-mid: #0A2456;
  --ng-hero-bot: #0C2E68;
  --ng-hero-accent: #3F8DF0;
  --ng-hero-ink: #F3F7FC;
  --ng-hero-ink-soft: #B7CDED;
  --ng-hero-line: #1B3568;
  --ng-hero-chip-bg: rgba(255,255,255,.06);
  --ng-hero-chip-border: rgba(255,255,255,.20);
  --ng-grad-hero: linear-gradient(160deg, #061833, #0A2456, #0C2E68);
  color-scheme: dark;
}