/* ==========================================================================
   El Legado Urbano - Tokens de diseño para web
   Derivados del Manual de Marca (junio 2026, 15 pp.)

   Dos capas:
     1. MARCA      - los 7 colores del manual, sin alterar. Fuente de verdad.
     2. FUNCIONAL  - roles de uso ya validados contra WCAG 2.1 AA.

   Regla: en la web se usan los tokens funcionales. Los de marca se usan
   solo donde el color es decorativo (fondos, tramas, ilustración), nunca
   para texto sin verificar contraste.
   ========================================================================== */

:root {

  /* ---- CAPA 1 · PALETA DE MARCA (tal cual el manual) ------------------- */

  --cobre-tierra:     #BD8E65;  /* Origen · Cercanía · Tradición contemporánea */
  --verde-cafetero:   #6B8C4E;  /* Vida · Crecimiento · Campo                  */
  --marfil-natural:   #EAE4DD;  /* Pureza · Calma · Atemporalidad              */
  --gris-raiz:        #7B7A7A;  /* Fortaleza · Autoridad · Permanencia         */
  --perfil-profundo:  #3D4A2E;  /* Naturaleza · Arraigo · Auténtica            */
  --adobe:            #A0956E;  /* Calidez · Herencia · Textura                */
  --oro-campo:        #D4C89A;  /* Lujo Discreto · Luz · Cosecha               */

  /* Gris del logotipo. No está en la paleta del manual pero sí en el
     archivo del logo. Se documenta para no introducirlo por error. */
  --gris-logotipo:    #585858;

  /* ---- CAPA 2 · DERIVADOS ACCESIBLES ----------------------------------- */
  /* Mismo tono, luminosidad ajustada hasta alcanzar 4.5:1.
     Necesarios porque los colores de marca son de origen impreso y
     ninguno de los cálidos pasa AA como texto sobre fondo claro.        */

  --cobre-texto:      #875E3A;  /* 4.51:1 sobre Marfil */
  --verde-texto:      #546E3D;  /* 4.53:1 sobre Marfil */
  --gris-texto:       #676666;  /* 4.54:1 sobre Marfil */
  --adobe-texto:      #6F6649;  /* 4.53:1 sobre Marfil */

  --cobre-sobre-oscuro: #CFAD8F;  /* 4.52:1 sobre Perfil Profundo */
  --verde-sobre-oscuro: #9FBC86;  /* 4.52:1 sobre Perfil Profundo */

  /* ---- CAPA 3 · ROLES -------------------------------------------------- */

  --fondo:            var(--marfil-natural);
  --fondo-alt:        #F5F2EE;                 /* Marfil aclarado, para alternar bloques */
  --fondo-oscuro:     var(--perfil-profundo);

  --texto:            var(--perfil-profundo);  /* 7.50:1 sobre Marfil  */
  --texto-suave:      var(--gris-texto);
  --texto-inverso:    var(--marfil-natural);   /* 7.50:1 sobre Profundo */

  --acento:           var(--cobre-tierra);     /* filetes, iconos, bordes, display grande */
  --acento-enlace:    var(--cobre-texto);      /* enlaces y texto de acento */

  --borde:            rgba(61, 74, 46, 0.16);
  --filete:           var(--cobre-tierra);     /* la línea bajo el logotipo */

  /* CTA principal: fondo profundo + texto marfil. Es la única combinación
     de la paleta que da contraste alto y mantiene el tono sobrio del manual. */
  --cta-fondo:        var(--perfil-profundo);
  --cta-texto:        var(--marfil-natural);
  --cta-fondo-hover:  #2E3823;

  /* ---- TIPOGRAFÍA ------------------------------------------------------ */
  /* Butler: display. Licencia libre, uso web verificado antes de publicar.
     Sitka: NO se publica en el servidor (fuente de sistema Microsoft, sin
     licencia de webfont). Sustituto de lectura definido abajo.           */

  --fuente-display: 'Butler', Georgia, 'Times New Roman', serif;
  --fuente-cuerpo:  'Source Serif 4', 'Charis SIL', Georgia, serif;

  --escala-xs:   0.8125rem;   /* 13px - pies, notas          */
  --escala-sm:   0.9375rem;   /* 15px - UI, etiquetas        */
  --escala-base: 1.0625rem;   /* 17px - cuerpo               */
  --escala-lg:   1.375rem;    /* 22px - entradilla           */
  --escala-xl:   2rem;        /* 32px - h3                   */
  --escala-2xl:  2.75rem;     /* 44px - h2                   */
  --escala-3xl:  4rem;        /* 64px - h1                   */
  --escala-hero: clamp(2.75rem, 7vw, 6rem);

  --interlinea-display: 1.05;
  --interlinea-cuerpo:  1.65;
  --tracking-etiqueta:  0.18em;   /* el manual usa letra espaciada en "Montenegro, Quindío" */

  /* ---- RITMO Y FORMA --------------------------------------------------- */
  /* El manual construye los bloques con UNA esquina recta y el resto
     redondeadas. Es el gesto de forma más reconocible de la marca.      */

  --radio-bloque:   0 2rem 0 2rem;
  --radio-suave:    0.5rem;

  --espacio-1: 0.5rem;
  --espacio-2: 1rem;
  --espacio-3: 1.5rem;
  --espacio-4: 2.5rem;
  --espacio-5: 4rem;
  --espacio-6: 6rem;

  --ancho-lectura: 66ch;
  --ancho-maximo:  1200px;
}