/* ==========================================================================
   tokens.css — SIP Red de Colegios
   Fuente de verdad: design.md §2. No editar valores aquí sin actualizar el doc.
   Cargar SIEMPRE antes que base.css.
   ========================================================================== */

:root {
  /* ---------- Marca ---------- */
  --sip-azul:            #1f3b73;
  --sip-azul-insignia:   #152a52;
  --sip-celeste-oscuro:  #4a90e2;
  --sip-celeste-claro:   #5bc0eb;
  --sip-coral:           #f25c54;
  --sip-naranjo:         #f6a03d;
  --sip-amarillo-oscuro: #eadd0a;
  --sip-amarillo-claro:  #f4d35e;
  --sip-verde-oscuro:    #5aab58;
  --sip-verde-claro:     #7bcfa3;
  --sip-morado:          #a8559b;
  --sip-rosado:          #e94f95;

  /* ---------- Grises utilitarios (no institucionales) ---------- */
  --sip-gray-50:  #f7f8fa;
  --sip-gray-100: #eff1f5;
  --sip-gray-200: #e3e7ee;
  --sip-gray-300: #cdd4e0;
  --sip-gray-400: #98a2b3;
  --sip-gray-500: #6b7280;
  --sip-gray-600: #4b5563;
  --sip-gray-700: #374151;

  /* ---------- Superficies ---------- */
  --sip-bg:            var(--sip-gray-50);
  --sip-surface:       #ffffff;
  --sip-surface-alt:   var(--sip-gray-100);
  --sip-surface-dark:  var(--sip-azul-insignia);
  --sip-border:        var(--sip-gray-200);
  --sip-border-strong: var(--sip-gray-300);

  /* ---------- Texto ---------- */
  --sip-text:         var(--sip-azul-insignia);
  --sip-text-muted:   var(--sip-gray-500);
  --sip-text-subtle:  var(--sip-gray-400);
  --sip-text-inverse: #ffffff;
  --sip-link:         var(--sip-azul);

  /* ---------- Semánticos ---------- */
  --sip-danger:     var(--sip-coral);
  --sip-danger-fg:  #c0392f;
  --sip-danger-bg:  #fdebea;
  --sip-danger-bd:  #fac6c3;

  --sip-warning:    var(--sip-naranjo);
  --sip-warning-fg: #9a5a06;
  --sip-warning-bg: #fef4e8;
  --sip-warning-bd: #fcdebb;

  --sip-success:    var(--sip-verde-oscuro);
  --sip-success-fg: #3d7a3c;
  --sip-success-bg: #ebf5eb;
  --sip-success-bd: #c5e2c5;

  --sip-info:       var(--sip-celeste-oscuro);
  --sip-info-fg:    #1f6fd0;
  --sip-info-bg:    #e9f2fc;
  --sip-info-bd:    #c0d8f5;

  /* ---------- Series de datos (orden fijo) ---------- */
  --sip-serie-1:  #152a52;  --sip-serie-2:  #f6a03d;
  --sip-serie-3:  #4a90e2;  --sip-serie-4:  #5aab58;
  --sip-serie-5:  #a8559b;  --sip-serie-6:  #f25c54;
  --sip-serie-7:  #5bc0eb;  --sip-serie-8:  #e94f95;
  --sip-serie-9:  #7bcfa3;  --sip-serie-10: #f4d35e;

  /* ---------- Tipografía ---------- */
  --sip-font: "Open Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --sip-font-mono: "JetBrains Mono", "Consolas", ui-monospace, monospace;

  --sip-fs-xs:  0.75rem;
  --sip-fs-sm:  0.8125rem;
  --sip-fs-md:  0.9375rem;
  --sip-fs-lg:  1.125rem;
  --sip-fs-xl:  1.375rem;
  --sip-fs-2xl: 1.75rem;
  --sip-fs-3xl: 2.25rem;
  --sip-fs-4xl: 2.75rem;    /* 44px — solo titular de pantalla de acceso */

  --sip-lh-tight: 1.25;
  --sip-lh-base:  1.55;

  /* ---------- Espaciado (base 4px) ---------- */
  --sip-s-1: 4px;   --sip-s-2: 8px;   --sip-s-3: 12px;  --sip-s-4: 16px;
  --sip-s-5: 20px;  --sip-s-6: 24px;  --sip-s-8: 32px;  --sip-s-10: 40px;
  --sip-s-12: 48px; --sip-s-16: 64px;

  /* ---------- Radios ---------- */
  --sip-r-sm: 4px;  --sip-r-md: 6px;  --sip-r-lg: 10px;  --sip-r-xl: 16px;
  --sip-r-pill: 999px;

  /* ---------- Sombras ---------- */
  --sip-sh-sm: 0 1px 2px rgba(21, 42, 82, .08);
  --sip-sh-md: 0 2px 8px rgba(21, 42, 82, .10);
  --sip-sh-lg: 0 8px 24px rgba(21, 42, 82, .14);

  /* ---------- Foco, transición, capas ---------- */
  --sip-focus: 0 0 0 3px rgba(74, 144, 226, .55);
  --sip-t-fast: 120ms ease;
  --sip-t-base: 200ms ease;

  --sip-z-dropdown: 1000;
  --sip-z-sticky:   1020;
  --sip-z-modal:    1050;
  --sip-z-toast:    1080;

  /* ---------- Layout ---------- */
  --sip-topbar-h:    56px;
  --sip-sidebar-w:   240px;
  --sip-content-max: 1280px;

  /* ---------- Derivados (agregar a design.md §2) ---------- */
  --sip-overlay:      rgba(21, 42, 82, .45);
  --sip-hover:        var(--sip-gray-50);
  --sip-accent:       var(--sip-azul);   /* acento de texto: eyebrow, callout, ghost */
  --sip-danger-solid:       #c0392f;     /* fondo del botón destructivo */
  --sip-danger-solid-hover: #a32e26;
  --sip-shimmer:      rgba(255, 255, 255, .55);
  --sip-nav-hover:    rgba(255, 255, 255, .07);
  --sip-nav-active:   rgba(255, 255, 255, .12);
  --sip-on-dark-muted: #9aacc9;
  /* Único degradado permitido: panel de marca a sangre completa (acceso). */
  --sip-brand-gradient: linear-gradient(150deg, var(--sip-azul-insignia) 0%, var(--sip-azul) 100%);
  --sip-on-dark:        rgba(255, 255, 255, .82);
  --sip-on-dark-fill:   rgba(255, 255, 255, .10);
  --sip-on-dark-line:   rgba(255, 255, 255, .20);

  --sip-control-h:     36px;
  --sip-control-h-sm:  30px;
  --sip-row-h:         40px;
  --sip-row-h-compact: 32px;
}

