/**
 * Tokens extraídos do mock Lexora/Flexora (JPEG 1024×584).
 * Amostras reais (System.Drawing), não paleta chutada.
 * NUNCA usar roxo #9146FF.
 *
 * Acento neon (barras / spark / glow): #E20435 (mais saturado da print)
 * Média top-40 vermelhos: #D80833
 * Botão (amostra JPEG, um pouco mais fundo): #A61536 — fill visual = #E20435
 * Fundo: #050003 / #0B0004 / #000000
 * Sidebar: #1E030A / #26030A
 * Card: #200006 / #1D0005 / #120306
 * Borda card: #420C1A
 * Nav ativo: #7F051C → transparente
 * Label métrica (rose): #AD8E93 / #998B8A
 * Subtítulo: #A1A1A1
 * Laranja donut: #F4901E
 * Verde (anti-alias): ~#63AA82 — token nítido #2ECC71
 */

/* @font-face "Flamante Serif" vive em views/partials/head.ejs com ?v=appVersion
   (URL sem query fazia o browser reter TTF FFP com dígitos → .notdef / tofu). */

:root {
  --font-sans: "Inter", "Montserrat", "SF Pro Display", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-brand: "Flamante Serif", "Inter", system-ui, sans-serif;
  --font-mono: "Fira Code", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --bg: #050003;
  --bg-deep: #000000;
  --bg-sidebar: #140208;
  --bg-sidebar-top: #1e030a;
  --bg-glow: rgba(226, 4, 53, 0.16);

  --surface: rgba(32, 0, 6, 0.78);
  --surface-2: #120306;
  --surface-3: #1d0005;
  --surface-solid: #180105;
  --surface-grad: linear-gradient(180deg, rgba(38, 4, 12, 0.82) 0%, rgba(14, 1, 4, 0.7) 100%);

  --accent: #e20435;
  --accent-hot: #de0230;
  --accent-deep: #a61536;
  --accent-nav: #7f051c;
  --accent-glow: rgba(226, 4, 53, 0.38);
  --accent-glow-soft: rgba(226, 4, 53, 0.14);
  --accent-border: rgba(226, 4, 53, 0.16);
  --accent-hairline: rgba(66, 12, 26, 0.85);
  --accent-fill-soft: rgba(226, 4, 53, 0.12);

  --text: #ffffff;
  --text-secondary: #a1a1a1;
  --text-muted: #8c7d7e;
  --text-rose: #ad8e93;

  --success: #2ecc71;
  --success-soft: #88d3aa;
  --warning: #f4901e;
  --error: #e20435;

  --radius-card: 11px;
  --radius-btn: 10px;
  --radius-pill: 999px;
  --radius-search: 12px;

  --canvas-w: 1024;
  --canvas-h: 584;
  --sidebar-pct: 11.5%;
  --sidebar-min: 128px;
  --content-pad: clamp(18px, calc(100vw * 38 / var(--canvas-w)), 44px);
  --gutter-ratio: 15.2;
  --metric-aspect: 1.96 / 1;

  --shadow-card:
    0 12px 40px rgba(0, 0, 0, 0.5),
    0 0 28px var(--accent-glow-soft),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --shadow-btn: 0 4px 22px var(--accent-glow);
  --upgrade-grad: linear-gradient(160deg, #5a0a1c 0%, #2a0510 48%, #120206 100%);
  --active-nav-grad: linear-gradient(
    90deg,
    rgba(226, 4, 53, 0.55) 0%,
    rgba(226, 4, 53, 0.18) 42%,
    transparent 100%
  );

  --glass-blur: 16px;
}