/* Diván: tokens del sistema de diseño.
   Dos capas: primitivos (valores de marca) y semánticos (qué significan).
   Componentes y páginas usan solo semánticos para color y tipografía;
   la escala de espacio (--space-*) se usa directamente. */

/* Tipografía actual, por decisión del equipo. La del manual es Perfektta (comercial, sin comprar).
   Si se compra con licencia web: añadir aquí su @font-face y cambiar --font-family-brand. */
@font-face {
  font-family: "Hanken Grotesk Variable";
  src: url("../assets/fonts/hanken-grotesk-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Primitivos ---------- */

  /* Color: valores exactos del manual de identidad, p. 25 */
  --color-ink: #141414;
  --color-white: #ffffff;
  --color-off: #f8fbf6;
  --color-green: #20773c;
  --color-sky: #d7e6ff;
  --color-mint: #dcead2;

  --font-family-brand: "Hanken Grotesk Variable";

  /* Escala tipográfica fluida, de 360 a 1440 px */
  --size-100: 0.875rem;
  --size-200: clamp(1.0625rem, 1.02rem + 0.2vw, 1.1875rem);
  --size-300: clamp(1.25rem, 1.15rem + 0.5vw, 1.625rem);
  --size-400: clamp(1.625rem, 1.35rem + 1.3vw, 2.5rem);
  --size-500: clamp(2.25rem, 1.65rem + 2.8vw, 4.25rem);
  --size-600: clamp(3rem, 1.75rem + 6vw, 7.5rem);
  --size-poster: clamp(1.75rem, 1rem + 3.4vw, 4.25rem);

  /* Espaciado, base de 4 px */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: clamp(3.5rem, 2.5rem + 4vw, 6rem);
  --space-9: clamp(5rem, 3rem + 8vw, 10rem);

  /* Radios, derivados de las terminaciones del logotipo */
  --radius-100: 0.75rem;
  --radius-200: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  --radius-300: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  --radius-full: 999px;

  /* ---------- Semánticos ---------- */

  --font-family: var(--font-family-brand), system-ui, sans-serif;

  --text-small: var(--size-100);
  --text-body: var(--size-200);
  --text-lead: var(--size-300);
  --text-heading-sm: var(--size-400);
  --text-heading: var(--size-500);
  --text-display: var(--size-600);
  --text-poster: var(--size-poster);

  --weight-body: 400;
  --weight-strong: 570;
  --weight-poster: 640;

  --leading-tight: 0.96;
  --leading-snug: 1.12;
  --leading-body: 1.42;

  --tracking-display: -0.035em;
  --tracking-text: -0.018em;

  --gap-tight: var(--space-2);
  --gap-group: var(--space-4);
  --gap-block: var(--space-6);
  --gap-section: var(--space-8);
  --gap-page: var(--space-9);

  --gutter: clamp(1rem, 0.5rem + 2.5vw, 3rem);
  --measure: 68ch;
  --tap-target: 2.75rem;

  --radius-control: var(--radius-full);
  --radius-panel: var(--radius-200);
  --radius-media: var(--radius-300);

  /* Movimiento: un solo momento, el personaje acomodándose */
  --ease-settle: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-control: 160ms;
  --duration-settle: 1100ms;
}

/* ---------- Superficies ----------
   Cada superficie fija sus pares de color permitidos (contraste WCAG calculado):
   --text         texto de cualquier tamaño (mínimo 4.5:1)
   --heading      solo texto grande, 24 px o más (mínimo 3:1)
   --accent       relleno de acciones y de sofás
   --on-accent    texto sobre --accent (mínimo 4.5:1)
   --line         filetes y bordes
   --sofa         relleno de las formas de diván
   --figure       trazo del personaje */
:root,
[data-surface="white"] {
  --surface: var(--color-white);
  --text: var(--color-ink);
  --heading: var(--color-green);
  --accent: var(--color-green);
  --on-accent: var(--color-off);
  --line: var(--color-green);
  --focus: var(--color-ink);
  --sofa: var(--color-green);
  --figure: var(--color-ink);
}

[data-surface="off"] {
  --surface: var(--color-off);
  --text: var(--color-ink);
  --heading: var(--color-green);
  --accent: var(--color-green);
  --on-accent: var(--color-off);
  --line: var(--color-green);
  --focus: var(--color-ink);
  --sofa: var(--color-green);
  --figure: var(--color-ink);
}

[data-surface="sky"] {
  --surface: var(--color-sky);
  --text: var(--color-ink);
  --heading: var(--color-green);
  --accent: var(--color-green);
  --on-accent: var(--color-off);
  --line: var(--color-ink);
  --focus: var(--color-ink);
  --sofa: var(--color-green);
  --figure: var(--color-ink);
}

[data-surface="mint"] {
  --surface: var(--color-mint);
  --text: var(--color-ink);
  --heading: var(--color-green);
  --accent: var(--color-green);
  --on-accent: var(--color-off);
  --line: var(--color-ink);
  --focus: var(--color-ink);
  --sofa: var(--color-green);
  --figure: var(--color-ink);
}

[data-surface="green"] {
  --surface: var(--color-green);
  --text: var(--color-off);
  --heading: var(--color-sky);
  --accent: var(--color-off);
  --on-accent: var(--color-green);
  --line: var(--color-off);
  --focus: var(--color-off);
  --sofa: var(--color-mint);
  --figure: var(--color-ink);
}

[data-surface="ink"] {
  --surface: var(--color-ink);
  --text: var(--color-off);
  --heading: var(--color-mint);
  --accent: var(--color-mint);
  --on-accent: var(--color-ink);
  --line: var(--color-mint);
  --focus: var(--color-off);
  --sofa: var(--color-mint);
  --figure: var(--color-off);
}

/* Variante de cartel: verde, menta y tinta, como el cartel de horario de la marca */
[data-surface="green"][data-heading="mint"] {
  --heading: var(--color-mint);
}