/* ==========================================================================
   Modo oscuro — design.md §14. Opt-in con <html data-theme="dark">.
   Solo redefine tokens; ningún componente necesita reglas propias.
   ========================================================================== */

[data-theme="dark"] {
  --sip-bg:            #0e1729;
  --sip-surface:       #152a52;
  --sip-surface-alt:   #1c3462;
  --sip-surface-dark:  #0a1220;
  --sip-border:        #2a4275;
  --sip-border-strong: #3a5490;

  --sip-text:         #eef2f9;
  --sip-text-muted:   #9aacc9;
  --sip-text-subtle:  #6f83a6;
  --sip-link:         var(--sip-celeste-claro);

  --sip-danger-fg:  #ff9a94;  --sip-danger-bg:  #3a1e1d;  --sip-danger-bd:  #5c2f2c;
  --sip-warning-fg: #f6a03d;  --sip-warning-bg: #3a2a12;  --sip-warning-bd: #5c441d;
  --sip-success-fg: #7bcfa3;  --sip-success-bg: #17301f;  --sip-success-bd: #2a4d36;
  --sip-info-fg:    #5bc0eb;  --sip-info-bg:    #12293f;  --sip-info-bd:    #22456a;

  --sip-sh-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --sip-sh-md: 0 2px 8px rgba(0, 0, 0, .40);
  --sip-sh-lg: 0 8px 24px rgba(0, 0, 0, .50);

  --sip-overlay:    rgba(4, 10, 20, .60);
  --sip-hover:      rgba(255, 255, 255, .05);
  --sip-accent:     var(--sip-celeste-claro);
  --sip-shimmer:    rgba(255, 255, 255, .08);
  --sip-nav-hover:  rgba(255, 255, 255, .06);
  --sip-nav-active: rgba(255, 255, 255, .10);

  color-scheme: dark;
}