/* ==========================================================================
   TOKENS DE DISEÑO · rodriguezmarte.com
   Este es el ÚNICO archivo donde se definen colores, tipografías, espacios
   y sombras. Para cambiar la marca o el modo oscuro, edite solo este archivo.
   Colores del manual de marca de RMG: Naranja #D64933, Turquesa #4ECDC4,
   Dark Blue #292F36, Sweet Yellow #FFEEA4 y Menta #F7FFF7. El naranja no
   llega a AA como texto pequeño (4.2:1 sobre Menta): solo va en trazos,
   acentos y títulos grandes (regla 4 del sitio, CLAUDE.md).
   ========================================================================== */

:root {
  /* --- Colores de marca --- */
  --naranja: #D64933;
  --turquesa: #4ECDC4;
  --azul-oscuro: #292F36;
  --amarillo: #FFEEA4;
  --menta: #F7FFF7;

  --marca: var(--azul-oscuro);
  --marca-boton: var(--azul-oscuro);  /* botones (13:1 con blanco) */
  --marca-profunda: #1D2126;          /* pie y franjas oscuras */
  --acento-base: var(--naranja);      /* trazos, líneas e iconos */
  --acento-texto: var(--azul-oscuro); /* antetítulos sobre fondo claro: el naranja no llega a AA */
  --acento-claro: var(--turquesa);    /* acento sobre fondos oscuros (7:1 sobre Dark Blue) */

  /* --- Colores de interfaz (modo claro) --- */
  --fondo: var(--menta);
  --fondo-alterno: #FFFFFF;
  --superficie: #FFFFFF;      /* tarjetas */
  --texto: var(--azul-oscuro);
  --texto-suave: #59626C;     /* 6:1 sobre Menta */
  --borde: #D9E3DF;
  --primario: var(--marca-boton);
  --primario-hover: var(--marca-profunda);
  --sobre-primario: #FFFFFF;
  --enlace: #1F7A74;          /* turquesa oscurecido para enlaces de texto (5:1 sobre Menta) */
  --enlace-hover: var(--azul-oscuro);
  --acento: var(--acento-base);
  --franja: var(--azul-oscuro);   /* fondo de franjas oscuras */
  --sobre-franja: var(--menta);
  --whatsapp: #168043;         /* verde WhatsApp oscurecido para AA con texto blanco */
  --whatsapp-hover: #11663A;
  --whatsapp-texto: #168043;   /* enlaces de WhatsApp como texto */
  --foco: var(--naranja);      /* contorno del foco del teclado (4:1 sobre Menta) */
  --borde-campo: #8A939C;      /* borde de los campos de formulario (3:1 sobre Menta) */
  --resalte: var(--amarillo);  /* fondo del día en el calendario fiscal */
  --sobre-resalte: var(--azul-oscuro);

  /* --- Colores fijos (no cambian en modo oscuro) --- */
  --blanco: #FFFFFF;
  --negro: #1A1A1A;
  --placa-logo: #FFFFFF;      /* el texto gris del logo no se lee sobre fondo oscuro: va sobre esta placa en los dos modos */
  --me-gusta-activo: #C0392B;
  --error: #B3261E;
  --error-sobre-franja: #F4AFA7;
  --ejemplo-fondo: #FFF3CD;
  --ejemplo-texto: #6B5100;
  --google-azul: #4285F4;
  --google-rojo: #EA4335;
  --google-amarillo: #FBBC05;
  --google-verde: #34A853;

  /* --- Transparencias sobre fondos oscuros (franjas, fotos, pie) --- */
  --blanco-05: rgba(255, 255, 255, .05);
  --blanco-06: rgba(255, 255, 255, .06);
  --blanco-12: rgba(255, 255, 255, .12);
  --blanco-20: rgba(255, 255, 255, .2);
  --blanco-60: rgba(255, 255, 255, .6);
  --blanco-85: rgba(255, 255, 255, .85);
  --blanco-86: rgba(255, 255, 255, .86);
  --blanco-94: rgba(255, 255, 255, .94);
  --negro-35: rgba(0, 0, 0, .35);
  --crema-75: rgba(247, 255, 247, .75); /* texto legal del pie (AA) */
  --crema-80: rgba(247, 255, 247, .8);
  --velo-hero-1: rgba(29, 33, 38, .92);  /* degradado Dark Blue sobre la foto de portada */
  --velo-hero-2: rgba(29, 33, 38, .78);
  --velo-hero-3: rgba(29, 33, 38, .45);
  --visor-fondo: rgba(8, 12, 18, .96);

  /* --- Fondos de muestra mientras no hay fotos reales --- */
  --foto-a: linear-gradient(135deg, #3A424B 0%, #292F36 55%, #1D2126 100%);
  --foto-b: linear-gradient(160deg, #4ECDC4 0%, #2E8F89 60%, #1F5F5B 100%);
  --foto-c: linear-gradient(140deg, #59626C 0%, #3A424B 60%, #292F36 100%);
  --foto-d: linear-gradient(150deg, #D64933 0%, #A8361F 55%, #6E2414 100%);
  --foto-e: linear-gradient(130deg, #8A939C 0%, #59626C 50%, #3A424B 100%);
  --foto-hero: radial-gradient(120% 90% at 85% 30%, #3A424B 0%, #292F36 40%, #1D2126 100%);

  /* --- Tipografía: Helvetica del manual, sin fuentes externas --- */
  --fuente-titulos: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --fuente-texto: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --fuente-botones: var(--fuente-texto);
  --fuente-menu: var(--fuente-texto);
  --fuente-codigo: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --peso-titulos: 700;
  --peso-destacado: 700;
  --peso-botones: 700;
  --peso-menu: 500;
  --t-xs: 0.75rem;
  --t-sm: 0.875rem;
  --t-base: 1rem;
  --t-lg: 1.125rem;
  --t-xl: 1.375rem;
  --t-2xl: 1.75rem;
  --t-3xl: clamp(1.75rem, 3.4vw, 2.5rem);
  --t-hero: clamp(2rem, 4.6vw, 3.25rem);
  --espaciado-mayus: 0.14em;

  /* --- Espacios y forma --- */
  --e-1: 0.25rem; --e-2: 0.5rem; --e-3: 0.75rem; --e-4: 1rem;
  --e-6: 1.5rem;  --e-8: 2rem;   --e-12: 3rem;   --e-16: 4rem; --e-24: 6rem;
  --ancho-max: 1160px;
  --radio: 8px;
  --radio-sm: 4px;
  --sombra: 0 1px 2px rgba(41, 47, 54, .06), 0 8px 24px rgba(41, 47, 54, .08);
  --sombra-fuerte: 0 12px 40px rgba(41, 47, 54, .18);
  --sombra-whatsapp: 0 8px 24px rgba(22, 128, 67, .4);
  --transicion: 180ms ease;
}

/* --- Modo oscuro: automático según el sistema, salvo que el usuario elija claro --- */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fondo: #1D2126;
    --fondo-alterno: #23282E;
    --superficie: #292F36;
    --texto: var(--menta);
    --texto-suave: #B4BDC4;
    --borde: #3A424B;
    --primario: var(--turquesa);
    --primario-hover: #7DDCD5;
    --sobre-primario: #1D2126;
    --enlace: var(--turquesa);
    --enlace-hover: #7DDCD5;
    --acento-texto: var(--turquesa);
    --franja: #15181C;
    --whatsapp-texto: #2FB36A;
    --borde-campo: #6B7A8F;
    --resalte: #3D3822;
    --sobre-resalte: var(--amarillo);
    --error: #F2A49B;
    --me-gusta-activo: #EF7B6E;
    --sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
  }
}
/* --- Modo oscuro elegido manualmente con el botón --- */
:root[data-tema="oscuro"] {
  --fondo: #1D2126;
  --fondo-alterno: #23282E;
  --superficie: #292F36;
  --texto: var(--menta);
  --texto-suave: #B4BDC4;
  --borde: #3A424B;
  --primario: var(--turquesa);
  --primario-hover: #7DDCD5;
  --sobre-primario: #1D2126;
  --enlace: var(--turquesa);
  --enlace-hover: #7DDCD5;
  --acento-texto: var(--turquesa);
  --franja: #15181C;
  --whatsapp-texto: #2FB36A;
  --borde-campo: #6B7A8F;
  --resalte: #3D3822;
  --sobre-resalte: var(--amarillo);
  --error: #F2A49B;
  --me-gusta-activo: #EF7B6E;
  --sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
}