/**
 * DTC UI — tokens del design system (port 1:1 del dashboard De Tu Cel,
 * `dtc_ui/css/tokens.css`).
 *
 * ÚNICA fuente de verdad de color/tipografía/espaciado/sombra. Ningún
 * componente o página declara hex/rgb propios: todo via var(--dtc-*).
 *
 * Dark mode: html[data-theme="dark"] redefine los tokens. Un componente
 * que solo usa tokens es dark-ready sin trabajo extra. El atributo lo
 * pone /static/dtc/theme-init.js (anti-FOUC) y lo cambia el menú de
 * usuario del sidebar (static/sidenav.js).
 */

:root {
  /* Tipografía */
  --dtc-font-ui: "Nunito", "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --dtc-font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;

  /* Movimiento */
  --dtc-tr: 180ms cubic-bezier(.2, .7, .3, 1);

  /* Superficies */
  --dtc-bg-grad: linear-gradient(135deg, #f0f4ff 0%, #fef7ed 50%, #f5f3ff 100%);
  --dtc-bg: #f9fafb;
  --dtc-surface: #ffffff;
  --dtc-surface2: #f9fafb;
  --dtc-border: #e5e7eb;
  --dtc-border-soft: #f1f5f9;

  /* Texto */
  --dtc-text: #111827;
  --dtc-muted: #6b7280;
  --dtc-faint: #9ca3af;

  /* Marca / acción */
  --dtc-primary: #2563eb;
  --dtc-primary-strong: #1d4ed8;
  --dtc-primary-soft: #eff6ff;
  --dtc-accent: #4f46e5;
  --dtc-accent-soft: #e0e7ff;
  --dtc-accent-text: #3730a3;

  /* Navegación (sidebar) */
  --dtc-nav: #475569;
  --dtc-nav-hover: #f8fafc;
  --dtc-nav-active-bg: #eff6ff;
  --dtc-nav-active: #1d4ed8;

  /* Semánticos */
  --dtc-danger: #dc2626;
  --dtc-danger-soft: #fef2f2;
  --dtc-danger-border: #fecaca;
  --dtc-danger-text: #b91c1c;
  --dtc-success: #16a34a;
  --dtc-success-soft: #f0fdf4;
  --dtc-success-border: #bbf7d0;
  --dtc-success-text: #15803d;
  --dtc-warning: #d97706;
  --dtc-warning-soft: #fffbeb;
  --dtc-warning-border: #fde68a;
  --dtc-warning-text: #92400e;
  --dtc-info-border: #bfdbfe;
  --dtc-info-text: #1e3a8a;

  /* Tablas */
  --dtc-th-bg: #f9fafb;
  --dtc-row-hover: #f3f7ff;

  /* Identidad: gradientes de logo/avatar y chip de servicio
     (el chip usa la paleta ámbar del prototipo: contraste AA 7.7:1) */
  --dtc-grad-brand: linear-gradient(135deg, #2563eb, #4f46e5);
  --dtc-grad-avatar: linear-gradient(135deg, #8b5cf6, #6366f1);
  --dtc-chip-bg: #fef3c7;
  --dtc-chip-text: #92400e;

  /* Código / consola (siempre oscuro, en ambos temas) */
  --dtc-code-bg: #111c33;
  --dtc-code-head: #0f172a;
  --dtc-code-text: #d7e3f7;
  --dtc-tooltip-bg: #0f172a;

  /* Forma */
  --dtc-radius: 10px;
  --dtc-radius-sm: 7px;

  /* Foco accesible */
  --dtc-focus: 0 0 0 2px #fff, 0 0 0 4px var(--dtc-primary);

  /* Sombras */
  --dtc-sh-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --dtc-sh-md: 0 4px 16px rgba(15, 23, 42, .10);
  --dtc-sh-lg: 0 12px 40px rgba(15, 23, 42, .18);
  --dtc-sh-card: 0 4px 24px rgba(0, 0, 0, .06);
  --dtc-sh-pop: 0 8px 30px rgba(15, 23, 42, .16);
}

html[data-theme="dark"] {
  --dtc-bg-grad: linear-gradient(135deg, #0d1424 0%, #141b2e 50%, #101729 100%);
  --dtc-bg: #0f1626;
  --dtc-surface: #161f33;
  --dtc-surface2: #1b2640;
  --dtc-border: #2a3650;
  --dtc-border-soft: #232e47;

  --dtc-text: #e7edf8;
  --dtc-muted: #9aa7bd;
  --dtc-faint: #6b7891;

  --dtc-primary: #5b8def;
  --dtc-primary-strong: #8fb0f7;
  --dtc-primary-soft: #1c2c4f;
  --dtc-accent-soft: #272f55;
  --dtc-accent-text: #b9c3ff;

  --dtc-nav: #aab6c9;
  --dtc-nav-hover: #1b2640;
  --dtc-nav-active-bg: #1c2c4f;
  --dtc-nav-active: #9db9f7;

  --dtc-danger-soft: #33202a;
  --dtc-danger-border: #5a2a34;
  --dtc-danger-text: #fca5a5;
  --dtc-success: #4ade80;
  --dtc-success-soft: #16261d;
  --dtc-success-border: #24513a;
  --dtc-success-text: #86efac;
  --dtc-warning: #f5c66b;
  --dtc-warning-soft: #332912;
  --dtc-warning-border: #574722;
  --dtc-warning-text: #f5c66b;
  --dtc-info-border: #31477c;
  --dtc-info-text: #bcd0f7;

  --dtc-th-bg: #1b2640;
  --dtc-row-hover: #1d2a46;

  --dtc-chip-bg: #3a2f15;
  --dtc-chip-text: #f5c66b;

  --dtc-tooltip-bg: #26334e;

  --dtc-focus: 0 0 0 2px #161f33, 0 0 0 4px var(--dtc-primary);

  --dtc-sh-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --dtc-sh-md: 0 4px 16px rgba(0, 0, 0, .45);
  --dtc-sh-lg: 0 12px 40px rgba(0, 0, 0, .6);
  --dtc-sh-card: 0 4px 24px rgba(0, 0, 0, .4);
  --dtc-sh-pop: 0 8px 30px rgba(0, 0, 0, .55);
}