/* GERADO por build-deploy.py a partir de branding/ds/tokens — não edite; a cor é do DESIGN_SYSTEM.md. */
/* NÍVEL 1 — Primitive (DESIGN_SYSTEM.md §3). A rampa crua: só valor, nenhum papel.
   Componente NUNCA consome daqui (§3, regra) — consome o semântico de `colors.css`.
   Toda linha abaixo sai de uma seção da norma; não há cor inventada. */
:root {
  /* Ground — §4 (dark) */
  --slate-950: #080B10;   /* background      */
  --slate-925: #0D1117;   /* surface-1       */
  --slate-900: #151B23;   /* surface-2       */
  --slate-850: #1D2632;   /* surface-3       */
  --slate-800: #202B39;   /* surface-hover   */
  --slate-750: #273244;   /* border          */

  /* Ground — §54 (light) */
  --slate-050: #F7F9FC;
  --white: #FFFFFF;
  --slate-100: #F1F5F9;
  --slate-150: #E8EEF5;
  --slate-250: #D6DEE8;

  /* Ink — §5 e §54 */
  --ink-050: #F3F6FA;
  --ink-200: #A8B3C2;
  --ink-400: #687588;
  --ink-500: #485363;
  --ink-900: #0B1220;
  --ink-700: #475569;

  /* Ink — degraus de TEXTO da Emenda §83.2/§83.3 (medidos) */
  --ink-300: #8C9AAB;     /* text-muted legível sobre surface-hover: 5,00 */
  --ink-600: #576578;     /* text-muted do light: 5,08                   */
  --slate-400: #94A3B8;   /* text-disabled do light — isento de AA (§83.3) */

  /* Enterprise Cyan — §7 */
  --cyan-300: #6AD9E5;
  --cyan-400: #19C2D8;    /* a marca (§6, §84) */
  --cyan-500: #12A8BC;
  --cyan-600: #0F8798;
  --cyan-700: #0C6A78;    /* o degrau do light (§83.3, §83.4) */

  /* AI Violet — §9 */
  --violet-300: #C4B5FD;
  --violet-400: #A78BFA;  /* violeta como TEXTO no dark (§83.2) */
  --violet-500: #8B5CF6;
  --violet-600: #7C3AED;  /* violeta no light (§83.3) */

  /* Severity — §11 (canônico) */
  --rose-500: #F43F5E;
  --orange-400: #FB923C;  /* high como TEXTO sobre o próprio selo no dark: 5,17 (§83.8) */
  --orange-500: #F97316;
  --amber-400: #FBBF24;
  --sky-400: #38BDF8;
  --slate-500: #64748B;
  --emerald-400: #34D399;  /* success como TEXTO sobre o próprio selo no dark: 5,83 (§83.9) */
  --emerald-500: #10B981;

  /* Severity — degraus de texto (§83.2 dark, §83.3 light) */
  --rose-400: #FB7185;
  --slate-350: #8C9DB0;
  --rose-800: #BE123C;
  --rose-900: #9F1239;    /* critical como TEXTO sobre o próprio selo no light: 4,96 (§83.8) */
  --orange-800: #A63709;
  --amber-800: #9A4A08;
  --sky-800: #0369A1;
  --emerald-800: #047857;
  --emerald-900: #065F46;  /* success como TEXTO sobre o próprio selo no light: 5,82 (§83.9) */

  /* Data Visualization — §13 (categorias, nunca severidade) */
  --blue-500: #3B82F6;
  --blue-700: #1D4ED8;   /* o azul como TEXTO no light (§83.3) */
  --teal-500: #14B8A6;
  --lime-400: #A3E635;
  --amber-500: #F59E0B;
  --pink-500: #EC4899;
}
/* NÍVEL 2 — Semantic (DESIGN_SYSTEM.md §3). O papel de cada cor; é daqui que o componente consome.
   Nenhum hex mora neste arquivo: tudo aponta para `primitive.css`, que por sua vez sai da norma.
   Dark é o tema primário (§4); light existe para relatório e ambiente enterprise (§54). */
