/* ==========================================================================
   El Taller · Tokens de diseño
   Única fuente de verdad. Ningún otro fichero escribe un color a mano.
   ========================================================================== */

:root {
  /* --- Color -------------------------------------------------------------
     Base clara con momentos oscuros. El sitio es claro (papel cálido) para que
     el texto respire y la marca no pese; el hero, las cabeceras, las galerías
     y el pie son oscuros para que las fotos de interiores iluminados brillen,
     como en una sala de exposición.

     El mecanismo es una capa semántica que se INVIERTE por contexto: los
     tokens (--fondo, --texto, --acento…) valen claro por defecto en :root, y
     la clase .oscuro los redefine a oscuro. Ningún componente sabe en qué tema
     está: usa siempre el token semántico. Cambiar de tema = cambiar el mapeo.

     El naranja tiene dos papeles y por eso son dos tokens:
     · --naranja  = relleno de marca (botones, barras). Igual en ambos temas;
       el texto que va encima es oscuro (blanco sobre naranja falla AA).
     · --acento   = naranja de TEXTO (enlaces, sobretítulos). Sobre claro se
       oscurece a #A84A06 (5,2:1 AA); sobre oscuro es el #FF7F1D del logo
       (7,7:1 AAA). El #FF7F1D como texto sobre claro daría 2,3:1 y falla.   */

  /* Marca: no cambia con el tema */
  --naranja:        #FF7F1D;   /* relleno · el naranja del logo */
  --naranja-claro:  #FF9B4D;
  --naranja-oscuro: #D9640B;
  --naranja-velo:   rgba(255, 127, 29, 0.12);
  --naranja-solido: rgba(255, 127, 29, 0.95);
  --sobre-naranja:  #1A1510;   /* texto/icono SOBRE relleno naranja · SIEMPRE
                                  oscuro. Blanco sobre naranja da 2,5:1 y falla;
                                  esta tinta da 7,2:1 AAA. No cambia con el tema. */
  --ok:             #4E9E57;   /* verde de "correcto / no" · legible en ambos */
  --error:          #C0442A;   /* borde del campo (rojizo, con icono + texto) */
  --error-texto:    #C0442A;   /* .oscuro lo aclara abajo */

  /* --- Capa semántica · TEMA CLARO (por defecto) ------------------------- */
  --fondo:        #F7F3EC;   /* papel cálido */
  --superficie:   #FFFFFF;   /* tarjetas, campos */
  --superficie-alt: #EFE9DE; /* secciones alternas */
  --superficie-2: #F1ECE3;   /* elevada / hover */
  --texto:        #1A1510;   /* tinta · 16,4:1 AAA */
  --texto-sec:    #5A5044;   /* secundario · 7,1:1 AAA */
  --texto-tenue:  #736A5A;   /* metadatos · 4,8:1 AA */
  --acento:       #A84A06;   /* naranja de texto · 5,2:1 AA sobre papel */
  --linea:        #E0D8CA;   /* separadores decorativos */
  --linea-suave:  #EDE7DD;
  --borde-campo:  #9C8E75;   /* borde de input · 3,2:1 sobre blanco (1.4.11) */
  --velo:         rgba(14, 12, 10, 0.55);  /* overlay sobre fotos: siempre oscuro */
}

/* --- Capa semántica · TEMA OSCURO (por contexto) -------------------------
   Estos son los "momentos oscuros". Los componentes que SIEMPRE van sobre foto
   (hero, cabecera, cta, tarjetas) y el pie se declaran oscuros por su propia
   clase, sin tocar el HTML. Para oscurecer el fondo de una sección concreta
   (una galería), se le añade la clase .oscuro en el marcado. Todo lo de dentro
   cambia de tema solo por heredar estos tokens.                              */
.oscuro,
.hero,
.cabecera,
.cta,
.pie,
.servicio,
.proyecto,
.video {
  --fondo:        #0E0C0A;   /* negro cálido */
  --superficie:   #17130E;
  --superficie-alt: #17130E;
  --superficie-2: #221C14;
  --texto:        #F4EFE6;   /* 17,1:1 AAA */
  --texto-sec:    #C7BCA9;   /* 10,4:1 AAA */
  --texto-tenue:  #9C9080;   /* 6,2:1 AA */
  --acento:       #FF7F1D;   /* el naranja del logo · 7,7:1 AAA */
  --linea:        #322A20;
  --linea-suave:  #241E17;
  --borde-campo:  #7E6C45;   /* 3,6:1 sobre el relleno oscuro */
  --error-texto:  #F08A6A;   /* aclarado para el fondo oscuro · 7,9:1 AAA */

  /* Reafirmar el color aquí es imprescindible: `color` se hereda por valor YA
     computado, así que un título sin color propio heredaría la tinta del body
     aunque --texto valga crema en este contexto. Fijándolo, se re-evalúa. */
  color: var(--texto);
}

:root {

  /* --- Tipografía --------------------------------------------------------
     Playfair Display: serif editorial de alto contraste. Sus astas finas
     sobre negro leen como un filamento. Inter para el texto: neutra y
     legible a cuerpo pequeño.                                            */

  --fuente-titulo: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --fuente-texto:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-micro: 0.6875rem;  /* 11px · sobretítulos, metadatos */
  --fs-sm:    0.8125rem;  /* 13px */
  --fs-base:  1rem;       /* 16px · mínimo en móvil */
  --fs-lg:    1.125rem;   /* 18px · entradilla */
  --fs-xl:    1.375rem;   /* 22px */

  --fs-t3: clamp(1.375rem, 1.1rem + 1.2vw, 1.75rem);
  --fs-t2: clamp(1.75rem, 1.3rem + 2.2vw, 2.75rem);
  --fs-t1: clamp(2.25rem, 1.4rem + 4vw, 4.5rem);

  --interlinea:       1.65;
  --interlinea-corta: 1.15;
  --tracking-ancho:   0.18em;  /* sobretítulos en versal */

  /* --- Medidas ----------------------------------------------------------- */
  --ancho-max:   1280px;
  --ancho-texto: 68ch;    /* 65-75 caracteres por línea */
  --wrap-lateral: clamp(1.25rem, 5vw, 4rem);

  /* --- Espaciado (escala de 4) -------------------------------------------- */
  --e1: 0.25rem;
  --e2: 0.5rem;
  --e3: 0.75rem;
  --e4: 1rem;
  --e6: 1.5rem;
  --e8: 2rem;
  --e12: 3rem;
  --e16: 4rem;
  --e24: 6rem;
  --e32: 8rem;

  /* --- Radios ------------------------------------------------------------- */
  --radio-sm: 2px;
  --radio:    3px;

  /* --- Sombra y luz ------------------------------------------------------- */
  --sombra:      0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  --sombra-alta: 0 2px 4px rgba(0,0,0,.5), 0 20px 50px rgba(0,0,0,.5);
  --resplandor:  0 0 60px rgba(255, 127, 29, .22);   /* el naranja de marca */

  /* --- Movimiento --------------------------------------------------------- */
  --t-rapida: 150ms;
  --t-media:  250ms;
  --t-lenta:  400ms;
  --curva:    cubic-bezier(.4, 0, .2, 1);
  --curva-salida: cubic-bezier(.16, 1, .3, 1);

  /* --- Capas -------------------------------------------------------------- */
  --z-base:    1;
  --z-sticky:  10;
  --z-nav:     20;
  --z-lightbox: 50;
}