/* ================================================================
   DESIGN SYSTEM — TOKENS
   Velonet ERP Intranet
   Fuente única de verdad para todos los valores visuales.
   Primario: #592582 (púrpura) · Secundario: #DD9C38 (dorado ámbar)
   Tipografía: Montserrat · Dark Mode: .dark-mode-active en <body>
   ================================================================ */

:root {
  /* Le dice al navegador qué paleta nativa usar (inputs, <select>/<option>,
     scrollbars, checkboxes...). Sin esto, el popup nativo de un <select>
     se sigue pintando con el tema claro del SO aunque el resto del CSS
     esté en modo oscuro -> "desplegable en blanco" en toda la app. */
  color-scheme: light;

  /* ── COLOR SCALES ─────────────────────────────────────────────── */

  /* Primario — Púrpura corporativo #592582 */
  --color-primary-50:  #f5eefb;
  --color-primary-100: #e8d5f5;
  --color-primary-200: #d0aaeb;
  --color-primary-300: #b07cd8;
  --color-primary-400: #8b52bf;
  --color-primary-500: #592582;   /* Base corporativo */
  --color-primary-600: #4a1d6b;
  --color-primary-700: #3a1554;
  --color-primary-800: #2b0f3e;
  --color-primary-900: #1c0a28;

  /* Secundario — Dorado ámbar #DD9C38 */
  --color-secondary-50:  #fdf8ef;
  --color-secondary-100: #faeedd;
  --color-secondary-200: #f5dbb9;
  --color-secondary-300: #eec18b;
  --color-secondary-400: #e4a95a;
  --color-secondary-500: #DD9C38;  /* Base corporativo */
  --color-secondary-600: #c4842a;
  --color-secondary-700: #a26c1e;
  --color-secondary-800: #7a5015;
  --color-secondary-900: #4f330d;

  /* Neutros — Grises */
  --color-neutral-0:   #ffffff;
  --color-neutral-50:  #f8f9fa;
  --color-neutral-100: #f1f3f5;
  --color-neutral-200: #e9ecef;
  --color-neutral-300: #dee2e6;
  --color-neutral-400: #ced4da;
  --color-neutral-500: #adb5bd;
  --color-neutral-600: #868e96;
  --color-neutral-700: #495057;
  --color-neutral-800: #343a40;
  --color-neutral-900: #212529;
  --color-neutral-950: #0d0f10;

  /* Semánticos — success re-mapeado a naranja de marca, info a morado de marca */
  --color-success:       #DD9C38;
  --color-success-light: rgba(221, 156, 56, 0.12);
  --color-warning:       #d97706;
  --color-warning-light: rgba(3, 3, 3, 0.12);
  --color-error:         #dc2626;
  --color-error-light:   rgba(220, 38, 38, 0.12);
  --color-info:          #592582;
  --color-info-light:    rgba(89, 37, 130, 0.12);

  /* ── TIPOGRAFÍA ───────────────────────────────────────────────── */
  --font-sans: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Escala de tamaños */
  --text-xs:      0.6875rem;  /* 11px — metadatos, labels tabla */
  --text-sm:      0.8125rem;  /* 13px — texto auxiliar, caps */
  --text-base:    0.9375rem;  /* 15px — cuerpo base del sistema */
  --text-md:      1rem;       /* 16px — texto de formulario */
  --text-lg:      1.125rem;   /* 18px — subtítulos de sección */
  --text-xl:      1.25rem;    /* 20px — títulos de card */
  --text-2xl:     1.5rem;     /* 24px — títulos de página */
  --text-3xl:     1.875rem;   /* 30px — títulos H1 */
  --text-4xl:     2.25rem;    /* 36px — display secundario */
  --text-display: 2.875rem;   /* 46px — display principal */

  /* Pesos */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extrabold: 800;

  /* Line heights */
  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* Letter spacing */
  --tracking-tight:   -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.08em;
  --tracking-widest:  0.12em;

  /* ── ESPACIADO ────────────────────────────────────────────────── */
  --space-1:  0.25rem;    /* 4px */
  --space-2:  0.5rem;     /* 8px */
  --space-3:  0.75rem;    /* 12px */
  --space-4:  1rem;       /* 16px */
  --space-5:  1.25rem;    /* 20px */
  --space-6:  1.5rem;     /* 24px */
  --space-7:  1.75rem;    /* 28px */
  --space-8:  2rem;       /* 32px */
  --space-10: 2.5rem;     /* 40px */
  --space-12: 3rem;       /* 48px */
  --space-16: 4rem;       /* 64px */

  /* ── RADIOS DE BORDE ──────────────────────────────────────────── */
  --radius-xs:   3px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  20px;
  --radius-3xl:  24px;
  --radius-full: 9999px;

  /* ── SOMBRAS ──────────────────────────────────────────────────── */
  --shadow-xs:    0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md:    0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg:    0 10px 15px -3px rgba(0, 0, 0, 0.07), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
  --shadow-xl:    0 20px 25px -5px rgba(0, 0, 0, 0.09), 0 8px 10px -6px rgba(0, 0, 0, 0.06);
  --shadow-2xl:   0 25px 50px -12px rgba(0, 0, 0, 0.12);
  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.05);

  /* ── SUPERFICIES — Modo claro ─────────────────────────────────── */
  --surface-page:    #f3f4f7;   /* Fondo de página */
  --surface-base:    #ffffff;   /* Cards, paneles base */
  --surface-raised:  #ffffff;   /* Elementos elevados */
  --surface-overlay: #ffffff;   /* Modales, dropdowns */
  --surface-sunken:  #f0f1f4;   /* Inputs, fondos internos */
  --surface-card:    #ffffff;

  /* ── BORDES — Modo claro ──────────────────────────────────────── */
  --border-subtle:   rgba(0, 0, 0, 0.05);
  --border-default:  rgba(0, 0, 0, 0.10);
  --border-strong:   rgba(0, 0, 0, 0.18);
  --border-focus:    var(--color-primary-500);

  /* ── TEXTO — Modo claro ───────────────────────────────────────── */
  --text-primary:    #1a1d23;
  --text-secondary:  #4b5563;
  --text-tertiary:   #9ca3af;
  --text-disabled:   #d1d5db;
  --text-inverse:    #ffffff;
  --text-link:       var(--color-primary-500);
  --text-link-hover: var(--color-primary-600);

  /* ── ESTADOS INTERACTIVOS ─────────────────────────────────────── */
  --focus-ring:      0 0 0 3px rgba(89, 37, 130, 0.25);
  --hover-overlay:   rgba(0, 0, 0, 0.04);
  --active-overlay:  rgba(0, 0, 0, 0.08);

  /* ── TRANSICIONES ─────────────────────────────────────────────── */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:   cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --transition-fast: 150ms var(--ease-standard);
  --transition-base: 200ms var(--ease-standard);
  --transition-slow: 300ms var(--ease-standard);

  /* ── SUPERFICIES DE NAVEGACIÓN ──────────────────────────────────
     Token dedicado para header/topbar/footer.
     NO usa --corp-purple-deep para evitar el bug de dark mode
     donde ese token se reasigna a un tono claro.
  ─────────────────────────────────────────────────────────────── */
  --surface-nav:         #2D144B;
  --surface-nav-dark:    #13151c;
  --surface-sidebar:     #1e1030;
  --nav-text:            rgba(255, 255, 255, 0.92);
  --nav-text-muted:      rgba(255, 255, 255, 0.60);
  --nav-border:          rgba(255, 255, 255, 0.08);
  --nav-hover-bg:        rgba(255, 255, 255, 0.08);
  --nav-active-bg:       rgba(221, 156, 56, 0.15);
  --nav-active-text:     #DD9C38;

  /* ── ALIASES LEGACY ─────────────────────────────────────────────
     Permiten que el CSS existente funcione sin reescritura masiva.
     Todos apuntan al nuevo sistema de tokens.
  ─────────────────────────────────────────────────────────────── */
  --corp-purple-deep:  var(--color-primary-700);
  --corp-purple:       var(--color-primary-500);
  --corp-orange:       var(--color-secondary-500);
  --corp-orange-hover: var(--color-secondary-600);
  --corp-text-dark:    var(--text-primary);
  --corp-text-muted:   var(--text-secondary);
  --corp-bg-light:     var(--surface-page);
  --corp-bg-dark:      #0f1117;
  --corp-shadow:       var(--shadow-md);
  --corp-shadow-hover: var(--shadow-xl);
  --corp-radius:       var(--radius-xl);
  --font-main:         var(--font-sans);
  --font-secondary:    var(--font-sans);
}

