/* ==========================================================================
   TOKENS DE DISEÑO · rosaalexandra.com (ADR 0005)
   Único archivo con colores, tipografías, pesos, espacios y sombras.
   Nombres heredados de plantilla-web; valores del Visual Map de la clienta.
   Contraste AA comprobado el 2026-10-23 (ver docs/plantilla/analisis-reutilizacion-plantilla-web.md):
     carbón sobre crema 10,3:1 · magenta sobre crema 5,4:1 · blanco sobre fucsia 4,7:1 ·
     champán sobre carbón 8,1:1. Fucsia y bronce sobre crema solo en texto grande (≈3,9:1).
     Cian y amarillo no se usan como texto sobre fondos claros.
   Desde el M2 (2026-10-27), los valores de interfaz siguen la vista previa v4 que aprobó la
   clienta: fondo marfil, botones magenta en píldora, tarjetas redondeadas y rosa en el modo oscuro.
   Tema: claro por defecto; oscuro con prefers-color-scheme o con data-tema="oscuro" en <html>.
   ========================================================================== */

/* Fuentes de la marca, servidas desde el sitio (licencia OFL, ver public/fonts/README.md). */
@font-face { font-family: "Cinzel"; font-weight: 500; font-display: swap; src: url("../fonts/cinzel-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Cinzel"; font-weight: 600; font-display: swap; src: url("../fonts/cinzel-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Raleway"; font-weight: 400; font-display: swap; src: url("../fonts/raleway-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Raleway"; font-weight: 500; font-display: swap; src: url("../fonts/raleway-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Raleway"; font-weight: 600; font-display: swap; src: url("../fonts/raleway-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 500; font-display: swap; src: url("../fonts/montserrat-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 600; font-display: swap; src: url("../fonts/montserrat-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 700; font-display: swap; src: url("../fonts/montserrat-latin-700-normal.woff2") format("woff2"); }

:root {
  /* --- Paleta del Visual Map (no se usan sueltos en los componentes) --- */
  --fucsia: #E10B74;
  --magenta: #B5186E;
  --crema: #F9EBD7;
  --amarillo: #FFCA56;
  --champan: #EFCF92;
  --bronce: #936F39;
  --cian: #00C8E0;
  --petroleo: #006478;
  --carbon: #383536;
  --marfil: #FFF8EF;
  --rosa-suave: #FCE4EF;
  --bronce-oscuro: #7A5A2B;

  /* --- Colores de interfaz (modo claro) --- */
  --fondo: var(--marfil);
  --fondo-alterno: var(--crema);
  --superficie: #FFFFFF;
  --texto: var(--carbon);
  --texto-suave: #5C5658;
  --borde: #EAD8C0;
  --borde-campo: #8A7F74;           /* campos de formulario: 3:1 o más sobre blanco y crema */
  --primario: var(--magenta);        /* fondo de botones */
  --primario-hover: #951259;
  --sobre-primario: #FFFFFF;         /* texto de los botones (6,9:1) */
  --enlace: var(--magenta);          /* enlaces de texto (5,4:1 sobre crema) */
  --enlace-hover: var(--carbon);
  --acento: var(--bronce);           /* líneas, marcos, números grandes */
  --acento-texto: var(--bronce-oscuro); /* bronce como texto chico (5,6:1 sobre marfil) */
  --destacado: var(--fucsia);        /* palabra destacada en títulos grandes */
  --suave: var(--rosa-suave);        /* fondos rosa suave: fichas, iniciales, bandas */
  --resaltado: var(--amarillo);      /* subrayado de <mark> */
  --resaltado-2: #F6B6D3;
  --resaltado-texto: inherit;
  --banda: var(--magenta);           /* banda de llamada al final de cada página */
  --sobre-banda: #FFFFFF;
  --acento-sobre-banda: var(--amarillo);
  --tarjeta-fuerte: var(--magenta);  /* tarjeta destacada de un grupo */
  --tarjeta-bronce: var(--bronce-oscuro);
  --sobre-tarjeta-fuerte: #FFFFFF;
  --insignia: var(--amarillo);       /* fichas de las secciones */
  --sobre-insignia: var(--carbon);
  --insignia-fuerte: var(--magenta);
  --insignia-petroleo: var(--petroleo);
  --sobre-insignia-fuerte: #FFFFFF;
  --marco-foto: var(--amarillo);     /* marco desplazado de las fotos */
  --marco-foto-2: var(--fucsia);
  --aviso-fondo: #FFF1B8;            /* barra de la vista previa */
  --aviso-texto: #3D2F00;
  --franja: var(--carbon);           /* fondo de franjas oscuras (pie) */
  --sobre-franja: #F2E7DA;
  --sobre-franja-suave: #CBBDAF;
  --linea-sobre-franja: rgba(255, 255, 255, .12);
  --acento-sobre-franja: var(--champan);
  --firma-sobre-franja: var(--amarillo);
  --franja-secundaria: var(--petroleo);
  --sobre-franja-secundaria: #FFFFFF;
  --foco: var(--fucsia);             /* contorno del foco del teclado */
  --error: #B3261E;
  --exito: #1E6B3A;
  --falta-fondo: #FFF1B8;            /* etiquetas «FALTA» (solo en desarrollo y vistas previas) */
  --falta-texto: #5A4300;
  --sombra: 0 10px 30px rgba(56, 53, 54, .08);

  /* --- Colores fijos (iguales en claro y oscuro) --- */
  --blanco: #FFFFFF;
  --whatsapp: #168043;               /* verde de WhatsApp oscurecido para AA con texto blanco */

  /* --- Tipografía --- */
  --fuente-titulos: "Cinzel", "Trajan Pro", Georgia, "Times New Roman", serif;
  --fuente-texto: "Raleway", "Segoe UI", system-ui, -apple-system, sans-serif;
  --fuente-botones: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --fuente-menu: var(--fuente-botones);
  --peso-titulos: 600;
  --peso-destacado: 600;
  --peso-botones: 600;
  --peso-menu: 500;
  --t-xs: 0.75rem;
  --t-sm: 0.875rem;
  --t-base: 1.0625rem;
  --t-lg: 1.18rem;
  --t-xl: 1.5rem;
  --t-2xl: clamp(1.65rem, 3.2vw, 2.5rem);
  --t-hero: clamp(2.1rem, 4.6vw, 3.5rem);
  --interlineado: 1.65;
  --espaciado-mayus: 0.16em;

  /* --- Espacios y forma --- */
  --e-1: 0.5rem;
  --e-2: 1rem;
  --e-3: 1.5rem;
  --e-4: 2.5rem;
  --e-5: 4.5rem;
  --ancho: 74rem;
  --medida: 38rem;      /* ancho cómodo de lectura */
  --radio: 4px;
  --radio-boton: 999px; /* botones y fichas en píldora */
  --radio-campo: 12px;
  --radio-tarjeta: 24px;
  --radio-foto: 22px;
  --ancho-sitio: 70rem; /* contenedor de las páginas del sitio */
  --borde-marco: 1.5px; /* marco abierto, como el del logo */

  color-scheme: light;
}

/* --- Modo oscuro: del sistema, salvo que la persona eligió claro --- */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fondo: #221F20;
    --fondo-alterno: #2B2728;
    --superficie: #332E30;
    --texto: #F6ECE0;
    --texto-suave: #D4C6B8;
    --borde: #4A4244;
    --borde-campo: #9C928A;
    --enlace: #FF8CC0;
    --enlace-hover: var(--crema);
    --acento: var(--champan);
    --acento-texto: var(--champan);
    --destacado: #FF6FAE;
    --suave: #3D2530;
    --resaltado: transparent;
    --resaltado-2: transparent;
    --resaltado-texto: var(--amarillo);
    --franja: #1C1A1B;
    --franja-secundaria: #00505F;
    --foco: var(--champan);
    --error: #F4AFA7;
    --exito: #8FD19E;
    --sombra: 0 10px 30px rgba(0, 0, 0, .35);
    color-scheme: dark;
  }
}
/* --- Modo oscuro elegido con el botón --- */
:root[data-tema="oscuro"] {
  --fondo: #221F20;
  --fondo-alterno: #2B2728;
  --superficie: #332E30;
  --texto: #F6ECE0;
  --texto-suave: #D4C6B8;
  --borde: #4A4244;
  --borde-campo: #9C928A;
  --enlace: #FF8CC0;
  --enlace-hover: var(--crema);
  --acento: var(--champan);
  --acento-texto: var(--champan);
  --destacado: #FF6FAE;
  --suave: #3D2530;
  --resaltado: transparent;
  --resaltado-2: transparent;
  --resaltado-texto: var(--amarillo);
  --franja: #1C1A1B;
  --franja-secundaria: #00505F;
  --foco: var(--champan);
  --error: #F4AFA7;
  --exito: #8FD19E;
  --sombra: 0 10px 30px rgba(0, 0, 0, .35);
  color-scheme: dark;
}