:root {
  /* ── Ground (§4) ────────────────────────────────────────────────────── */
  --bg-app: var(--slate-950);
  --bg-deep: var(--slate-925);       /* topbar, rodapé, painel lateral, fundo de código */
  --bg-surface: var(--slate-925);    /* surface-1: sidebar e cards                      */
  --bg-elevated: var(--slate-900);   /* surface-2: painéis, inputs                      */
  --bg-overlay: #0D1117F2;
  --bg-inset: var(--slate-950);
  --bg-hover: var(--slate-850);      /* surface-3                                        */
  --bg-active: var(--slate-800);     /* surface-hover                                    */
  --bg-selected: #19C2D81F;          /* seleção = cyan a 12 % (§8)                       */
  --bg-ghost: var(--slate-850);      /* o que sai de foco se MISTURA com isto, nunca alpha */

  --border: var(--slate-750);
  --border-strong: var(--slate-750);
  --border-default: var(--slate-750);
  --border-subtle: var(--slate-850); /* §4 border-subtle */
  --grid: var(--slate-850);

  /* ── Ink (§5) — `--text-tertiary` usa o degrau de texto da §83.2 ────── */
  --text-primary: var(--ink-050);
  --text-secondary: var(--ink-200);
  --text-tertiary: var(--ink-300);
  --text-disabled: var(--ink-500);   /* isento de AA (WCAG 1.4.3) */
  --text-inverse: var(--slate-950);
  --text-link: var(--cyan-400);      /* §8: link é cyan */

  /* ── Acentos: um papel cada (§8, §10) ──────────────────────────────── */
  --accent-action: var(--cyan-400);
  --accent-action-hover: var(--cyan-300);
  --accent-action-press: var(--cyan-500);
  --accent-action-fg: var(--slate-950);   /* tinta escura sobre o cyan */
  --accent-action-weak: #19C2D81F;
  --accent-action-line: #19C2D859;

  /* ── Marca (§84, Emenda 2.0): mark monocromático; o nome em dois tons neutros, nunca na cor da marca.
     O mark segue o degrau de cada fundo (cyan-400 no escuro, cyan-700 no claro); o wordmark, os papéis
     de texto — que já dão os tons do §84 nos dois temas (plan-marca-v2, F1.4). ── */
  --brand-mark: var(--cyan-400);
  --brand-wordmark-coda: var(--text-secondary);
  --brand-wordmark-fort: var(--text-primary);

  /* §8 não dá cor própria a "prova": cyan é a interação e o tracing da plataforma.
     Quem carrega "evidência verificada" é o ciclo de vida (`--state-confirmed`). */
  --accent-proof: var(--cyan-500);
  --accent-proof-hover: var(--cyan-400);
  --accent-proof-press: var(--cyan-600);
  --accent-proof-fg: var(--slate-950);
  --accent-proof-weak: #12A8BC1F;
  --accent-proof-line: #12A8BC59;

  /* §10: violeta é EXCLUSIVO de IA. `-text` é o degrau legível (§83.2). */
  --accent-agent: var(--violet-500);
  --accent-agent-text: var(--violet-400);
  --accent-agent-hover: var(--violet-400);
  --accent-agent-press: var(--violet-600);
  --accent-agent-fg: var(--slate-950);  /* §83.6: branco sobre o violeta dá 4,23 — tinta escura dá 4,65 */
  --accent-agent-weak: #8B5CF61F;
  --accent-agent-line: #8B5CF659;

  /* §8 dá a seleção ao cyan — não há âmbar de seleção. */
  --accent-select: var(--cyan-400);
  --accent-select-weak: #19C2D826;
  --accent-select-line: #19C2D866;

  /* ── Gradientes: só detalhe (§59) ──────────────────────────────────── */
  --action-gradient: linear-gradient(90deg, #19C2D8, #12A8BC);
  --ai-gradient: linear-gradient(90deg, #19C2D8, #8B5CF6);   /* §59: cyan → violet */

  /* ── Severity (§11) + degrau de texto (§83.2) ──────────────────────── */
  --sev-critical: var(--rose-500);
  --sev-critical-text: var(--rose-400);
  --sev-critical-weak: #F43F5E26;
  --sev-critical-line: #F43F5E59;
  --sev-high: var(--orange-500);
  --sev-high-text: var(--orange-400);   /* §83.8: o 500 dava 4,17 sobre o próprio selo */
  --sev-high-weak: #F9731626;
  --sev-high-line: #F9731659;
  --sev-medium: var(--amber-400);
  --sev-medium-text: var(--amber-400);
  --sev-medium-weak: #FBBF2426;
  --sev-medium-line: #FBBF2459;
  --sev-low: var(--sky-400);
  --sev-low-text: var(--sky-400);
  --sev-low-weak: #38BDF826;
  --sev-low-line: #38BDF859;
  --sev-info: var(--slate-500);
  --sev-info-text: var(--slate-400);    /* §83.8: o 350 dava 4,42 sobre o próprio selo */
  --sev-info-weak: #64748B26;
  --sev-info-line: #64748B59;

  /* ── Ciclo de vida: independente da severidade (§34) ───────────────── */
  --state-open: var(--ink-200);
  --state-confirmed: var(--cyan-400);
  --state-suspected: var(--ink-300);
  --state-fixed-pending: var(--cyan-500);
  --state-fixed: var(--emerald-500);
  --state-reopened: var(--rose-500);
  --state-dismissed: #8C9AAB80;
  --state-unexplained: var(--amber-400);
  --state-unreached: var(--slate-350);

  /* ── Feedback (§11) ────────────────────────────────────────────────── */
  --success: var(--emerald-500);
  --success-text: var(--emerald-400);   /* §83.9: o 500 dava 4,42 sobre o próprio selo */
  --success-weak: #10B98126;
  --warning: var(--amber-400);
  --warning-weak: #FBBF2426;
  --danger: var(--rose-500);
  --danger-text: var(--rose-400);    /* §83.6: erro é texto — o canônico dá 3,90 no --bg-active */
  --danger-weak: #F43F5E26;
  --info: var(--cyan-400);
  --info-weak: #19C2D81F;

  /* ── Código (§35) ──────────────────────────────────────────────────── */
  --code-bg: var(--slate-925);
  --code-keyword: var(--violet-400);
  --code-string: var(--cyan-300);
  --code-fn: var(--blue-500);
  --code-comment: var(--ink-300);
  --code-number: var(--amber-400);
  --code-plain: var(--ink-050);
  --code-taint: var(--rose-400);
  --code-line: var(--ink-300);
  --code-highlight: #19C2D824;
}

/* Light (§54) — o significado é o mesmo; o valor muda, pelos degraus da §83.3. */
[data-theme="light"] {
  --bg-app: var(--slate-050);
  --bg-deep: var(--slate-100);
  --bg-surface: var(--white);
  --bg-elevated: var(--slate-100);
  --bg-overlay: #FFFFFFF2;
  --bg-inset: var(--slate-050);
  --bg-hover: var(--slate-150);
  --bg-active: var(--slate-150);
  --bg-selected: #0C6A781F;
  --bg-ghost: var(--slate-150);

  --border: var(--slate-250);
  --border-strong: var(--slate-250);
  --border-default: var(--slate-250);
  --border-subtle: var(--slate-150);
  --grid: var(--slate-150);

  --text-primary: var(--ink-900);
  --text-secondary: var(--ink-700);
  --text-tertiary: var(--ink-600);
  --text-disabled: var(--slate-400);
  --text-inverse: var(--white);
  --text-link: var(--cyan-700);

  --accent-action: var(--cyan-700);
  --accent-action-hover: var(--cyan-600);
  --accent-action-press: var(--cyan-700);
  --accent-action-fg: var(--white);
  --brand-mark: var(--cyan-700);
  /* Repetidos aqui, e não só herdados: propriedade customizada herda o valor JÁ resolvido, e um trecho com
     data-theme="light" dentro da página escura (o cabeçalho impresso da plataforma) levaria o nome nos
     tons do escuro — o "fort" quase branco sobre o papel (plan-marca-v2, F3.5). */
  --brand-wordmark-coda: var(--text-secondary);
  --brand-wordmark-fort: var(--text-primary);
  --accent-proof: var(--cyan-700);
  --accent-proof-hover: var(--cyan-600);
  --accent-proof-fg: var(--white);

  --accent-agent: var(--violet-600);
  --accent-agent-text: var(--violet-600);
  --accent-agent-hover: var(--violet-500);
  --accent-agent-fg: var(--white);

  --accent-select: var(--cyan-700);

  --action-gradient: linear-gradient(90deg, #0C6A78, #0F8798);
  --ai-gradient: linear-gradient(90deg, #0C6A78, #7C3AED);

  --sev-critical: var(--rose-800);
  --sev-critical-text: var(--rose-900);   /* §83.8: o 800 dava 4,48 sobre o próprio selo */
  --sev-high: var(--orange-800);
  --sev-high-text: var(--orange-800);
  --sev-medium: var(--amber-800);
  --sev-medium-text: var(--amber-800);
  --sev-low: var(--sky-800);
  --sev-low-text: var(--sky-800);
  --sev-info: var(--ink-600);
  --sev-info-text: var(--ink-700);        /* §83.8: o 600 dava 4,29 sobre o próprio selo */

  --state-open: var(--ink-700);
  --state-confirmed: var(--cyan-700);
  --state-suspected: var(--ink-600);
  --state-fixed-pending: var(--cyan-700);
  --state-fixed: var(--emerald-800);
  --state-reopened: var(--rose-800);
  --state-dismissed: #57657880;
  --state-unexplained: var(--amber-800);
  --state-unreached: var(--ink-600);

  --success: var(--emerald-800);
  --success-text: var(--emerald-900);   /* §83.9: o 800 dava 4,15 sobre o próprio selo */
  --warning: var(--amber-800);
  --danger: var(--rose-800);
  --danger-text: var(--rose-800);    /* no light o canônico já dá 8,02 no branco: sem degrau próprio */
  --info: var(--cyan-700);

  --code-bg: var(--white);
  --code-keyword: var(--violet-600);
  --code-string: var(--cyan-700);
  --code-fn: var(--blue-700);
  --code-comment: var(--ink-600);
  --code-number: var(--amber-800);
  --code-plain: var(--ink-900);
  --code-taint: var(--rose-800);
  --code-line: var(--ink-600);
  --code-highlight: #0C6A7814;
}
/* NÍVEL 2 — tipografia (DESIGN_SYSTEM.md §17 e §18). Escala fechada: 12 · 13 · 14 · 16 · 18 · 20 ·
   24 · 30 · 36, com 14px de padrão. Número é sempre mono e tabular (§18). */
:root {
  --text-hero-size: 36px;      /* hero metric   */
  --text-hero-lh: 42px;
  --text-display-size: 30px;   /* major metric  */
  --text-display-lh: 36px;
  --text-display-weight: 600;
  --text-display-track: -0.02em;

  --text-title-size: 24px;     /* page title    */
  --text-title-lh: 30px;
  --text-title-weight: 600;
  --text-title-track: -0.015em;

  --text-panel-size: 20px;     /* panel title   */
  --text-panel-lh: 26px;

  --text-heading-size: 18px;   /* section title */
  --text-heading-lh: 24px;
  --text-heading-weight: 600;
  --text-heading-track: -0.01em;

  --text-lead-size: 16px;      /* body / valor importante */
  --text-lead-lh: 24px;

  --text-body-size: 14px;      /* padrão (§17)  */
  --text-body-lh: 20px;
  --text-body-weight: 400;

  --text-small-size: 13px;     /* compact UI    */
  --text-small-lh: 18px;

  --text-micro-size: 12px;     /* metadata      */
  --text-micro-lh: 16px;

  /* Rótulo de seção e coluna: mono, caixa alta, tracking aberto. */
  --text-label-size: 12px;
  --text-label-lh: 16px;
  --text-label-weight: 500;
  --text-label-track: 0.08em;

  --text-metric-size: 30px;
  --text-metric-lh: 36px;
  --text-metric-weight: 500;
  --text-metric-track: -0.02em;
  --text-code-size: 13px;
  --text-code-lh: 20px;
  --numeric-features: "tnum" 1, "zero" 1;
}
/* Tipografia da norma (DESIGN_SYSTEM.md §16): Geist Sans na interface, Geist Mono em dado técnico e
   Chivo 600 só como fonte de marca (wordmark e título de peça/capa; marca 2.0, §84).
   Este @import serve só aos specimens do DS (HTML solto). Nenhuma UI da suíte copia este arquivo:
   elas vendorizam as mesmas famílias (CSP `font-src 'self'`, sem CDN). */

:root {
  --font-sans: "Geist", Inter, ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Geist Mono", "SFMono-Regular", Consolas, ui-monospace, monospace;
  --font-brand: "Chivo", var(--font-sans);
}
/* NÍVEL 2 — espaço e forma (DESIGN_SYSTEM.md §19, §20, §21).
   Base 4px e escala fechada: 4 8 12 16 20 24 32 40 48 64. Não existe espaçamento fora dela (§72). */
:root {
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 8px;
  --space-5: 12px;
  --space-6: 16px;
  --space-7: 20px;
  --space-8: 24px;
  --space-9: 32px;
  --space-10: 40px;
  --space-11: 48px;
  --space-12: 64px;

  /* §20 — raios; o padrão é 8px. Pill só em tag, badge, status e filtro. */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 16px;
  --radius-pill: 999px;

  /* §21 — borda de 1px é a regra; 2px só no focus (§56). */
  --border-w: 1px;
  --border-w-strong: 2px;

  /* Chassi da aplicação (§24 sidebar, §25 header, §64 split-view) */
  --rail-w: 48px;
  --sidebar-w: 232px;
  --sidebar-w-collapsed: 52px;
  --topbar-h: 48px;
  --statusbar-h: 32px;
  --subbar-h: 40px;
  --panel-w: 40%;
  --panel-w-min: 400px;
  --panel-w-max: 600px;
  --content-max: 1440px;
}
/* NÍVEL 2 — elevação, foco e vidro (DESIGN_SYSTEM.md §22, §23, §56).
   A interface é plana: hierarquia vem de superfície + borda, não de sombra. Sombra só em modal,
   popover, command palette, drawer e menu flutuante. */
:root {
  --shadow-none: none;
  --shadow-sm: 0 1px 2px #00000066;
  --shadow-md: 0 4px 16px #00000073, 0 0 0 1px var(--border);
  --shadow-lg: 0 24px 64px #000000A6, 0 0 0 1px var(--border-strong);
  --hairline-top: inset 0 1px 0 #FFFFFF0A;

  /* §56 — 2px cyan com offset. */
  --focus-ring: 0 0 0 2px var(--bg-app), 0 0 0 4px var(--accent-action);
  --ring-proof: 0 0 0 1px var(--accent-proof-line);
  --ring-agent: 0 0 0 1px var(--accent-agent-line);

  --scrim: #080B10B8;
  --blur-overlay: blur(8px) saturate(1.1);

  /* §23 — glow SÓ em: IA processando, attack path vivo, nó selecionado, scan em tempo real.
     Nunca decoração permanente. */
  --glow: 0 0 16px #19C2D859;
  --glow-soft: 0 0 32px #19C2D826;
  --glow-ai: 0 0 16px #8B5CF659;

  /* Vidro: o que flutua sobre o canvas do grafo. */
  --glass-bg: #151B23E6;
  --glass-blur: blur(4px);
  --glass-strong-bg: #0D1117F2;
  --glass-strong-blur: blur(12px);
}

[data-theme="light"] {
  --shadow-sm: 0 1px 2px #0B122014;
  --shadow-md: 0 4px 12px #0B122014, 0 0 0 1px var(--border);
  --shadow-lg: 0 18px 48px #0B12201F, 0 0 0 1px var(--border);
  --hairline-top: inset 0 1px 0 #FFFFFF;
  --scrim: #0B122047;
  --glass-bg: #F1F5F9E6;
  --glass-strong-bg: #FFFFFFF2;
  --glow: 0 0 16px #0C6A7840;
  --glow-soft: 0 0 32px #0C6A7820;
  --glow-ai: 0 0 16px #7C3AED40;
}
