/**
 * Theme Tokens (variables CSS)
 * Objetivo: unificar colores/espaciado/typografía sin reescribir toda la app.
 */

/*
 * Tema por variables CSS.
 * - data-theme-mode: preferencia guardada (auto|light|dark)
 * - data-theme: tema efectivo aplicado (light|dark)
 */

:root {
  color-scheme: light dark;

  /* Tipografía */
  --font-sans: "Noto Sans", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;

  /* Colores base */
  --color-surface: #ffffff;
  --color-surface-muted: #f9fafb;
  --color-surface-strong: var(--color-primary, #2563eb);
  --color-border: #e9ecef;
  --color-text: #2b303a;
  --color-text-muted: #6c757d;
  --color-text-on-strong: #ffffff;

  /* Marca / primario */
  /* Azul corporativo */
  --color-primary-1: #2563eb; /* azul */
  --color-primary-2: #1e3a8a; /* azul oscuro */
  --color-primary: #2563eb;
  --gradient-primary: linear-gradient(135deg, var(--color-primary-1), var(--color-primary-2));

  /* Sidebar / navegación (derivado de la paleta para que cambie con el primario) */
  --gradient-sidebar: linear-gradient(
    to right,
    color-mix(in srgb, var(--color-primary-2, #1e3a8a) 70%, #0F2027),
    color-mix(in srgb, var(--color-primary-2, #1e3a8a) 45%, #0F2027),
    #0F2027
  );

  /* Estados */
  --color-success: #28a745;
  --color-danger: #dc2626;
  --color-warning: #ffc107;
  --color-info: var(--color-primary, #2563eb);
  --color-purple: #7c3aed;

  /* Radios y sombras */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  --shadow-sm: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.10);
  --shadow-lg: 0 18px 38px rgba(0,0,0,0.18);

  /* Spacing (escala 4-px) */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;

  /*
   * Breakpoints estándar (referencia — CSS nativo no soporta var() en @media)
   *   --bp-xs:  480px   ultra-small / móvil pequeño
   *   --bp-sm:  640px   móvil grande / modales compactos
   *   --bp-md:  768px   tablet (principal)
   *   --bp-sidebar: 900px   sidebar toggle
   *   --bp-lg:  1024px  desktop / tablet grande
   */
}

:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  /* Colores base (dark) */
  --color-surface: #0b1220;
  --color-surface-muted: #0f1a30;
  --color-surface-strong: #101a2f;
  --color-border: rgba(255, 255, 255, 0.12);
  --color-text: #e5e7eb;
  --color-text-muted: #a1a1aa;
  --color-text-on-strong: #e5e7eb;

  /* Tonos derivados (dark) */
  --color-bg-subtle: #111827;
  --color-primary-light: color-mix(in srgb, var(--color-primary, #2563eb) 22%, transparent);

  /* Sidebar / navegación (dark, derivado) */
  --gradient-sidebar: linear-gradient(
    to right,
    color-mix(in srgb, var(--color-primary-2, #1e3a8a) 35%, #060d12),
    color-mix(in srgb, var(--color-primary-2, #1e3a8a) 18%, #060d12),
    #060d12
  );

  /* Estados (dark) */
  --color-purple: #a78bfa;

  /* Sombras (dark) */
  --shadow-sm: 0 6px 18px rgba(0,0,0,0.45);
  --shadow-md: 0 10px 30px rgba(0,0,0,0.55);
  --shadow-lg: 0 18px 46px rgba(0,0,0,0.65);
}