/* diegodoal · tokens
   Único sitio donde viven los valores. Todo lo demás (diegodoal.css, el styleguide,
   las recetas) lee de aquí. Cambia un valor y cambia en todas partes.

   Capa 1 · primitivos: la paleta y medidas en bruto. No se usan directo en componentes.
   Capa 2 · semánticos: qué significa cada cosa. Los componentes solo usan estos. */

:root{
  /* 1 · primitivos ------------------------------------------------------
     Lógica de Sanzo Wada (A Dictionary of Color Combinations, 1933; datos de
     github.com/jmaasch/sanzo): combinaciones cerradas, papeles con tinte y
     tintas que nunca son negras. Nada de #fff ni #000.
       c118 · amarillo + tinta café      → la pareja base (tu amarillo manda)
       c102 · papel ocre + teja          → fondo y mano
       c114 · amarillo + verde agua      → el único frío, para lo que está hecho  */
  --amarillo-400:#ffc700;  /* el tuyo, intacto. sustituye al #e0b81f de c118 */
  --tinta-900:#362304;     /* c118 · café tinta, el "negro" */
  --tinta-600:#6b5a3c;     /* tinta rebajada con papel */
  --papel-50:#fbf8ef;      /* c102 #ebd999 llevado casi a blanco */
  --papel-100:#f6f1e2;     /* fondo */
  --papel-200:#ece4cf;
  --papel-300:#ddd2b6;     /* líneas */
  --ocre-300:#ebd999;      /* c102 · papel ocre, tal cual */
  --teja-600:#b04a00;      /* c102 #c05200, un punto más oscuro para leerse */
  --agua-600:#008aa1;      /* c114 · verde agua */
  --rojo-youtube:#ff0033;  /* solo para «abrir en YouTube»: es la marca de YouTube */

  --gris-50:#fafaf8;       /* papeles neutros: el #f4f4f3 de su web actual */
  --gris-100:#f4f4f3;
  --gris-200:#e8e8e4;
  --gris-300:#dad9d3;
  --celadon-50:#f4f8f6;    /* c229/c139 #b5d1cc llevado a papel */
  --celadon-100:#e8efeb;
  --celadon-200:#dbe6e0;
  --celadon-300:#c7d6ce;

  --noche-900:#1e1504;     /* tinta café llevada a fondo */
  --noche-800:#2c2009;
  --noche-700:#3d2f14;
  --noche-300:#b3a68a;

  /* 2 · color ----------------------------------------------------------- */
  --color-fondo:var(--gris-100);
  --color-superficie:var(--gris-50);
  --color-superficie-2:var(--gris-200);
  --color-texto:var(--tinta-900);
  --color-texto-suave:var(--tinta-600);
  --color-linea:var(--gris-300);
  --color-acento:var(--amarillo-400);
  --color-sobre-acento:var(--tinta-900);
  --color-ok:var(--agua-600);
  --color-mano:var(--teja-600);
  --color-subtitulo:var(--color-acento);
  --color-subtitulo-borde:#1a1102;   /* casi negro, como en tus vídeos, pero café */
  --color-velo:rgb(30 21 4 / .72);
  --color-youtube:var(--rojo-youtube);
  --color-favorito:var(--rojo-youtube);

  /* 3 · tipografía ------------------------------------------------------ */
  --fuente-titulo:"Poppins",system-ui,sans-serif;
  --fuente-texto:"Poppins",system-ui,sans-serif;
  --fuente-mano:"Caveat",cursive;

  --t-xs:13px;
  --t-s:15px;
  --t-m:17px;                           /* texto base */
  --t-l:20px;
  --t-xl:26px;
  --t-2xl:clamp(26px,3.6vw,38px);       /* secciones */
  --t-3xl:clamp(32px,5vw,56px);         /* título de receta */
  --t-4xl:clamp(40px,7vw,80px);         /* portada */
  --t-mano:28px;
  --t-subtitulo:clamp(22px,3.4vw,34px);

  --peso-texto:400;
  --peso-fuerte:600;
  --peso-titulo:700;
  --caja-seccion:uppercase;            /* "MÁS RECETAS", como hoy */
  --interlineado:1.55;
  --interlineado-titulo:1.05;
  --tracking-titulo:-.02em;
  --ancho-digito:.62em;               /* Poppins no tiene cifras tabulares: caja fija por dígito */

  /* 4 · espacio --------------------------------------------------------- */
  --e-1:4px; --e-2:8px; --e-3:12px; --e-4:16px;
  --e-5:24px; --e-6:32px; --e-7:48px; --e-8:72px;
  --gutter:clamp(16px,4vw,40px);
  --ancho:1080px;
  --medida:62ch;                        /* largo máximo de línea */

  /* 5 · forma ----------------------------------------------------------- */
  --radio-s:8px;
  --radio-m:14px;
  --radio-l:20px;
  --radio-pill:999px;
  --borde:1px;
  --borde-boton:2px;                    /* entero: 1,5 px se ve disparejo en pantallas retina */
  --toque:44px;                         /* mínimo para dedos (Fitts) */
  --subtitulo-trazo:.18em;

  /* 6 · movimiento ------------------------------------------------------ */
  --dur:180ms;
  --curva:cubic-bezier(.2,.7,.2,1);
}

/* papel alternativo: se elige con data-papel en <html> */
:root[data-papel="celadon"]{
  --color-fondo:var(--celadon-100);
  --color-superficie:var(--celadon-50);
  --color-superficie-2:var(--celadon-200);
  --color-linea:var(--celadon-300);
}
:root[data-papel="crema"]{
  --color-fondo:var(--papel-100);
  --color-superficie:var(--papel-50);
  --color-superficie-2:var(--papel-200);
  --color-linea:var(--papel-300);
}

/* modo oscuro: solo se redefinen semánticos */
:root[data-theme="dark"]{
  --color-fondo:var(--noche-900);
  --color-superficie:var(--noche-800);
  --color-superficie-2:var(--noche-700);
  --color-texto:var(--papel-100);
  --color-texto-suave:var(--noche-300);
  --color-linea:var(--noche-700);
  --color-mano:var(--amarillo-400);
}

@media (prefers-reduced-motion:reduce){:root{--dur:0ms}}

/* estados: hover y presionado, derivados de los semánticos */
:root{
  --hover-primario:color-mix(in srgb,var(--color-texto) 82%,var(--color-fondo));
  --hover-suave:var(--color-superficie-2);
  --hover-acento:color-mix(in srgb,var(--color-acento) 85%,var(--color-texto));
}