/* ── Metrics Studio · design tokens ─────────────────────────────────
   Una sola fuente de verdad para color, tipografía, espacio y movimiento. Claro y oscuro.
   Marca In Metrics We Trust: violeta #4f4da7 · lila #a177ff · índigo #211f51.
   Colores de datos validados con el validador de paletas (daltonismo y contraste).          */

:root {
  color-scheme: light;
  /* Tipografía */
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --head: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, monospace;

  /* Superficies */
  --bg: #f5f6fa;            /* lienzo */
  --card: #ffffff;          /* tarjetas */
  --surface-2: #f9fafc;     /* fondos suaves dentro de una tarjeta */
  --surface-3: #f1f3f8;
  --overlay: rgba(18, 20, 40, .42);

  /* Bordes */
  --line: #e8eaf2;
  --line-2: #d9dce8;
  --line-3: #c7ccdd;

  /* Texto */
  --text: #161a2e;
  --text-2: #565e78;
  --text-3: #8189a3;
  --navy: var(--text);

  /* Marca */
  --primary: #4f4da7;
  --primary-d: #403e8e;
  --primary-l: #6b68c9;
  --accent: #a177ff;
  --tint: #f3f2fd;
  --tint-2: #e8e6fb;
  --ring: rgba(79, 77, 167, .28);
  --indigo: #1c1b47;
  --indigo-2: #2b2970;

  /* Estado (reservados: nunca se usan como color de serie) */
  --ok: #0a8f5c;     --ok-bg: #e3f6ee;
  --warn: #b97300;   --warn-bg: #fdf1d6;
  --bad: #d03b3b;    --bad-bg: #fde8e8;
  --info: #2a6fdb;   --info-bg: #e6eefc;
  --serious: #d2561a; --serious-bg: #ffeadf;

  /* Plataformas */
  --meta: #1877f2;
  --google: #ea8a00;
  --ga: #e37400;

  /* Forma y sombra */
  --r: 16px; --r-md: 12px; --r-sm: 10px; --r-xs: 7px;
  --shadow-xs: 0 1px 1px rgba(20, 24, 50, .04);
  --shadow: 0 1px 2px rgba(20, 24, 50, .05), 0 2px 8px rgba(20, 24, 50, .04);
  --shadow-md: 0 4px 14px rgba(20, 24, 50, .08), 0 1px 3px rgba(20, 24, 50, .06);
  --shadow-lg: 0 18px 50px rgba(18, 20, 50, .22), 0 4px 12px rgba(18, 20, 50, .08);

  /* Movimiento */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --t-fast: 120ms; --t: 180ms; --t-slow: 320ms;

  /* ── Datos: categórico (orden fijo, validado) ── */
  --s1: #4f4da7; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100;
  --s5: #008300; --s6: #e87ba4; --s7: #2a78d6; --s8: #e34948;
  --s-other: #a6adc2;
  --s-prev: #b4bad0;                      /* período anterior / contexto */
  /* Secuencial (un solo tono, claro → oscuro) */
  --seq-1: #f1f0fc; --seq-2: #dedcf7; --seq-3: #c6c3ef; --seq-4: #aaa6e4; --seq-5: #8d89d6;
  --seq-6: #716dc3; --seq-7: #5a56ae; --seq-8: #4a4795; --seq-9: #39377a; --seq-10: #292760;
  /* Divergente: azul ↔ rojo con punto medio neutro */
  --div-neg: #d03b3b; --div-mid: #eceef4; --div-pos: #2a6fdb;
  /* Chrome de gráficos */
  --grid: #ecedf3; --axis: #d9dce8; --ax-text: #8189a3;
  --good-text: #0a7a4f; --bad-text: #c23030;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e1020; --card: #171a2b; --surface-2: #1c2034; --surface-3: #222741; --overlay: rgba(2, 3, 12, .62);
  --line: #272c45; --line-2: #343a59; --line-3: #454c70;
  --text: #eceefa; --text-2: #aab1cd; --text-3: #7c84a6;
  --primary: #8b87e8; --primary-d: #a39fee; --primary-l: #756fd8; --accent: #b99bff;
  --tint: #21244a; --tint-2: #2b2f5c; --ring: rgba(139, 135, 232, .38);
  --indigo: #0b0c1c; --indigo-2: #20225a;
  --ok: #3ccf91; --ok-bg: #12332a; --warn: #f0b23a; --warn-bg: #3a2d10; --bad: #f2777a; --bad-bg: #3b1a20;
  --info: #6aa5ff; --info-bg: #17284a; --serious: #f08a5d; --serious-bg: #3a2216;
  --shadow-xs: 0 1px 1px rgba(0, 0, 0, .3); --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 2px 8px rgba(0, 0, 0, .25);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, .4); --shadow-lg: 0 24px 60px rgba(0, 0, 0, .6);
  --s1: #8b87e8; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #3987e5; --s6: #d55181; --s7: #008300; --s8: #e66767;
  --s-other: #6b7394; --s-prev: #4a5174;
  --seq-1: #1f2240; --seq-2: #2a2d5c; --seq-3: #363a7a; --seq-4: #45499a; --seq-5: #5a5ebb; --seq-6: #7478d4;
  --seq-7: #8e91e6; --seq-8: #a9acf1; --seq-9: #c4c6f7; --seq-10: #dfe0fb;
  --div-mid: #2a2f4a; --div-neg: #f2777a; --div-pos: #6aa5ff;
  --grid: #232842; --axis: #343a59; --ax-text: #7c84a6;
  --good-text: #3ccf91; --bad-text: #f2777a;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) { color-scheme: dark; }
}

/* Utilidades base */
*, *::before, *::after { box-sizing: border-box; }
.num, .mono { font-variant-numeric: tabular-nums; }