/* =====================================================================
   TOKENS DEL SISTEMA DE DISEÑO · versión 2
   Qué hace:    es el ÚNICO lugar del sitio con colores, letras, tamaños,
                espacios, esquinas, sombras y tiempos de movimiento.
                Todos los demás estilos usan estas variables.
   Quién la usa: panel, portal, panel del encargado, web pública
                (NO las invitaciones: cada plantilla es un mundo, R-PLA-07).
   Requisitos:  R-GEN-06, R-GEN-11 a R-GEN-15 · arquitectura.md §4
   Cómo se cambia un color: se cambia aquí y nada más. El revisor automático
   rechaza colores escritos en cualquier otro archivo.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. PALETA (colores reales). Solo se usan dentro de este archivo.
   --------------------------------------------------------------------- */
:root {
  /* Neutros cálidos (tono "papel") */
  --paleta-neutro-0: #FFFFFF;
  --paleta-neutro-25: #FBFAF7;
  --paleta-neutro-50: #F5F3EE;
  --paleta-neutro-100: #ECE9E2;
  --paleta-neutro-200: #DEDAD1;
  --paleta-neutro-300: #C6C1B5;
  --paleta-neutro-400: #A29D91;
  --paleta-neutro-500: #7D786D;
  --paleta-neutro-600: #5E5A51;
  --paleta-neutro-700: #45423B;
  --paleta-neutro-800: #2E2C27;
  --paleta-neutro-900: #1E1D1A;
  --paleta-neutro-950: #141413;

  /* Oro (acento principal) */
  --paleta-oro-50: #FBF6EC;
  --paleta-oro-100: #F4E8CF;
  --paleta-oro-200: #E8D3A6;
  --paleta-oro-300: #D8BA7C;
  --paleta-oro-400: #C6A062;
  --paleta-oro-500: #B08D57;
  --paleta-oro-600: #8F6E3E;
  --paleta-oro-700: #7A5C30;
  --paleta-oro-800: #5C4527;
  --paleta-oro-900: #3F2F1B;

  /* Terracota (acento secundario; nunca para "peligro") */
  --paleta-terracota-50: #FBEFE9;
  --paleta-terracota-100: #F5D9CC;
  --paleta-terracota-200: #EBB8A1;
  --paleta-terracota-300: #DD9273;
  --paleta-terracota-400: #CC6F4B;
  --paleta-terracota-500: #B04A28;
  --paleta-terracota-600: #923B1F;
  --paleta-terracota-700: #742F19;
  --paleta-terracota-800: #552313;
  --paleta-terracota-900: #3A180D;

  /* Estados (claro / oscuro) */
  --paleta-exito-texto: #2F6B3F;   --paleta-exito-fondo: #E7F1EA;
  --paleta-aviso-texto: #8A5A00;   --paleta-aviso-fondo: #FFF4DE;
  --paleta-peligro-texto: #9B2C2C; --paleta-peligro-fondo: #FBEAEA;
  --paleta-info-texto: #6B4F2E;    --paleta-info-fondo: #F4ECE1;
  --paleta-exito-texto-oscuro: #7CC492;   --paleta-exito-fondo-oscuro: #1F2E23;
  --paleta-aviso-texto-oscuro: #E8B45A;   --paleta-aviso-fondo-oscuro: #33270F;
  --paleta-peligro-texto-oscuro: #F08A8A; --paleta-peligro-fondo-oscuro: #3A1E1E;
  --paleta-info-texto-oscuro: #D9BE94;    --paleta-info-fondo-oscuro: #2E261C;

  /* Gráficos (validados para daltonismo en claro y oscuro, arquitectura §4.5) */
  --paleta-dato-1: #B04A28; --paleta-dato-1-oscuro: #C95A32;
  --paleta-dato-2: #269C7A; --paleta-dato-2-oscuro: #2AA27F;
  --paleta-dato-3: #D9A21B; --paleta-dato-3-oscuro: #C08A12;
  --paleta-dato-4: #93507A; --paleta-dato-4-oscuro: #B0608F;
  --paleta-dato-5: #8A9A1E; --paleta-dato-5-oscuro: #8A9A1E;
}

/* ---------------------------------------------------------------------
   2. SIGNIFICADOS · modo claro (lo que usan los estilos)
   --------------------------------------------------------------------- */
