/* ==========================================================================
   MAD.CEO · Control
   tokens.css — Variables de diseño: color, tipografía, espacio, sombras.

   Paleta del manual MAD.CEO:
     Abismo #121212 · Verde Eldritch #3A6351 · Cian interfaz #90E0EF
     Púrpura Arcano #4B3F72 · Gris piedra #CACFD2 · Blanco ceniza #F2F2EE

   Reglas (mantenerlas al agregar componentes nuevos):
     · Verde eldritch = acción (botón primario, estado activo).
     · Cian = interfaz (enlaces, foco, indicadores).
     · Púrpura arcano = sólo atmósfera (degradados de fondo).
     · Radios: 4px en botones y campos, 6px en tarjetas y paneles,
       8px en modales; etiquetas casi rectas (3px), avatares redondos.
   ========================================================================== */

:root {
  /* --- Marca ------------------------------------------------------------ */
  --abismo: #121212;
  --eldritch: #3a6351;
  --cian: #90e0ef;
  --arcano: #4b3f72;
  --piedra: #cacfd2;
  --ceniza: #f2f2ee;

  /* --- Tipografía ------------------------------------------------------- */
  --fuente: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fuente-display: 'Playfair Display', 'Iowan Old Style', Georgia, serif;
  --fuente-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --t-xs:   0.7188rem;   /* 11.5px */
  --t-sm:   0.8125rem;   /* 13px   */
  --t-base: 0.875rem;    /* 14px   */
  --t-md:   0.9688rem;   /* 15.5px */
  --t-lg:   1.125rem;
  --t-xl:   1.375rem;
  --t-2xl:  1.75rem;
  --t-3xl:  2.25rem;
  --t-4xl:  2.875rem;

  /* --- Espaciado -------------------------------------------------------- */
  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 0.75rem;
  --e-4: 1rem;
  --e-5: 1.25rem;
  --e-6: 1.5rem;
  --e-8: 2rem;
  --e-10: 2.5rem;
  --e-12: 3rem;
  --e-16: 4rem;

  /* --- Radios ----------------------------------------------------------- */
  --r-badge: 3px;
  --r-xs: 3px;
  --r-sm: 4px;
  --r-md: 4px;
  --r-lg: 6px;
  --r-xl: 6px;
  --r-2xl: 8px;
  --r-pill: 999px;

  /* --- Movimiento ------------------------------------------------------- */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-suave: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-rebote: cubic-bezier(0.34, 1.56, 0.64, 1);
  --v-rapida: 140ms;
  --v-media: 240ms;
  --v-lenta: 420ms;

  /* --- Estructura ------------------------------------------------------- */
  --lateral-ancho: 252px;
  --superior-alto: 68px;
  --contenido-max: 1560px;

  /* --- Capas ------------------------------------------------------------ */
  --z-lateral: 60;
  --z-superior: 50;
  --z-velo: 55;
  --z-modal: 120;
  --z-confirmar: 140;
  --z-grano: 150;
  --z-saltar: 200;
}

/* ==========================================================================
   MODO OSCURO · el Abismo (por defecto)
   ========================================================================== */

:root,
:root[data-tema='oscuro'] {
  color-scheme: dark;

  --fondo:        #121212;
  --fondo-2:      #0f1110;
  --superficie:   #171a19;
  --superficie-2: #1c201e;
  --superficie-3: #252b28;
  --superficie-hover: #222825;

  --borde:        rgba(178, 196, 186, 0.1);
  --borde-fuerte: rgba(178, 196, 186, 0.19);
  --borde-marca:  rgba(127, 181, 154, 0.46);

  --texto:    #f2f2ee;
  --texto-2:  #cacfd2;
  --texto-3:  #8e9599;
  --texto-inv: #121212;

  --marca:        #3a6351;
  --marca-hover:  #457862;
  --marca-tenue:  rgba(58, 99, 81, 0.24);
  --marca-tenue-2: rgba(58, 99, 81, 0.4);
  --marca-texto:  #8cc7a8;
  --sobre-marca:  #f2f2ee;

  --enlace:       #90e0ef;
  --enlace-hover: #c4f0f7;
  --enfoque:      #90e0ef;
  --enfoque-tenue: rgba(144, 224, 239, 0.16);

  --sombra-sm: 0 1px 2px rgba(3, 8, 6, 0.55);
  --sombra-md: 0 8px 22px -8px rgba(3, 8, 6, 0.72);
  --sombra-lg: 0 26px 56px -20px rgba(3, 8, 6, 0.86);
  --sombra-marca: 0 10px 28px -12px rgba(58, 99, 81, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.08);

  --malla-1: rgba(58, 99, 81, 0.22);
  --malla-2: rgba(75, 63, 114, 0.2);
  --rejilla: rgba(202, 207, 210, 0.035);
  --grano-opacidad: 0.05;

  /* Tonos de etiqueta: fondo / texto / sólido (desaturados para el Abismo) */
  --tono-azul-f:  rgba(144, 224, 239, 0.12);
  --tono-azul-t:  #a9e6f2;
  --tono-azul-s:  #6fc3d6;

  --tono-indigo-f: rgba(130, 115, 184, 0.17);
  --tono-indigo-t: #bdb2e6;
  --tono-indigo-s: #8273b8;

  --tono-cielo-f: rgba(95, 168, 201, 0.15);
  --tono-cielo-t: #9fcde2;
  --tono-cielo-s: #5fa8c9;

  --tono-turquesa-f: rgba(79, 179, 160, 0.15);
  --tono-turquesa-t: #92d3c5;
  --tono-turquesa-s: #4fb3a0;

  --tono-verde-f: rgba(94, 158, 126, 0.18);
  --tono-verde-t: #9ccfb4;
  --tono-verde-s: #5e9e7e;

  --tono-lima-f: rgba(157, 184, 106, 0.15);
  --tono-lima-t: #c2d79d;
  --tono-lima-s: #9db86a;

  --tono-ambar-f: rgba(212, 165, 74, 0.16);
  --tono-ambar-t: #e8c987;
  --tono-ambar-s: #d4a54a;

  --tono-naranja-f: rgba(217, 137, 82, 0.16);
  --tono-naranja-t: #edb58e;
  --tono-naranja-s: #d98952;

  --tono-violeta-f: rgba(154, 127, 207, 0.17);
  --tono-violeta-t: #c9b7ec;
  --tono-violeta-s: #9a7fcf;

  --tono-rosa-f: rgba(208, 111, 128, 0.17);
  --tono-rosa-t: #eba3af;
  --tono-rosa-s: #d06f80;

  --tono-gris-f: rgba(178, 196, 186, 0.1);
  --tono-gris-t: #b6bcbf;
  --tono-gris-s: #8a938f;
}

