/* Variables de marca Valion (tomadas de variables.css de valion.com.co) +
   paleta de datos validada (dataviz skill). La marca es la capa de "chrome"
   (topbar, botones, tipografia); la paleta de datos (--series-1, --status-*,
   --delta-bad) esta validada por contraste + CVD y NO debe tocarse a mano --
   si cambia el sistema de diseño, se revalida con scripts/validate_palette.js. */

:root {
  color-scheme: light;

  /* Marca Valion (real) -- #1F2937 se usa como TEXTO/botones, igual que en
     valion.com.co, nunca como fondo solido grande (su navbar es claro). */
  --brand-primary:       #1F2937;
  --brand-primary-hover: #1B2532;
  --brand-on-primary:    #ffffff;
  --brand-accent:        #FF9900; /* AWS partner -- uso decorativo puntual, nunca como color de datos */
  --brand-accent-hover:  #E68600;
  --brand-gradient:      linear-gradient(90deg, #A9ECD9, #A7D3F5, #C8D9F7); /* acento de marca, uso puntual (tags, halo del hero) */

  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-pill: 999px;

  /* Chrome neutro (alineado a variables.css) */
  --surface-1:      #ffffff;
  --page:           #F8FAFC;
  --text-primary:   #232F3E;
  --text-secondary: #667085;
  --text-muted:     #7B8794;
  --gridline:       #E8EDF2;
  --baseline:       #D6DDE6;
  --border:         #E8EDF2;

  /* Navbar: claro y translucido, como valion.com.co (nunca un bloque oscuro) */
  --nav-surface: rgba(255,255,255,.82);
  --nav-border:  rgba(226,232,240,.6);

  /* Paleta de datos (dataviz skill -- validada, no editar a mano) */
  --series-1:       #2a78d6;
  --success:        #006300;
  --status-good:     #0ca30c;
  --status-warning:  #fab219;
  --status-serious:  #ec835a;
  --status-critical: #d03b3b;
  --delta-bad:      #d03b3b;

  /* Fondos de seccion del reporte -- lavados suaves (7-8%) sobre la
     superficie, solo para agrupar visualmente, nunca compiten con los
     colores de datos de adentro. Referencian --surface-1 asi que se
     adaptan solas al modo oscuro sin redeclararse. */
  --section-finops-bg:    color-mix(in srgb, #16A34A 7%, var(--surface-1));
  --section-security-bg:  color-mix(in srgb, #1F2937 6%, var(--surface-1));
  --section-anomalies-bg: color-mix(in srgb, #2F6FED 7%, var(--surface-1));
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --brand-primary:       #1F2937;
    --brand-primary-hover: #2A3849;
    --brand-on-primary:    #ffffff;

    --surface-1:      #1a1a19;
    --page:           #0d0d0d;
    --text-primary:   #ffffff;
    --text-secondary: #c3c2b7;
    --text-muted:     #898781;
    --gridline:       #2c2c2a;
    --baseline:       #383835;
    --border:         rgba(255,255,255,0.10);

    --nav-surface: rgba(26,26,25,.82);
    --nav-border:  rgba(255,255,255,.10);

    --series-1:       #3987e5;
    --success:        #0ca30c;
    --status-good:     #0ca30c;
    --status-warning:  #fab219;
    --status-serious:  #ec835a;
    --status-critical: #d03b3b;
    --delta-bad:      #e66767;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--page);
  color: var(--text-primary);
}

h1, h2, h3 { font-family: inherit; }
code { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; }