:root {
  color-scheme: light;
  --color-fondo: var(--paleta-neutro-50);
  --color-superficie: var(--paleta-neutro-0);
  --color-superficie-resaltada: var(--paleta-neutro-100);
  --color-texto: var(--paleta-neutro-900);
  --color-texto-suave: var(--paleta-neutro-600);
  --color-borde: var(--paleta-neutro-200);
  --color-borde-campo: var(--paleta-neutro-500);
  --color-boton-principal: var(--paleta-neutro-900);
  --color-boton-principal-texto: var(--paleta-neutro-0);
  --color-acento: var(--paleta-oro-700);
  --color-acento-decorativo: var(--paleta-oro-500);
  --color-acento-2: var(--paleta-terracota-600);
  --color-foco: var(--paleta-oro-500);
  --color-exito: var(--paleta-exito-texto);     --color-exito-fondo: var(--paleta-exito-fondo);
  --color-aviso: var(--paleta-aviso-texto);     --color-aviso-fondo: var(--paleta-aviso-fondo);
  --color-peligro: var(--paleta-peligro-texto); --color-peligro-fondo: var(--paleta-peligro-fondo);
  --color-info: var(--paleta-info-texto);       --color-info-fondo: var(--paleta-info-fondo);
  --color-dato-1: var(--paleta-dato-1);
  --color-dato-2: var(--paleta-dato-2);
  --color-dato-3: var(--paleta-dato-3);
  --color-dato-4: var(--paleta-dato-4);
  --color-dato-5: var(--paleta-dato-5);
  --sombra-color: rgb(20 20 19 / 0.08);
  --color-siempre-blanco: var(--paleta-neutro-0);   /* fondo de códigos QR: blanco también en oscuro */
  --color-siempre-negro: var(--paleta-neutro-950);  /* códigos QR y hojas impresas: oscuro también en modo oscuro */
  --color-visor-fondo: rgb(20 20 19 / 0.94);       /* visor de fotos de las invitaciones (igual en claro y oscuro) */
  --color-visor-texto: var(--paleta-neutro-0);
  /* Franja sobria (En memoria en la web): oscura en claro; texto 13,9 · suave 6,2 · borde 3,8 */
  --color-banda-sobria-fondo: var(--paleta-neutro-900);
  --color-banda-sobria-texto: var(--paleta-neutro-100);
  --color-banda-sobria-suave: var(--paleta-neutro-400);
  --color-banda-sobria-borde: var(--paleta-neutro-500);
}

/* ---------------------------------------------------------------------
   3. SIGNIFICADOS · modo oscuro
   Se aplica si la persona eligió "Oscuro", o si eligió "Automático" (o no
   eligió nada) y su dispositivo está en modo oscuro.
   Los dos bloques tienen los mismos valores: si se cambia uno, se cambia el otro.
   --------------------------------------------------------------------- */
:root[data-modo="oscuro"] {
  color-scheme: dark;
  --color-fondo: var(--paleta-neutro-950);
  --color-superficie: var(--paleta-neutro-900);
  --color-superficie-resaltada: var(--paleta-neutro-800);
  --color-texto: var(--paleta-neutro-100);
  --color-texto-suave: var(--paleta-neutro-400);
  --color-borde: var(--paleta-neutro-800);
  --color-borde-campo: var(--paleta-neutro-500);
  --color-boton-principal: var(--paleta-oro-300);
  --color-boton-principal-texto: var(--paleta-neutro-950);
  --color-acento: var(--paleta-oro-300);
  --color-acento-decorativo: var(--paleta-oro-400);
  --color-acento-2: var(--paleta-terracota-300);
  --color-foco: var(--paleta-oro-300);
  --color-exito: var(--paleta-exito-texto-oscuro);     --color-exito-fondo: var(--paleta-exito-fondo-oscuro);
  --color-aviso: var(--paleta-aviso-texto-oscuro);     --color-aviso-fondo: var(--paleta-aviso-fondo-oscuro);
  --color-peligro: var(--paleta-peligro-texto-oscuro); --color-peligro-fondo: var(--paleta-peligro-fondo-oscuro);
  --color-info: var(--paleta-info-texto-oscuro);       --color-info-fondo: var(--paleta-info-fondo-oscuro);
  --color-dato-1: var(--paleta-dato-1-oscuro);
  --color-dato-2: var(--paleta-dato-2-oscuro);
  --color-dato-3: var(--paleta-dato-3-oscuro);
  --color-dato-4: var(--paleta-dato-4-oscuro);
  --color-dato-5: var(--paleta-dato-5-oscuro);
  --sombra-color: rgb(0 0 0 / 0.4);
  /* Franja sobria en oscuro: un gris más claro que el resto; texto 8,3 · suave 5,6 · borde 3,7 */
  --color-banda-sobria-fondo: var(--paleta-neutro-700);
  --color-banda-sobria-texto: var(--paleta-neutro-100);
  --color-banda-sobria-suave: var(--paleta-neutro-300);
  --color-banda-sobria-borde: var(--paleta-neutro-400);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-modo="claro"]) {
    color-scheme: dark;
    --color-fondo: var(--paleta-neutro-950);
    --color-superficie: var(--paleta-neutro-900);
    --color-superficie-resaltada: var(--paleta-neutro-800);
    --color-texto: var(--paleta-neutro-100);
    --color-texto-suave: var(--paleta-neutro-400);
    --color-borde: var(--paleta-neutro-800);
    --color-borde-campo: var(--paleta-neutro-500);
    --color-boton-principal: var(--paleta-oro-300);
    --color-boton-principal-texto: var(--paleta-neutro-950);
    --color-acento: var(--paleta-oro-300);
    --color-acento-decorativo: var(--paleta-oro-400);
    --color-acento-2: var(--paleta-terracota-300);
    --color-foco: var(--paleta-oro-300);
    --color-exito: var(--paleta-exito-texto-oscuro);     --color-exito-fondo: var(--paleta-exito-fondo-oscuro);
    --color-aviso: var(--paleta-aviso-texto-oscuro);     --color-aviso-fondo: var(--paleta-aviso-fondo-oscuro);
    --color-peligro: var(--paleta-peligro-texto-oscuro); --color-peligro-fondo: var(--paleta-peligro-fondo-oscuro);
    --color-info: var(--paleta-info-texto-oscuro);       --color-info-fondo: var(--paleta-info-fondo-oscuro);
    --color-dato-1: var(--paleta-dato-1-oscuro);
    --color-dato-2: var(--paleta-dato-2-oscuro);
    --color-dato-3: var(--paleta-dato-3-oscuro);
    --color-dato-4: var(--paleta-dato-4-oscuro);
    --color-dato-5: var(--paleta-dato-5-oscuro);
    --sombra-color: rgb(0 0 0 / 0.4);
    --color-banda-sobria-fondo: var(--paleta-neutro-700);
    --color-banda-sobria-texto: var(--paleta-neutro-100);
    --color-banda-sobria-suave: var(--paleta-neutro-300);
    --color-banda-sobria-borde: var(--paleta-neutro-400);
  }
}

