/* ============================================================
   Tokens de diseño — Etapa 2 (docs/etapa-2-vida-y-estetica.md §1)
   Fundación visual: paleta, tipografía, radios, sombras, grano.
   No se consume todavía desde ninguna pantalla — es solo la base.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@400;600;700&family=Hanken+Grotesk:wght@400;500;600&display=swap');

:root {
  /* --- Paleta base --- */
  --color-tinta: #3A2A33;
  --color-papel: #FFF7EE;
  --color-fondo: #F7E7E0;

  --color-mango: #FF9A3C;
  --color-frambuesa: #E8557E;
  --color-pistacho: #8FCF9E;
  --color-caramelo: #C97D3C;
  --color-azul-energia: #2E9BC9;
  --color-citrico: #F2B93C;
  --color-violeta: #9C5FC7;

  /* --- Roles semánticos (default: actividad "cena" / mango) --- */
  --acento-primario: var(--color-mango);
  --acento-travieso: var(--color-frambuesa);
  --acento-apoyo: var(--color-pistacho);
  --acento-aceptar: #22C55E; /* fijo en todas las actividades: el "Sí" siempre es verde */

  /* --- Tipografía --- */
  --fuente-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --fuente-cuerpo: 'Hanken Grotesk', system-ui, sans-serif;
  --fuente-utilitaria: var(--fuente-cuerpo);

  --peso-regular: 400;
  --peso-medio: 500;
  --peso-semibold: 600;
  --peso-bold: 700;

  --texto-xs: 0.8rem;
  --texto-sm: 0.9rem;
  --texto-base: 1rem;
  --texto-lg: 1.25rem;
  --texto-xl: 1.75rem;
  --texto-display: clamp(2rem, 6vw, 3rem);

  /* --- Radios (formas "gorditas") --- */
  --radio-sm: 8px;
  --radio-md: 14px;
  --radio-lg: 22px;
  --radio-pill: 999px;

  /* --- Sombras en dos capas: contacto pegado + difusa amplia --- */
  --sombra-sm:
    0 1px 1px rgba(58, 42, 51, 0.16),
    0 6px 14px -6px rgba(58, 42, 51, 0.18);
  --sombra-md:
    0 1px 2px rgba(58, 42, 51, 0.18),
    0 14px 28px -10px rgba(58, 42, 51, 0.24);
  --sombra-lg:
    0 2px 4px rgba(58, 42, 51, 0.20),
    0 28px 48px -16px rgba(58, 42, 51, 0.30);

  /* --- Grano/ruido sutil (SVG de turbulencia, escala de grises) --- */
  --grano-svg: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxODAnIGhlaWdodD0nMTgwJz4KICA8ZmlsdGVyIGlkPSduJz4KICAgIDxmZVR1cmJ1bGVuY2UgdHlwZT0nZnJhY3RhbE5vaXNlJyBiYXNlRnJlcXVlbmN5PScwLjg1JyBudW1PY3RhdmVzPScyJyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+CiAgICA8ZmVDb2xvck1hdHJpeCB0eXBlPSdzYXR1cmF0ZScgdmFsdWVzPScwJy8+CiAgPC9maWx0ZXI+CiAgPHJlY3Qgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScgZmlsdGVyPSd1cmwoI24pJy8+Cjwvc3ZnPgo=");
}

/* --- Tematización por actividad: solo cambia el acento primario --- */
[data-actividad="cena"]      { --acento-primario: var(--color-mango); }
[data-actividad="desayuno"]  { --acento-primario: var(--color-citrico); }
[data-actividad="correr"]    { --acento-primario: var(--color-pistacho); }
[data-actividad="bailar"]    { --acento-primario: var(--color-violeta); }
[data-actividad="deporte"]   { --acento-primario: var(--color-azul-energia); }
[data-actividad="cafe"]      { --acento-primario: var(--color-caramelo); }
[data-actividad="otro"]      { --acento-primario: var(--color-mango); }

/* --- Utilidad de grano: agregar la clase a cualquier contenedor
   para darle textura sutil sin tapar el contenido --- */
.textura-grano {
  position: relative;
}

.textura-grano::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--grano-svg);
  background-repeat: repeat;
  opacity: 0.05;
  mix-blend-mode: overlay;
  pointer-events: none;
}