/* =====================================================================
   Sentinela Security — Colors & Type Foundation
   Source of truth for all design tokens. Import this in every artifact.
   ===================================================================== */

/* ---------- Fonts ------------------------------------------------------
   Primary typeface: Poppins (geometric sans-serif) — matches logo.
   Loaded from Google Fonts as a substitute until original .ttf files
   are provided by the brand team.
------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,500&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ============ CORE BRAND ============ */
  --brand-ink:    #0F1010;  /* Wordmark color — warm near-black */
  --brand-indigo: #30378D;  /* Primary accent — tagline/indigo */
  --brand-paper:  #FFFFFF;  /* Canvas */

  /* ============ INDIGO SCALE ============
     Derived from --brand-indigo via lightness stops.
     Use indigo-500 as the canonical brand accent. */
  --indigo-50:  #EEEFF7;
  --indigo-100: #D6D8EC;
  --indigo-200: #ADB1D9;
  --indigo-300: #848AC6;
  --indigo-400: #5B63B3;
  --indigo-500: #30378D;   /* = --brand-indigo */
  --indigo-600: #262C73;
  --indigo-700: #1D2258;
  --indigo-800: #14183E;
  --indigo-900: #0B0D24;

  /* ============ NEUTRAL SCALE ============
     Warm-tinted greys. Slight +R over G/B to harmonize with --brand-ink. */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #FAFAFA;
  --neutral-100: #F3F3F3;
  --neutral-200: #E7E7E8;
  --neutral-300: #D0D0D2;
  --neutral-400: #A8A8AB;
  --neutral-500: #76767A;
  --neutral-600: #525256;
  --neutral-700: #353538;
  --neutral-800: #1E1E20;
  --neutral-900: #0F1010;  /* = --brand-ink */

  /* ============ SEMANTIC (RISK/STATUS) ============
     Security domain — these map to threat severity levels. */
  --risk-critical: #B42318;  /* P0 / active incident */
  /* ---------- SÉRIES DE GRÁFICO (validadas, não escolhidas a olho) --------
     Rodado em `dataviz/scripts/validate_palette.js` contra as duas superfícies:
       · `--brand-indigo` (#30378D) FALHA a faixa de luminosidade no claro
         (L 0.386): escuro demais para marca de gráfico. Era a cor das barras de
         "Entradas" e da linha de estoque — parte do aspecto abafado que o dono
         reportou ("muito no mesmo tom").
       · `--indigo-300` (#848AC6) FALHA o piso de croma no escuro (0.09): lê
         como CINZA. Seria o caminho óbvio para clarear.
       · `--indigo-400` (#5B63B3) passa os seis checks nos DOIS modos com o teal
         (ΔE deutan 18.8 no claro / 10.6 no escuro; normal 23.2 / 18.0).
     `--chart-stock` é INK, não uma terceira matiz: o estoque é o resultado dos
     dois fluxos, não uma categoria irmã deles — pintá-lo com hue própria
     sugeriria uma terceira coisa medida. */
  --chart-flow-in:  #5B63B3;
  --chart-flow-out: #04A57F;
  --chart-stock:    #525256;
  --chart-plot-bg:  #FAFAFA;
  --chart-grid:     #E7E7E8;
  --risk-high:     #DC6803;  /* P1 / high exposure */
  --risk-medium:   #B54708;  /* P2 / attention */
  --risk-low:      #027A48;  /* Resolved / healthy */
  --risk-info:     #30378D;  /* Informational / brand indigo */

  --risk-critical-bg: #FEF3F2;
  --risk-high-bg:     #FFFAEB;
  --risk-medium-bg:   #FEF6EE;
  --risk-low-bg:      #ECFDF3;
  --risk-info-bg:     #EEEFF7;

  /* ============ SURFACE / FOREGROUND (semantic) ============ */
  --bg:            var(--neutral-0);
  --bg-subtle:     var(--neutral-50);
  --bg-muted:      var(--neutral-100);
  --bg-inverted:   var(--neutral-900);
  --bg-brand:      var(--indigo-500);

  --fg:            var(--neutral-900);   /* primary text */
  --fg-muted:      var(--neutral-600);   /* secondary */
  --fg-subtle:     var(--neutral-500);   /* tertiary / captions */
  --fg-disabled:   var(--neutral-400);
  --fg-inverted:   var(--neutral-0);
  --fg-brand:      var(--indigo-500);
  --fg-on-brand:   var(--neutral-0);

  --border:        var(--neutral-200);
  --border-strong: var(--neutral-300);
  --border-brand:  var(--indigo-500);

  /* Gradiente do card "hero" escuro (Dashboard de Mobilização, Board).
     Token único em vez de repetir os hex #0F1010/#14183E em cada view
     (DESIGN_BOARD_UX.md §4.1, "dívida a resolver junto"). */
  --surface-hero: linear-gradient(135deg, #0F1010 0%, #14183E 100%);

  /* ============ TYPOGRAPHY ============ */
  --font-sans: 'Poppins', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --font-display: var(--font-sans); /* Poppins at heavy weight serves display role */

  /* Type scale (modular, 1.25 ratio on desktop) */
  --text-xs:   12px;  /* captions, labels */
  --text-sm:   14px;  /* supporting text */
  --text-base: 16px;  /* body */
  --text-md:   18px;  /* lead */
  --text-lg:   20px;  /* h5 */
  --text-xl:   24px;  /* h4 */
  --text-2xl:  30px;  /* h3 */
  --text-3xl:  38px;  /* h2 */
  --text-4xl:  48px;  /* h1 */
  --text-5xl:  64px;  /* display-sm */
  --text-6xl:  84px;  /* display-lg */

  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-tight:  -0.02em;  /* used on display / large type */
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;   /* uppercase eyebrows */
  --tracking-wider:  0.08em;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  /* ============ SPACING (4px base) ============ */
  --space-0:  0;
  --space-1:  4px;
  --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;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ============ RADII ============ */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-xl:   14px;
  --radius-2xl:  20px;
  --radius-pill: 9999px;

  /* ============ SHADOWS ============
     Low-key, functional. No dreamy glows. */
  --shadow-xs: 0 1px 2px 0 rgba(15, 16, 16, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(15, 16, 16, 0.08), 0 1px 2px -1px rgba(15, 16, 16, 0.06);
  --shadow-md: 0 4px 8px -2px rgba(15, 16, 16, 0.08), 0 2px 4px -2px rgba(15, 16, 16, 0.06);
  --shadow-lg: 0 12px 20px -4px rgba(15, 16, 16, 0.10), 0 4px 8px -4px rgba(15, 16, 16, 0.06);
  --shadow-xl: 0 24px 40px -8px rgba(15, 16, 16, 0.14), 0 8px 16px -8px rgba(15, 16, 16, 0.08);
  --shadow-focus: 0 0 0 3px rgba(48, 55, 141, 0.25);  /* focus ring */

  /* ============ MOTION ============ */
  --ease-standard: cubic-bezier(0.2, 0.0, 0.0, 1.0);
  --ease-emphasis: cubic-bezier(0.3, 0.0, 0.1, 1.0);
  --duration-fast:   120ms;
  --duration-normal: 200ms;
  --duration-slow:   320ms;

  /* ============ LAYOUT ============ */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1440px;
}

/* =====================================================================
   Semantic base styles — opinionated defaults for any artifact that
   imports this stylesheet.
   ===================================================================== */
html, body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display / Hero — used for landing & slide titles */
.display-lg {
  font-family: var(--font-display);
  font-size: var(--text-6xl);
  font-weight: var(--fw-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}
.display-sm {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: var(--fw-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

h1, .h1 {
  font-size: var(--text-4xl);
  font-weight: var(--fw-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  margin: 0 0 var(--space-4);
}
h2, .h2 {
  font-size: var(--text-3xl);
  font-weight: var(--fw-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg);
  margin: 0 0 var(--space-3);
}
h3, .h3 {
  font-size: var(--text-2xl);
  font-weight: var(--fw-semibold);
  line-height: var(--leading-snug);
  color: var(--fg);
  margin: 0 0 var(--space-3);
}
h4, .h4 {
  font-size: var(--text-xl);
  font-weight: var(--fw-semibold);
  line-height: var(--leading-snug);
  color: var(--fg);
  margin: 0 0 var(--space-2);
}
h5, .h5 {
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--leading-snug);
  color: var(--fg);
  margin: 0 0 var(--space-2);
}

p, .p {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--fg);
  margin: 0 0 var(--space-4);
  text-wrap: pretty;
}
.lead {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--fg-muted);
}
.caption {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg-muted);
}

/* Eyebrow / Label — ALL-CAPS, tracked. Common Sentinela motif. */
.eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--fg-brand);
}