/* ==========================================================================
   MODO CLARO · Hueso
   ========================================================================== */

:root[data-tema='claro'] {
  color-scheme: light;

  --fondo:        #eceee9;
  --fondo-2:      #f7f8f5;
  --superficie:   #fbfbf9;
  --superficie-2: #f2f3ef;
  --superficie-3: #e5e9e3;
  --superficie-hover: #edf0ea;

  --borde:        rgba(22, 34, 28, 0.1);
  --borde-fuerte: rgba(22, 34, 28, 0.19);
  --borde-marca:  rgba(58, 99, 81, 0.42);

  --texto:    #141816;
  --texto-2:  #3e4642;
  --texto-3:  #646e69;
  --texto-inv: #f2f2ee;

  --marca:        #3a6351;
  --marca-hover:  #2e5142;
  --marca-tenue:  rgba(58, 99, 81, 0.1);
  --marca-tenue-2: rgba(58, 99, 81, 0.18);
  --marca-texto:  #2d5444;
  --sobre-marca:  #f6f7f4;

  --enlace:       #1b6475;
  --enlace-hover: #0f4855;
  --enfoque:      #1b6475;
  --enfoque-tenue: rgba(27, 100, 117, 0.14);

  --sombra-sm: 0 1px 2px rgba(20, 34, 27, 0.07);
  --sombra-md: 0 8px 22px -10px rgba(20, 34, 27, 0.18);
  --sombra-lg: 0 26px 54px -22px rgba(20, 34, 27, 0.28);
  --sombra-marca: 0 10px 24px -12px rgba(58, 99, 81, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.12);

  --malla-1: rgba(58, 99, 81, 0.09);
  --malla-2: rgba(75, 63, 114, 0.06);
  --rejilla: rgba(22, 34, 28, 0.04);
  --grano-opacidad: 0.035;

  --tono-azul-f:  rgba(27, 100, 117, 0.1);
  --tono-azul-t:  #155766;
  --tono-azul-s:  #2a8aa0;

  --tono-indigo-f: rgba(75, 63, 114, 0.1);
  --tono-indigo-t: #463b6b;
  --tono-indigo-s: #6a5ba3;

  --tono-cielo-f: rgba(36, 106, 140, 0.1);
  --tono-cielo-t: #1f5c79;
  --tono-cielo-s: #3b84a8;

  --tono-turquesa-f: rgba(22, 115, 98, 0.1);
  --tono-turquesa-t: #135f51;
  --tono-turquesa-s: #23907c;

  --tono-verde-f: rgba(58, 99, 81, 0.12);
  --tono-verde-t: #2d5444;
  --tono-verde-s: #3f7a60;

  --tono-lima-f: rgba(92, 115, 40, 0.11);
  --tono-lima-t: #4d6120;
  --tono-lima-s: #6e8a32;

  --tono-ambar-f: rgba(150, 105, 15, 0.12);
  --tono-ambar-t: #7a5508;
  --tono-ambar-s: #b07f1c;

  --tono-naranja-f: rgba(160, 82, 25, 0.11);
  --tono-naranja-t: #86431a;
  --tono-naranja-s: #b86530;

  --tono-violeta-f: rgba(94, 70, 150, 0.1);
  --tono-violeta-t: #4f3b80;
  --tono-violeta-s: #7458b0;

  --tono-rosa-f: rgba(160, 50, 72, 0.1);
  --tono-rosa-t: #8c2b40;
  --tono-rosa-s: #b44a5f;

  --tono-gris-f: rgba(22, 34, 28, 0.07);
  --tono-gris-t: #4a524e;
  --tono-gris-s: #6e7773;
}

/* ==========================================================================
   Preferencias del sistema
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}