/* Statera · tokens v3 · sistema ATLAS (estilo-dark + estilo-tech-grid + estilo-bento · color-data-graphite-lime)
 * Fuente: ATLAS/11_Dashboards-DataViz/demos/atlas-charts.css (tokens dark por defecto + light), adaptados:
 *   · oscuro por defecto (decisión del dueño 27/09); claro con la misma paridad
 *   · lima = marca y serie destacada, nunca categoría
 *   · sin rojo/verde/negro como semántica (son resultados de la ruleta): ganancia en cian, pérdida en ámbar
 *   · texto >= 7:1 sobre su fondo real; --text-3 solo unidades y decoración (>= 4,5:1)
 *   · la línea de caída (drawdown) va en rojo por pedido explícito del dueño (23/09)
 */
@font-face {
  font-family: "Statera Outfit";
  src: url("../assets/fonts/Outfit-variable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  /* Geist si está instalada; si no, la sans del sistema (como las demos de ATLAS): sin 110 KB de fuente */
  --font: "Geist", "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;

  --fs-axis: 12px;
  --fs-cap: 13px;
  --fs-sec: 14px;
  --fs-row: 15px;
  --fs-body: 16px;
  --fs-h3: 18px;
  --fs-h1: 24px;
  --fs-kpi: 28px;

  /* superficies (grafito neutro) */
  --canvas: #0c0c0c;        /* plano de página */
  --bg: #111111;            /* barra, riel */
  --card: #161616;          /* tarjetas y paneles (superficie de gráfico) */
  --surface: #1c1c1c;       /* hover, inputs */
  --surface-2: #232323;     /* tooltip, popover */
  --line: rgba(255, 255, 255, .075);
  --line-hover: rgba(255, 255, 255, .16);
  --border-strong: #636363; /* >= 3:1: contornos de controles */
  --grid: #232323;
  --axis: #383838;

  /* tinta */
  --text: #f3f3ee;
  --text-2: #b4b4ac;        /* 8,7:1 sobre tarjeta */
  --text-3: #8a8a83;        /* 5,2:1 · solo unidades */

  /* marca: lima */
  --accent: #c6f24e;
  --accent-ink: #0c0c0c;
  --accent-mark: #c6f24e;
  --cmp-1: #9d87f5; --cmp-2: #e0689f; --cmp-3: #6fcf97; --cmp-4: #cfcfc6; /* comparar: identidad de cada estrategia, sin lima (marca/mejor), celeste ni ámbar (saldo ±); la 4.ª va punteada */
  --accent-wash: rgba(198, 242, 78, .10);
  --deemph: #4b4b48;

  /* semántica de plata (cian = gana, ámbar = pierde) */
  --gain: #44c9f0;
  --loss: #f8ac3d;
  --gain-bar: #01a2c5;
  --loss-bar: #c68206;
  --dd: #ff7a86;            /* caída desde el mejor momento (pedido del dueño) · 7,6:1 como texto */
  --dd-wash: rgba(255, 92, 108, .10);
  --focus: #c6f24e;
  --ink: #c6f24e;           /* acción principal y control activo */
  --ink-text: #0c0c0c;
  --selected: rgba(198, 242, 78, .08);
  --track: #2a2a2a;
  --bar-neutral: #6b6b66;
  --heat: #44c9f0;

  /* fichas de ruleta (solo ahí va el rojo) */
  --chip-red: #C8102E;
  --chip-black: #23262B;
  --chip-black-border: #5A606A;
  --chip-green: #0F7B3E;
  --brand-red: #FF6B7F;

  --radius: 10px;
  --radius-lg: 14px;
  --bar-h: 48px;
  --rail-w: 272px;
  --gutter: 24px;
  --shadow: 0 12px 32px -8px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .06);
  --shadow-card: none;
  --shadow-lift: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 10px 30px -10px rgba(0, 0, 0, .7);
  --shadow-pop: 0 16px 40px -8px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .07);
  --ease: cubic-bezier(.16, 1, .3, 1);
  /* alias que usa atlas-charts.js */
  --surface-3: var(--surface-2); --border: var(--line); --muted: var(--text-2); --up: var(--gain-bar); --down: var(--loss-bar); --flat: var(--text-2);
  --shadow-tip: var(--shadow-pop);
}

:root[data-theme="light"] {
  color-scheme: light;
  --canvas: #f3f3ef;
  --bg: #fafaf7;
  --card: #fcfcfa;
  --surface: #f4f4f1;
  --surface-2: #ffffff;
  --line: rgba(12, 12, 10, .085);
  --line-hover: rgba(12, 12, 10, .18);
  --border-strong: #8f8f88;
  --grid: #ecece7;
  --axis: #cfcfc8;
  --text: #121211;
  --text-2: #4a4a45;        /* 8,6:1 */
  --text-3: #6b6b66;        /* 5,2:1 · solo unidades */
  --accent: #c6f24e;
  --accent-ink: #0c0c0c;
  --accent-mark: #5c8311;
  --cmp-1: #5b3fb0; --cmp-2: #a8336f; --cmp-3: #1d7a4a; --cmp-4: #5a5a54;
  --accent-wash: rgba(92, 131, 17, .09);
  --deemph: #c9c9c3;
  --gain: #004d63;          /* >= 7:1 también sobre los mosaicos */
  --loss: #6b3d00;          /* >= 7:1 también sobre los mosaicos */
  --gain-bar: #0388a5;
  --loss-bar: #c68206;
  --dd: #a3001e;
  --dd-wash: rgba(200, 16, 46, .08);
  --focus: #1d4ed8;
  --ink: #121211;
  --ink-text: #fcfcfa;
  --selected: rgba(92, 131, 17, .10);
  --track: #e2e2dd;
  --bar-neutral: #8f8f88;
  --heat: #0388a5;
  --chip-black: #1B1D21;
  --chip-black-border: transparent;
  --brand-red: #C8102E;
  --shadow: 0 12px 32px -10px rgba(20, 20, 10, .22), 0 0 0 1px rgba(12, 12, 10, .08);
  --shadow-lift: 0 2px 4px rgba(20, 20, 10, .04), 0 10px 26px -10px rgba(20, 20, 10, .16);
  --shadow-pop: 0 16px 40px -10px rgba(20, 20, 10, .25), 0 0 0 1px rgba(12, 12, 10, .08);
}

@media (max-width: 1279px) { :root { --rail-w: 240px; } }
@media (max-width: 1023px) { :root { --gutter: 16px; } }