code, kbd, .code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-muted);
  border: 1px solid var(--border);
  padding: 0.12em 0.35em;
  border-radius: var(--radius-sm);
  color: var(--fg);
}

/* Links */
a {
  color: var(--fg-brand);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: color var(--duration-fast) var(--ease-standard);
}
a:hover { color: var(--indigo-600); }
a:active { color: var(--indigo-700); }

/* Focus ring — always visible for accessibility */
:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-sm);
}

/* =====================================================================
   EXTENSÃO 2026.07 — Sentinela Nexo (aditiva, não quebra tokens acima)
   ===================================================================== */
:root {
  /* ============ Z-INDEX SCALE ============ */
  --z-deco:    1;   /* linhas de grid, régua, feixe */
  --z-mark:    3;   /* regmarks, fólios */
  --z-content: 4;   /* conteúdo sobre a atmosfera */
  --z-probe:   5;   /* retícula do cursor */
  --z-scrim:   40;
  --z-drawer:  50;
  --z-modal:   60;
  --z-grain:   80;  /* overlay de textura, pointer-events:none */

  /* ============ MOTION (extensão) ============ */
  --duration-slower:     480ms;
  --duration-deliberate: 700ms;
  --stagger: 40ms;
  --scan-period: 16s;    /* ciclo completo da varredura */
  --scan-travel: 6.4s;   /* tempo de travessia do feixe (40% do ciclo) */

  color-scheme: light;
}