/* ---------------------------------------------------------------------
   4. LETRAS (arquitectura §4.6). Se piden con display=swap.
   --------------------------------------------------------------------- */
:root {
  --letra-titulo: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --letra-texto: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --letra-manuscrita: 'Sacramento', cursive;

  /* Tamaños en rem: respetan el tamaño de letra que elige cada persona */
  --tamano-chico: 0.8125rem;      /* 13 px */
  --tamano-suave: 0.875rem;       /* 14 px */
  --tamano-base: 1rem;            /* 16 px */
  --tamano-m: 1.125rem;           /* 18 px */
  --tamano-l: 1.375rem;           /* 22 px */
  --tamano-xl: 1.75rem;           /* 28 px */
  --tamano-2xl: 2.25rem;          /* 36 px */
  --tamano-manuscrita: 2.75rem;   /* 44 px (mínimo de la manuscrita: 28 px) */

  --interlineado-texto: 1.55;
  --interlineado-titulo: 1.2;
}

/* ---------------------------------------------------------------------
   5. ESPACIOS, ESQUINAS Y SOMBRAS (arquitectura §4.7, estilo "Suave")
   --------------------------------------------------------------------- */
:root {
  --espacio-1: 0.25rem;   /* 4 px */
  --espacio-2: 0.5rem;    /* 8 px */
  --espacio-3: 0.75rem;   /* 12 px */
  --espacio-4: 1rem;      /* 16 px */
  --espacio-5: 1.5rem;    /* 24 px */
  --espacio-6: 2rem;      /* 32 px */
  --espacio-7: 3rem;      /* 48 px */
  --espacio-8: 4rem;      /* 64 px */

  --radio-chico: 6px;
  --radio-control: 8px;
  --radio-tarjeta: 12px;
  --radio-dialogo: 16px;
  --radio-redondo: 999px;

  --sombra-baja: 0 1px 2px var(--sombra-color);
  --sombra-media: 0 4px 16px var(--sombra-color);
  --anillo-foco: 0 0 0 3px var(--color-foco);
}

/* Densidad cómoda (web, portal, cuestionario, encargado) — de fábrica */
:root {
  --alto-control: 2.75rem;            /* 44 px: cómodo para el dedo */
  --relleno-tarjeta: var(--espacio-4);
  --separacion-bloques: var(--espacio-5);
}

/* Densidad compacta (panel del administrador en computadora) */
[data-densidad="compacta"] {
  --alto-control: 2.25rem;            /* 36 px */
  --relleno-tarjeta: var(--espacio-3);
  --separacion-bloques: var(--espacio-4);
}

@media (pointer: coarse) {
  [data-densidad="compacta"] {
    --alto-control: 2.75rem;          /* en celular, siempre 44 px */
  }
}

/* ---------------------------------------------------------------------
   6. MOVIMIENTO (arquitectura §4.9). "Reducir movimiento" lo apaga.
   --------------------------------------------------------------------- */
:root {
  --duracion-rapida: 150ms;
  --duracion-media: 250ms;
  --curva-salida: cubic-bezier(0.2, 0, 0, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duracion-rapida: 0ms;
    --duracion-media: 0ms;
  }
}