/* ==========================================================================
   VARIABLES.CSS
   Sistema de diseño — Tejedoras de Nariño

   Filosofía de color: el morado profundo abre la página (dignidad, la mujer
   que teje), el verde profundo la cierra (territorio, la tierra que sostiene).
   Entre ambos, un tono piedra neutro y frío —no un crema cálido genérico—
   deja que morado y verde sean quienes hablan.
   ========================================================================== */

:root {

   
/* Variaciones cromáticas basadas en #B08A34 para mantener el efecto 3D */
--color-base: #B08A34;
      --dorado-oscuro: #5e4616;       /* Para el fondo hundido (menos luz) */
      --dorado-claro: #d8b056;        /* Para los bordes y el marco (más brillo) */
      --dorado-medio: #B08A34;        /* Para la estrella de 8 puntas */
      --dorado-intenso: #8c6b22;      /* Para el centro (contraste de volumen) */
      
      --fondo-pantalla: #0a0a0c;
      --sombra-3d: rgba(0, 0, 0, 0.85);
    

   /*reduce header al hacer scroll*/
  --header-padding: clamp(1rem, 2vw, 2rem);
  --logo-size: clamp(2rem, 4vw, 3.5rem);

  /* ---- Morado — dignidad, mujer, ancestralidad ---- */
  --morado-900: #2A1547;
  --morado-800: #3B1F5C;
  --morado-600: #7B3FA0;
  --morado-500: #9257B8;
  --morado-400: #A66FC7;
  --morado-100: #F1E7F7;

  /* ---- Verde — naturaleza, territorio, comunidad ---- */
  --verde-900: #163C28;
  --verde-800: #1E4F34;
  --verde-600: #2F8C5C;
  --verde-400: #59B884;
  --verde-300: #8FD4AC;
  --verde-100: #E6F5EC;

  /* ---- Oro — orfebrería y barniz de Pasto: uso mínimo y funcional ---- */
  --oro-500: #B08A34;

  /* ---- Neutrales: piedra fría, no crema cálido ---- */
  --piedra-50: #F6F4F8;
  --blanco: #FFFFFF;
  --tinta: #1D1329;
  --tinta-suave: #4B4159;

  /* ---- Semánticos ---- */
  --color-fondo: var(--piedra-50);
  --color-superficie: var(--blanco);
  --color-texto: var(--tinta);
  --color-texto-suave: var(--tinta-suave);
  --color-primario: var(--morado-600);
  --color-primario-hover: var(--morado-800);
  --color-secundario: var(--verde-600);
  --color-secundario-hover: var(--verde-800);
  --color-borde: #E4DEEA;
  --color-foco: var(--oro-500);

  /* ---- Tipografía ----
     Bitter: slab serif con carácter tallado/monumental (evoca petroglifo,
     orfebrería, piedra) — usada solo en titulares, nunca en cuerpo.
     Cuerpo: pila de fuentes nativas del sistema — cero peticiones extra. */
  --fuente-titulo: 'Bitter', Georgia, 'Times New Roman', serif;
  --fuente-cuerpo: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;

  --texto-xs: 0.8125rem;
  --texto-sm: 0.9rem;
  --texto-base: 1rem;
  --texto-lg: 1.15rem;
  --texto-xl: 1.5rem;
  --texto-2xl: 2rem;
  --texto-3xl: 2.5rem;
  --texto-4xl: clamp(2.75rem, 5.5vw, 3.75rem);

  --interlineado-ajustado: 1.2;
  --interlineado-normal: 1.65;

  /* ---- Espaciado — escala base 8px ---- */
  --espacio-1: 0.5rem;
  --espacio-2: 1rem;
  --espacio-3: 1.5rem;
  --espacio-4: 2.25rem;
  --espacio-5: 3.5rem;
  --espacio-6: 5.5rem;
  --espacio-7: 8rem;

  /* ---- Bordes y sombras ---- */
  --radio-sm: 6px;
  --radio-md: 14px;
  --radio-lg: 26px;
  --sombra-sm: 0 2px 10px rgba(29, 19, 41, 0.08);
  --sombra-md: 0 10px 28px rgba(29, 19, 41, 0.14);
  --sombra-lg: 0 20px 48px rgba(29, 19, 41, 0.18);

  /* ---- Transiciones ---- */
  --transicion-rapida: 160ms ease;
  --transicion-base: 320ms cubic-bezier(0.4, 0, 0.2, 1);
  --transicion-lenta: 700ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- Layout ---- */
  --ancho-maximo: 1200px;
  --altura-header: 76px;

  /* ---- Puente de compatibilidad ----
     Varias páginas públicas (galeria.php, proyectos.php, noticia.php, blog.php)
     todavía usan estos nombres de variable heredados de una versión anterior.
     En vez de reescribir cada var() en cada archivo, se alían aquí a los
     tokens reales del sistema para que todo el sitio use la misma paleta
     sin tocar la lógica PHP de esas páginas. */
  --primary: var(--color-primario);
  --primary-dark: var(--color-primario-hover);
  --text-main: var(--color-texto);
  --text-muted: var(--color-texto-suave);
  --bg-light: var(--piedra-50);
  --white: var(--blanco);
  --border: var(--color-borde);
}