/* ============================================================
   DESIGN SYSTEM TOKENS
   Source: "Diseno Tecnico Dashboard.dc.html" (sección 05).
   IBM Plex Sans (UI) + IBM Plex Mono (números/datos).
   Consumido por design-system/components/*.js y public/styles.css.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* ---------- Ramp: neutro / slate ---------- */
  --slate-25:  #fbfcfd;
  --slate-50:  #f7f9fb;
  --slate-100: #eef2f6;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;
  --slate-950: #060b18;

  /* ---------- Ramp: azul (marca) ---------- */
  --blue-50:  #eef4ff;
  --blue-100: #d9e6ff;
  --blue-200: #bcd3ff;
  --blue-300: #8db5ff;
  --blue-400: #598cff;
  --blue-500: #2f66f5;
  --blue-600: #1a4de0;
  --blue-700: #163cb8;
  --blue-800: #173494;
  --blue-900: #182f74;

  /* ---------- Hues semánticos ---------- */
  --emerald-50: #ecfdf3; --emerald-100:#d1fadf; --emerald-500:#12b76a; --emerald-600:#039855; --emerald-700:#027a48;
  --amber-50:   #fffaeb; --amber-100:#fef0c7;  --amber-500:#f79009;  --amber-600:#dc6803;  --amber-700:#b54708;
  --red-50:     #fef3f2; --red-100:#fee4e2;    --red-500:#f04438;    --red-600:#d92d20;    --red-700:#b42318;
  --violet-50:  #f4f3ff; --violet-100:#ebe9fe; --violet-500:#7a5af8; --violet-600:#6938ef; --violet-700:#5925dc;

  /* ---------- Paleta categórica (gráficas) ---------- */
  --viz-1: #2f66f5;
  --viz-2: #12b76a;
  --viz-3: #f79009;
  --viz-4: #7a5af8;
  --viz-5: #ee46bc;
  --viz-6: #06aed4;

  /* ================= ALIAS SEMÁNTICOS (light) ================= */
  /* Fondo / paneles — sección 05 del documento técnico */
  --color-bg:            var(--slate-50);   /* #f7f9fb — fondo de página */
  --color-panel:         #ffffff;           /* panel / card */
  --surface-page:        var(--color-bg);
  --surface-card:        var(--color-panel);
  --surface-sunken:      var(--slate-100);
  --surface-hover:       var(--slate-100);
  --surface-active:      var(--slate-200);

  /* Texto */
  --color-text-primary:  var(--slate-900);  /* #0f172a */
  --color-text-muted:    var(--slate-500);  /* #64748b */
  --text-primary:        var(--color-text-primary);
  --text-secondary:      var(--slate-600);
  --text-tertiary:       var(--color-text-muted);
  --text-inverse:        #ffffff;
  --text-link:           var(--blue-600);

  /* Bordes */
  --border-subtle:  var(--slate-200);
  --border-default: var(--slate-300);
  --border-strong:  var(--slate-400);
  --border-focus:   var(--blue-500);

  /* Acentos — sección 05 del documento técnico */
  --color-accent-primary:   #1a4de0;  /* acento primario */
  --color-accent-secondary: #7a5af8;  /* acento secundario */
  --color-chart-line:       #2f66f5;  /* línea de gráfica */
  --color-danger:           #d92d20;  /* peligro / ROAS bajo */

  --brand-solid:        var(--color-accent-primary);
  --brand-solid-hover:  var(--blue-700);
  --brand-solid-active: var(--blue-800);
  --brand-soft:         var(--blue-50);
  --brand-soft-text:    var(--blue-700);
  --brand-ring:         color-mix(in srgb, var(--blue-500) 32%, transparent);

  --success-solid: var(--emerald-600); --success-soft: var(--emerald-50); --success-soft-text: var(--emerald-700);
  --warning-solid: var(--amber-600);   --warning-soft: var(--amber-50);   --warning-soft-text: var(--amber-700);
  --danger-solid:  var(--color-danger); --danger-soft: var(--red-50);     --danger-soft-text:  var(--red-700);
  --info-solid:    var(--color-accent-secondary); --info-soft: var(--violet-50); --info-soft-text: var(--violet-700);

  --focus-ring: 0 0 0 3px var(--brand-ring);

  /* ---------- Tipografía ---------- */
  --font-sans: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, monospace;

  --text-2xs: 0.6875rem; --text-xs: 0.75rem; --text-sm: 0.8125rem; --text-md: 0.875rem;
  --text-lg: 1rem; --text-xl: 1.125rem; --text-2xl: 1.375rem; --text-3xl: 1.75rem;
  --text-4xl: 2.25rem; --text-5xl: 3rem;

  --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700;
  --leading-tight: 1.15; --leading-snug: 1.3; --leading-normal: 1.5; --leading-relaxed: 1.65;
  --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.02em; --tracking-caps: 0.06em;

  /* KPI grande: 36px · 600 (metric) — Body: 14px · 1.5 — Eyebrow: 11px · 0.06em caps */
  --type-metric-size: var(--text-4xl); --type-metric-weight: 600;
  --type-body-size: var(--text-md);    --type-body-weight: 400; --type-body-leading: var(--leading-normal);
  --type-eyebrow-size: var(--text-2xs); --type-eyebrow-weight: 600; --type-eyebrow-tracking: var(--tracking-caps);

  /* ---------- Radio · espaciado · sombra ---------- */
  --radius-control: 8px;   /* radio control / card */
  --radius-card-lg: 12px;  /* radio card grande */
  --radius-full: 9999px;

  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem;
  --card-pad: 24px; /* padding de card */

  --control-height-sm: 30px; --control-height-md: 36px; --control-height-lg: 44px;
  --sidebar-width: 248px; --topbar-height: 60px; --content-max: 1440px;

  --shadow-xs: 0 1px 2px rgba(15,23,42,0.06);
  --shadow-sm: 0 1px 3px rgba(15,23,42,0.08), 0 1px 2px rgba(15,23,42,0.04);
  --shadow-md: 0 4px 8px -2px rgba(15,23,42,0.10), 0 2px 4px -2px rgba(15,23,42,0.06);
  --shadow-focus: var(--focus-ring);

  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --duration-base: 180ms;

  --z-sticky: 100; --z-dropdown: 400; --z-overlay: 800; --z-modal: 900; --z-toast: 1000;
}

/* ================= DARK THEME ================= */
[data-theme="dark"] {
  --color-bg:    var(--slate-950);
  --color-panel: var(--slate-900);
  --surface-page: var(--color-bg);
  --surface-card: var(--color-panel);
  --surface-sunken: #0a1122;
  --surface-hover: var(--slate-800);
  --surface-active: var(--slate-700);

  --color-text-primary: var(--slate-50);
  --color-text-muted:   var(--slate-400);
  --text-primary: var(--color-text-primary);
  --text-secondary: var(--slate-300);
  --text-tertiary: var(--color-text-muted);

  --border-subtle:  var(--slate-800);
  --border-default: var(--slate-700);
  --border-strong:  var(--slate-600);

  --brand-soft: color-mix(in srgb, var(--blue-500) 16%, transparent);
  --brand-soft-text: var(--blue-300);
  --danger-soft: color-mix(in srgb, var(--red-500) 16%, transparent); --danger-soft-text: var(--red-100);
}

*, *::before, *::after { box-sizing: border-box; }
.tabular { font-variant-numeric: tabular-nums; }