/*
 * Lunako — tokens
 * Sección 1 del handoff. Ningún valor de color, retícula o curva se escribe
 * fuera de este archivo: si un valor no está aquí, es que falta aquí.
 */

:root {
  /* Color */
  --lk-bg:      #ECE8DF;  /* crema — Home, Interior, Info, Contacto */
  --lk-dark:    #1D1D1D;  /* grafito — Proyectos, rejilla, footer, menú */
  --lk-ink:     #1A1916;  /* texto principal */
  --lk-accent:  #B17457;  /* terracota — antetítulos, rollovers, foco */
  --lk-bone:    #D8D2C2;  /* filetes, filtro activo, botón sobre oscuro */
  --lk-light:   #F0EDE8;  /* texto sobre oscuro */
  --lk-muted:   #5A5651;  /* cuerpo secundario */
  --lk-shadow:  #050403;  /* base de velos y degradados */

  --lk-line-light: rgba(26, 25, 22, .10);
  --lk-line-dark:  rgba(240, 237, 232, .10);

  /* Texto secundario sobre grafito.
     Medido: al 40 % da 3,41:1 y no llega a AA para texto pequeño; el mínimo
     está en el 50 %. Al 55 % son 5,23:1, con margen y sin dejar de ser un
     tono claramente secundario frente al 70 % del texto normal. */
  --lk-on-dark-muted: rgba(240, 237, 232, .55);

  /* Terracota sobre grafito.
     La de marca da 4,42:1 y se queda a un pelo de AA en textos de 10 px.
     Aclarada un 10 % sube a 5,18:1. Solo se usa en rótulos pequeños: los
     titulares grandes se quedan con el color de marca, que a ese tamaño ya
     cumple de sobra. */
  --lk-accent-dark: #b98268;

  /* Terracota sobre crema.
     La de marca da 3,12:1 y no llega a AA en rótulos de 10 px. Oscurecida un
     22 % sube a 4,74:1. Solo para texto pequeño: los titulares y los filetes
     se quedan con el color de marca. */
  --lk-accent-ink: #8a5a44;

  /* Verde de «mensaje enviado». Solo para ese estado del botón.
     Un verde medio (#4E7A5A) da 4,2:1 con el texto claro del botón y no llega
     a AA en sus 12 px de versalitas; este, más oscuro, da 5,2:1. Apagado, para
     que viva con la terracota y el grafito sin parecer de otra marca. */
  --lk-ok: #3E6B4B;

  /* Cabecera — los cuatro estados: claro/oscuro × reposo/desplazado */
  --lk-header-bg:            rgba(236, 232, 223, .86);
  --lk-header-bg-scrolled:   rgba(240, 237, 232, .94);
  --lk-header-line:          rgba(26, 25, 22, .08);
  --lk-header-line-scrolled: rgba(26, 25, 22, .14);
  --lk-header-burger:        rgb(68, 67, 64);
  --lk-header-tint:          var(--lk-muted);

  --lk-header-bg-dark:          rgba(29, 29, 29, .86);
  --lk-header-bg-dark-scrolled: rgba(24, 24, 24, .94);
  --lk-header-line-dark:        rgba(240, 237, 232, .10);
  --lk-header-burger-dark:      rgba(240, 237, 232, .7);
  --lk-header-tint-dark:        rgba(240, 237, 232, .55);

  /* Retícula */
  --lk-gutter: clamp(20px, 2.1vw, 40px);   /* 40px a 1920 */
  --lk-max:    1840px;
  --lk-header: 64px;

  /* Cuánto del borde superior de la ventana ocupa la barra de WordPress.
     0 para quien visita el sitio. Con sesión iniciada arranca con las medidas
     estándar de WordPress y motion.js la mide de verdad en cada fotograma:
     por debajo de 600 px WordPress deja de fijarla y se va con el scroll, así
     que el valor tiene que bajar a cero solo. */
  --lk-admin: 0px;
  --lk-gap:    25px;                        /* rejilla de proyectos */

  /* Movimiento */
  --lk-ease:      cubic-bezier(.22, .61, .36, 1);
  --lk-ease-img:  cubic-bezier(.16, .84, .28, 1);
  --lk-ease-soft: cubic-bezier(.16, .68, .3, 1);

  --lk-dur-page:  .8s;    /* entrada de página */
  --lk-dur-veil:  .5s;    /* velo / opacidad */
  --lk-dur-micro: .45s;   /* filete, línea */
  --lk-dur-zoom:  1.6s;   /* zoom de imagen en rollover */
  --lk-stagger:   70ms;   /* cascada */

  /* Tipografía — el valor de Figma es siempre el máximo del clamp */
  --lk-font-display: 'filson-pro', 'Filson Pro', 'Helvetica Neue', Arial, sans-serif;
  --lk-font-body:    'Nunito', 'Helvetica Neue', Arial, sans-serif;

  --lk-t-display:   clamp(44px, 6.4vw, 96px);   /* Display Home       96/102 */
  --lk-t-display-f: clamp(40px, 6vw,   90px);   /* Display Footer     90/90  */
  --lk-t-page:      clamp(38px, 3.4vw, 64px);   /* Título de página   64/64  */
  --lk-t-project:   clamp(34px, 4.4vw, 72px);   /* Título de proyecto 72/72  */
  --lk-t-nav:       clamp(40px, 5.2vw, 100px);  /* Nav pantalla completa      */
  --lk-t-contact:   clamp(30px, 3.4vw, 52px);   /* Titular Contacto   52/57  */
  --lk-t-lede:      clamp(18px, 1.5vw, 22px);   /* Entradilla         22/36,3 */
}