/*
  Sistema de diseño — A&R Soluciones Integrales
  Inspirado en la referencia de estilo "Samara": papel cálido, tinta negra,
  un solo azul vivo como acento de acción, tipografía ligera y aireada.
  Tema: claro (fijo — ver header.php, data-theme="light").
  Breakpoints de referencia (usar literal en @media, CSS no permite variables ahí):
  480px móvil grande · 768px tablet · 1024px escritorio · 1200px escritorio grande
*/

:root {
  /* Paleta base */
  --color-sky-blue: #0096F7;
  --color-signal-orange: #FF4000;
  --color-ink: #14130F;
  --color-pure-white: #FFFFFF;
  --color-parchment: #FDFDF7;
  --color-warm-sand: #F5F2DE;
  --color-card: #F7F7F0;
  --color-driftwood: #E7E3E1;
  --color-ash: #D3D3D3;
  --color-stone: #8F8C86;
  --color-graphite: #5C5A54;
  --color-evergreen: #375033;
  --color-alerta: #C23B22;

  /* Roles semánticos — el resto del sitio usa estos nombres, no la paleta base */
  --color-fondo: var(--color-parchment);
  --color-fondo-alterno: var(--color-warm-sand);
  --color-texto: var(--color-ink);
  --color-texto-suave: var(--color-graphite);
  --color-texto-invertido: var(--color-pure-white);
  --color-borde: rgba(20, 19, 15, 0.12);
  --color-enlace: var(--color-sky-blue);
  --color-marca: var(--color-sky-blue);
  --color-marca-fuerte: var(--color-ink);
  --color-acento: var(--color-sky-blue);
  --color-acento-fuerte: #0077C2;
  --color-urgente: var(--color-signal-orange);
  --color-urgente-fuerte: #D93600;
  --color-exito: var(--color-evergreen);
  --color-superficie: var(--color-card);
  --color-tinte-azul: rgba(0, 150, 247, 0.09);
  --color-tinte-naranja: rgba(255, 64, 0, 0.08);
  --color-nav-fondo: rgba(253, 253, 247, 0.88);

  /* Tipografía: una sola familia para todo el sitio (títulos ligeros y aireados,
     texto/UI en pesos regulares), sustituto de "regola" por no estar disponible
     en Google Fonts. */
  --fuente-titulos: 'Plus Jakarta Sans', 'Segoe UI', Arial, sans-serif;
  --fuente-texto: 'Plus Jakarta Sans', 'Segoe UI', Arial, sans-serif;
  --peso-ligero: 300;
  --peso-regular: 400;
  --peso-medio: 500;
  --peso-semi: 600;
  --peso-fuerte: 700;

  --texto-xs: clamp(0.78rem, 0.75rem + 0.1vw, 0.85rem);
  --texto-sm: clamp(0.9rem, 0.87rem + 0.1vw, 0.95rem);
  --texto-base: clamp(1.05rem, 1rem + 0.2vw, 1.125rem);
  --texto-lg: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  --texto-xl: clamp(1.6rem, 1.35rem + 1vw, 2.1rem);
  --texto-2xl: clamp(2.1rem, 1.6rem + 2vw, 3rem);
  --texto-3xl: clamp(2.5rem, 1.7rem + 3.2vw, 4.2rem);

  --tracking-ajustado: -0.02em;
  --tracking-titulo: -0.035em;

  /* Espaciado — escala amplia y generosa (secciones separadas por 96–120px) */
  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 0.75rem;
  --e-4: 1rem;
  --e-5: 1.5rem;
  --e-6: 2rem;
  --e-7: 3rem;
  --e-8: 4.5rem;
  --e-9: 6.5rem;

  /* Forma y elevación */
  --radio-sm: 8px;
  --radio-md: 12px;
  --radio-lg: 18px;
  --radio-pastilla: 24px;
  --sombra-sm: 0 0.5px 2px rgba(20, 19, 15, 0.12);
  --sombra-md: 0 2px 10px rgba(20, 19, 15, 0.08);
  --sombra-lg: 0 10px 30px rgba(20, 19, 15, 0.12);

  --transicion-rapida: 150ms ease;
  --transicion-base: 250ms ease;
  --contenedor-max: 1280px;

  --z-nav: 100;
  --z-flotantes: 90;
  --z-modal: 200;
}

/* El tema es claro por diseño (papel cálido). Se deja disponible un bloque
   oscuro solo por si en el futuro se agrega un selector de tema explícito —
   nunca se activa automáticamente con prefers-color-scheme para evitar
   problemas de contraste en un sistema pensado para un único tema. */
:root[data-theme="dark"] {
  --color-fondo: #1B1A16;
  --color-fondo-alterno: #242320;
  --color-texto: #F3F1E9;
  --color-texto-suave: #B9B6AC;
  --color-borde: rgba(255, 255, 255, 0.14);
  --color-superficie: #242320;
  --color-marca: #4DB2FF;
  --color-marca-fuerte: #F3F1E9;
  --color-acento-fuerte: #4DB2FF;
  --color-enlace: #4DB2FF;
  --color-tinte-azul: rgba(77, 178, 255, 0.16);
  --color-tinte-naranja: rgba(255, 64, 0, 0.18);
  --color-nav-fondo: rgba(27, 26, 22, 0.92);
}