/* ── DARK MODE ────────────────────────────────────────────────────
   NOTA: --surface-nav y --surface-sidebar NO se redefinen en dark mode
   porque ya tienen sus valores propios correctos para fondo oscuro.
   Están diseñados para verse bien sobre body oscuro.
   Solo se ajusta --surface-nav-dark cuando el header necesita más contraste.
   Aplicado con clase .dark-mode-active en <body>.
   NO usa fondo negro puro — usa grises oscuros con profundidad real.
─────────────────────────────────────────────────────────────────── */
.dark-mode-active {
  color-scheme: dark;

  /* Superficies */
  --surface-page:    #0f1117;
  --surface-base:    #1a1d23;
  --surface-raised:  #22262e;
  --surface-overlay: #2a2f38;
  --surface-sunken:  #0c0e13;
  --surface-card:    #1a1d23;

  /* Bordes */
  --border-subtle:   rgba(255, 255, 255, 0.05);
  --border-default:  rgba(255, 255, 255, 0.10);
  --border-strong:   rgba(255, 255, 255, 0.18);
  --border-focus:    var(--color-secondary-500);

  /* Texto */
  --text-primary:    #edf0f3;
  --text-secondary:  #9ba3af;
  --text-tertiary:   #636b76;
  --text-disabled:   #374151;
  --text-inverse:    #0f1117;
  --text-link:       var(--color-secondary-400);
  --text-link-hover: var(--color-secondary-300);

  /* Interacción */
  --focus-ring:      0 0 0 3px rgba(221, 156, 56, 0.30);
  --hover-overlay:   rgba(255, 255, 255, 0.04);
  --active-overlay:  rgba(255, 255, 255, 0.08);

  /* Sombras oscuras (más densas) */
  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.45), 0 2px 4px -2px rgba(0, 0, 0, 0.35);
  --shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.45), 0 4px 6px -4px rgba(0, 0, 0, 0.35);
  --shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.55), 0 8px 10px -6px rgba(0, 0, 0, 0.45);

  /* Nav en dark mode: más oscuro y neutro, sin toques violeta */
  --surface-nav:     #13151c;
  --surface-sidebar: #0f1117;

  /* --color-primary-50 se usa en ~10 archivos como fondo de "seleccionado/
     hover" (siempre lavanda casi blanco). Sin este override queda igual de
     claro en modo oscuro -texto secundario ilegible encima-. */
  --color-primary-50: rgba(139, 92, 246, 0.14);

  /* Aliases legacy dark */
  --corp-purple-deep:  var(--color-primary-200);
  --corp-purple:       var(--color-primary-400);
  --corp-text-dark:    var(--text-primary);
  --corp-text-muted:   var(--text-secondary);
  --corp-bg-light:     var(--surface-page);
  --corp-shadow:       var(--shadow-md);
  --corp-shadow-hover: var(--shadow-xl);
}