/* ============ DARK THEME ============
   Mesmos valores do app interno (app.css) para paridade visual.
   Ativado via data-theme; páginas sem app.css (login) herdam daqui. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:            #0B0D14;
  --bg-subtle:     #0F1220;
  --bg-muted:      #161A2B;
  --bg-inverted:   #FFFFFF;

  --fg:            #ECEDF3;
  --fg-muted:      #9CA0B5;
  /* 5.71:1 sobre --bg: suficiente para texto auxiliar em tamanho normal. */
  --fg-subtle:     #858AA5;
  --fg-disabled:   #4A4D66;
  --fg-inverted:   #0F1010;
  --fg-brand:      #848AC6;
  --fg-on-brand:   #FFFFFF;

  --border:        #232842;
  --border-strong: #2F3556;
  --border-brand:  #5B63B3;

  --neutral-0:   #131626;
  --neutral-50:  #161A2B;
  --neutral-100: #1A1F33;
  --neutral-200: #232842;
  --neutral-300: #2F3556;
  --neutral-400: #4A4D66;
  --neutral-500: #858AA5;
  --neutral-600: #9CA0B5;
  --neutral-700: #C3C6D6;
  --neutral-800: #E1E2EC;
  --neutral-900: #ECEDF3;

  --risk-critical-bg: rgba(180,35,24,0.14);
  --risk-high-bg:     rgba(220,104,3,0.14);
  --risk-medium-bg:   rgba(181,71,8,0.14);
  --risk-low-bg:      rgba(4,165,127,0.14);
  --risk-info-bg:     rgba(48,55,141,0.22);

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.45);
  --shadow-lg: 0 12px 28px rgba(0,0,0,0.5);
  --shadow-focus: 0 0 0 3px rgba(132,138,198,0.35);

  --risk-low: #04A57F;
  --risk-critical: #E05B50;
  /* Séries de gráfico — o modo escuro é ESCOLHIDO, não um espelho do claro.
     `--chart-flow-in` é o mesmo degrau nos dois modos porque foi o único que
     passou os seis checks em ambas as superfícies (ver o bloco no tema claro). */
  --chart-flow-in:  #5B63B3;
  --chart-flow-out: #04A57F;
  --chart-stock:    #C3C6D6;
  --chart-plot-bg:  rgba(255,255,255,0.04);
  --chart-grid:     rgba(255,255,255,0.10);

  /* No tema escuro o fundo da página já é quase preto (#0B0D14) — repetir
     o MESMO gradiente #0F1010→#14183E faria o card "hero" se fundir no
     fundo e perder o contraste que é a razão dele existir (§4.1, "checar
     tema escuro"). Sobe um degrau na escala indigo e ganha borda própria. */
  --surface-hero: linear-gradient(135deg, #1A1F3D 0%, #2F3670 100%);
}

:root[data-theme="dark"] ::selection { background: #2F3556; color: #ECEDF3; }