/* Tokens del sistema de diseño. Documentación: css/TOKENS.md
   La marca (app.js → applyBrand) sobrescribe --brand, --accent, --on-brand, --brand-ink-l/-d,
   --brand-mark-l/-d y las fuentes. Todo lo demás se deriva de aquí. */
:root {
  /* ---------- Marca ---------- */
  --brand: #4f46e5;
  --accent: #f59e0b;
  --brand-solid: #4f46e5;       /* relleno con texto encima (botones, logotipo); = --brand salvo tonos medios */
  --on-brand: #ffffff;          /* texto sobre --brand-solid, ≥ 4.5:1 */
  --brand-ink-l: #4338ca;       /* texto de marca en claro, ≥ 4.5:1 sobre superficie y fondo suave */
  --brand-ink-d: #a5b4fc;       /* texto de marca en oscuro, ≥ 4.5:1 */
  --brand-mark-l: #4f46e5;      /* trazos y rellenos de marca (barras, subrayados, foco), ≥ 3:1 */
  --brand-mark-d: #818cf8;
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-head: var(--font);
  --font-mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* ---------- Tipografía (escala fija) ---------- */
  --text-xs: 12px;    /* etiquetas, ayudas, ejes */
  --text-sm: 13px;    /* texto secundario, tablas, botones */
  --text-md: 14px;    /* texto base */
  --text-lg: 16px;    /* títulos de tarjeta, frases destacadas */
  --text-xl: 20px;    /* título de pantalla */
  --text-2xl: 24px;   /* cifras de indicadores, encabezados de sección grande */
  --text-3xl: 32px;   /* modo presentación */
  --lh-tight: 1.2;
  --lh-snug: 1.35;
  --lh-body: 1.5;
  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;
  --w-bold: 700;
  --tracking-tight: -0.01em;

  /* ---------- Espaciado (múltiplos de 4) ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 28px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* ---------- Tamaños de control ---------- */
  --h-control: 36px;
  --h-control-sm: 32px;
  --h-badge: 20px;
  --icon: 16px;
  --icon-nav: 18px;

  /* ---------- Radios: crecen con el tamaño del elemento ---------- */
  --r-xs: 3px;        /* muestras de leyenda, marcas pequeñas */
  --r-sm: 6px;        /* barras, segmentos */
  --r-md: 8px;        /* botones, campos, elementos de lista */
  --r-lg: 12px;       /* tarjetas */
  --r-xl: 16px;       /* diálogos, bloques destacados */
  --r-full: 999px;    /* insignias, avatares */

  /* ---------- Movimiento ---------- */
  --dur-fast: 150ms;
  --dur-base: 200ms;
  --ease: cubic-bezier(.2, 0, 0, 1);

  /* ---------- Capas ---------- */
  --z-sticky: 5;
  --z-drawer: 30;
  --z-toast: 50;
  --z-tip: 60;

  /* ---------- Color: claro ---------- */
  --base-bg: #f5f6f8;
  --base-surface: #ffffff;
  --bg: color-mix(in srgb, var(--brand) 3%, var(--base-bg));
  --surface: var(--base-surface);
  --surface-2: color-mix(in srgb, var(--brand) 4%, #eff1f4);
  --border: color-mix(in srgb, var(--brand) 6%, #e2e5ea);         /* separadores (decorativo) */
  --border-strong: color-mix(in srgb, var(--brand) 6%, #cfd4dc);  /* contornos de tarjetas internas */
  --border-control: #878f9d;                                       /* contorno de campos, ≥ 3:1 */
  --text: #131720;
  --muted: #535c6c;   /* ≥ 6:1 */
  --faint: #646d7c;   /* ≥ 4.5:1 sobre fondo y superficie */

  --ok: #13703a; --ok-bg: #e6f5ec;
  --warn: #8a5005; --warn-bg: #fcf1dc;
  --bad: #b42318; --bad-bg: #fdeceb;
  --info: #1d4ed8; --info-bg: #e7eefc;

  --brand-ink: var(--brand-ink-l);
  --brand-mark: var(--brand-mark-l);
  --brand-soft: color-mix(in srgb, var(--brand) 10%, var(--surface));
  --brand-line: color-mix(in srgb, var(--brand) 30%, var(--border));

  --shadow-color: 220 30% 15%;
  --shadow-1: 0 1px 2px hsl(var(--shadow-color) / .06);
  --shadow-2: 0 2px 4px hsl(var(--shadow-color) / .06), 0 4px 12px hsl(var(--shadow-color) / .06);
  --shadow-3: 0 12px 32px hsl(var(--shadow-color) / .16);
  --scrim: rgba(10, 14, 20, .45);

  /* Paleta categórica validada para gráficas (orden fijo por canal) */
  --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a; --series-4: #eda100; --series-5: #e87ba4; --series-6: #008300;

  color-scheme: light;
}

/* ---------- Color: oscuro (tema elegido o sistema en automático) ---------- */
:root[data-theme="dark"] {
  --base-bg: #0e1116; --base-surface: #161a21;
  --surface-2: color-mix(in srgb, var(--brand) 4%, #1d222b);
  --border: color-mix(in srgb, var(--brand) 6%, #2a303b);
  --border-strong: color-mix(in srgb, var(--brand) 6%, #3a4250);
  --border-control: #6b7483;
  --text: #e8eaee; --muted: #a3abb8; --faint: #8a93a1;
  --ok: #4ade80; --ok-bg: #12291c; --warn: #fbbf24; --warn-bg: #2d2412; --bad: #f87171; --bad-bg: #321717; --info: #93b4fd; --info-bg: #162240;
  --brand-ink: var(--brand-ink-d);
  --brand-mark: var(--brand-mark-d);
  --brand-soft: color-mix(in srgb, var(--brand) 16%, var(--surface));
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-2: 0 2px 8px rgba(0, 0, 0, .45);
  --shadow-3: 0 12px 32px rgba(0, 0, 0, .55);
  --scrim: rgba(0, 0, 0, .6);
  --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500; --series-5: #d55181; --series-6: #008300;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --base-bg: #0e1116; --base-surface: #161a21;
    --surface-2: color-mix(in srgb, var(--brand) 4%, #1d222b);
    --border: color-mix(in srgb, var(--brand) 6%, #2a303b);
    --border-strong: color-mix(in srgb, var(--brand) 6%, #3a4250);
    --border-control: #6b7483;
    --text: #e8eaee; --muted: #a3abb8; --faint: #8a93a1;
    --ok: #4ade80; --ok-bg: #12291c; --warn: #fbbf24; --warn-bg: #2d2412; --bad: #f87171; --bad-bg: #321717; --info: #93b4fd; --info-bg: #162240;
    --brand-ink: var(--brand-ink-d);
    --brand-mark: var(--brand-mark-d);
    --brand-soft: color-mix(in srgb, var(--brand) 16%, var(--surface));
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-2: 0 2px 8px rgba(0, 0, 0, .45);
    --shadow-3: 0 12px 32px rgba(0, 0, 0, .55);
    --scrim: rgba(0, 0, 0, .6);
    --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500; --series-5: #d55181; --series-6: #008300;
    color-scheme: dark;
  }
}

/* ---------- Apariencia (Mi marca → Apariencia): atributos en <html> que pone App.applyBrand() ---------- */
/* Esquinas: rectas, suaves (predeterminadas) o redondas. Siguen creciendo con el tamaño del elemento. */
:root[data-corners="sharp"] { --r-xs: 2px; --r-sm: 3px; --r-md: 4px; --r-lg: 6px; --r-xl: 8px; }
:root[data-corners="round"] { --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 24px; }
/* Densidad: compacta cabe más en pantalla; amplia respira más. Los múltiplos de 4 se conservan. */
:root[data-density="compact"] { --sp-3: 8px; --sp-4: 12px; --sp-5: 16px; --sp-6: 20px; --sp-7: 24px; --h-control: 32px; --h-control-sm: 28px; }
:root[data-density="spacious"] { --sp-3: 14px; --sp-4: 20px; --sp-5: 24px; --sp-6: 32px; --sp-7: 40px; --h-control: 40px; --h-control-sm: 34px; }
/* Tamaño de texto: grande sube un paso toda la escala (para leer a distancia o con pantallas grandes). */
:root[data-text="large"] { --text-xs: 13px; --text-sm: 14px; --text-md: 15px; --text-lg: 17px; --text-xl: 22px; --text-2xl: 27px; --text-3xl: 36px; }
/* Fondo: con tinte de marca el lienzo lleva más del tono de la marca (las tarjetas siguen neutras). */
:root[data-canvas="tint"] { --bg: color-mix(in srgb, var(--brand) 7%, var(--base-bg)); }

/* Sin animaciones para quien lo pide en su sistema */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}