/* Mesma tipografia do site institucional (grupoodin.com.br): Bebas Neue para títulos/rótulos
   de marca, Nunito para o corpo do texto — ver --font-display / --font-sans abaixo. */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Nunito:wght@300;400;600;700;800&display=swap');

:root {
  /* Brand ramp — off #fb3602 */
  --color-primary-50: #fff1ed;
  --color-primary-100: #ffe0d6;
  --color-primary-200: #ffc2ad;
  --color-primary-300: #ff9d7a;
  --color-primary-400: #fd6f42;
  --color-primary-500: #fb3602;
  --color-primary-600: #d92e00;
  --color-primary-700: #b02500;
  --color-primary-800: #871c00;
  --color-primary-900: #5e1300;
  --color-primary: var(--color-primary-500);
  --color-primary-bright: #ff5a2e;

  /* Gradient (buttons, brand mark, glow blobs) — stays inside the brand hue family */
  --gradient-brand: linear-gradient(135deg, #ff7a3d 0%, #fb3602 55%, #c92600 100%);
  --glow-1: rgba(251, 54, 2, 0.24);
  --glow-2: rgba(251, 54, 2, 0.16);
  --glow-3: rgba(255, 90, 46, 0.12);

  /* Neon accent — dedicated hot-red for chart lines, hover glows and "critical value" callouts.
     Distinct from --color-primary (brand button/link orange) and --color-danger (status red) so
     none of the three impersonate each other. */
  --color-neon: #ff2d4d;
  --color-neon-dim: rgba(255, 45, 77, 0.5);
  --shadow-neon-sm: 0 0 8px rgba(255, 45, 77, 0.55);
  --shadow-neon: 0 0 16px rgba(255, 45, 77, 0.55), 0 0 42px rgba(255, 45, 77, 0.22);
  --shadow-neon-brand-sm: 0 0 10px rgba(251, 54, 2, 0.55);
  --shadow-neon-brand: 0 0 18px rgba(251, 54, 2, 0.5), 0 0 46px rgba(251, 54, 2, 0.22);

  /* Dark surfaces (default theme) */
  --color-gray-0: #ffffff;
  --color-gray-50: #f8f9fa;
  --color-gray-100: #f1f3f5;
  --color-gray-150: #eceef0;
  --color-gray-200: #e9ecef;
  --color-gray-300: #dee2e6;
  --color-gray-400: #ced4da;
  --color-gray-500: #adb5bd;
  --color-gray-600: #8b8880;
  --color-gray-700: #c3c2b7;
  --color-gray-800: #e7e5e1;
  --color-gray-900: #f5f3f1;

  --surface-page: #0d0c0b;
  --surface-card: #171513;
  --surface-card-raised: #1e1b18;
  --surface-sidebar: #0a0908;
  --surface-sidebar-active: #201a16;
  --text-body: #f2f0ed;
  --text-muted: #a29d95;
  --text-inverse: #ffffff;
  --border-subtle: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);

  /* Generic tinted overlays (hover states, subtle washes, collapsed-sidebar icon chips) — flip
     from a white tint to a black tint in the light theme override below, so every consumer that
     uses these instead of a literal rgba() automatically adapts. */
  --overlay-faint: rgba(255, 255, 255, 0.03);
  --overlay-soft: rgba(255, 255, 255, 0.06);
  --overlay-mid: rgba(255, 255, 255, 0.08);
  --overlay-strong: rgba(255, 255, 255, 0.2);

  /* Translucent "glass" card (login screens) and the faint backdrop grid line color. */
  --surface-glass: rgba(23, 21, 19, 0.82);
  --grid-line: rgba(255, 255, 255, 0.025);

  /* Semantic — validated for the dark surface (see references/palette.md pattern) */
  --color-success: #2fd88a;
  --color-success-bg: rgba(47, 216, 138, 0.14);
  --color-warning: #fab219;
  --color-warning-bg: rgba(250, 178, 25, 0.14);
  --color-danger: #ff6a5e;
  --color-danger-bg: rgba(255, 106, 94, 0.14);
  --color-info: #5aa2ff;
  --color-info-bg: rgba(90, 162, 255, 0.14);

  /* Chart — diverging pair (Entradas / Saídas), validated CVD-safe against the dark surface */
  --chart-in: #1baf7a;
  --chart-in-bg: rgba(27, 175, 122, 0.16);
  --chart-out: #fb5a2e;
  --chart-out-bg: rgba(251, 90, 46, 0.16);
  --chart-line: #c3c2b7;

  /* Spacing scale (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 56px;

  /* Radius / shadow */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 12px 32px rgba(251, 54, 2, 0.18);

  /* Type — mesma dupla de fontes do site institucional (grupoodin.com.br): Bebas Neue nos
     títulos e rótulos de marca (--font-display), Nunito no corpo do texto (--font-sans). */
  --font-display: 'Bebas Neue', 'Arial Narrow', sans-serif;
  --font-sans: 'Nunito', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Consolas, monospace;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  --fs-2xl: 26px;
  --fs-3xl: 34px;

  --sidebar-width: 236px;
  --topbar-height: 64px;

  color-scheme: dark;
}

/* ---- Modo claro — mesma marca (laranja/neon), superfícies e escala de cinza invertidas para
   manter contraste de leitura. Ativado via [data-theme="light"] no <html> (ver assets/js/nav.js:
   applyTheme/toggleTheme), persistido em localStorage. ---- */
:root[data-theme="light"] {
  --color-gray-500: #6b7178;
  --color-gray-600: #57534c;
  --color-gray-700: #44403a;
  --color-gray-800: #2b2926;
  --color-gray-900: #1a1815;

  --surface-page: #f6f4f2;
  --surface-card: #ffffff;
  --surface-card-raised: #ffffff;
  --surface-sidebar: #ffffff;
  --surface-sidebar-active: var(--color-primary-50);
  --text-body: #211f1c;
  --text-muted: #6b675f;
  --text-inverse: #ffffff;
  --border-subtle: rgba(0, 0, 0, 0.09);
  --border-strong: rgba(0, 0, 0, 0.16);

  --overlay-faint: rgba(0, 0, 0, 0.025);
  --overlay-soft: rgba(0, 0, 0, 0.045);
  --overlay-mid: rgba(0, 0, 0, 0.06);
  --overlay-strong: rgba(0, 0, 0, 0.14);

  --surface-glass: rgba(255, 255, 255, 0.86);
  --grid-line: rgba(0, 0, 0, 0.035);

  --chart-line: #57534c;

  /* As cores semânticas (success/warning/danger/info) sempre aparecem como texto colorido sobre o
     próprio fundo tintado (badges, pills, bordas) — os tons vívidos originais foram calibrados para
     o fundo escuro; no claro precisam ser mais escuros para manter contraste de leitura. */
  --color-success: #157a4f;
  --color-warning: #8a5a00;
  --color-danger: #c53a2c;
  --color-info: #205fb0;

  /* Mesma lógica para os dois acentos de marca usados como texto sobre fundo tintado ou sobre a
     página (badge "Em análise", valores negativos/críticos, glow de foco). */
  --color-primary-bright: #c23e0a;
  --color-neon: #b91c3c;

  --shadow-sm: 0 1px 2px rgba(20, 18, 16, 0.08);
  --shadow-md: 0 8px 24px rgba(20, 18, 16, 0.1);
  --shadow-lg: 0 20px 48px rgba(20, 18, 16, 0.16);
  --shadow-glow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 12px 32px rgba(251, 54, 2, 0.12);

  color-scheme: light;
}