/* ==========================================================================
   Tokens del sistema de diseño
   Dirección: "Lámina arquitectónica" (ver DIRECCION_DE_ARTE.md)
   Cambiar la identidad = editar este archivo.
   ========================================================================== */

:root {
  /* --- Color base: papel de lámina + tinta -------------------------------- */
  --paper: #efeae1;
  --paper-2: #e5dfd3;
  --paper-3: #d8d1c3;
  --ink: #1c1d1a;
  --ink-soft: #55554e;
  --ink-faint: #67645b;   /* ≥ 4.5:1 sobre papel */

  /* Acento de anotación (líneas guía, puntos, ruta). Uso escaso. */
  --signal: #a8322a;

  /* Acentos por línea de producto, tomados de las fotografías reales */
  --casa: #2a5f5a;        /* techo verde de Casa 03 (oscurecido para contraste AA) */
  --casa-soft: #cfdedb;
  --villa: #d39a5b;       /* madera iluminada de las villas */
  --night: #121412;       /* lámina negra de las villas */
  --night-2: #1b1e1b;
  --night-3: #2a2e2a;

  /* Tokens semánticos (se redefinen por tema) */
  --bg: var(--paper);
  --bg-raised: var(--paper-2);
  --fg: var(--ink);
  --fg-muted: var(--ink-soft);
  --fg-faint: var(--ink-faint);
  --rule: rgb(28 29 26 / 0.18);
  --rule-strong: rgb(28 29 26 / 0.55);
  --accent: var(--signal);
  --focus: #1f5fd1;

  /* --- Tipografía -------------------------------------------------------- */
  --font-display: "Instrument Serif", "Iowan Old Style", "Times New Roman", serif;
  --font-sans: "Inter Tight", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Escala fluida (≈ 1.25 en móvil → 1.333 en escritorio) */
  --fs-label: 0.75rem;
  --fs-small: 0.875rem;
  --fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --fs-lead: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  --fs-h3: clamp(1.5rem, 1.3rem + 1vw, 2.125rem);
  --fs-h2: clamp(2.25rem, 1.6rem + 3vw, 4.25rem);
  --fs-h1: clamp(3rem, 1.6rem + 6.6vw, 8.5rem);
  --fs-mega: clamp(4.5rem, 2rem + 14vw, 17rem);

  --lh-tight: 0.95;
  --lh-head: 1.05;
  --lh-body: 1.6;
  --tracking-label: 0.12em;

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

  /* --- Retícula ---------------------------------------------------------- */
  --margin: clamp(16px, 4vw, 56px);
  --gutter: clamp(12px, 1.6vw, 24px);
  --cols: 12;
  --max: 1600px;
  --header-h: 64px;

  /* --- Forma ------------------------------------------------------------- */
  --radius: 2px;
  --hair: 1px;

  /* --- Movimiento -------------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 180ms;
  --dur-2: 450ms;
  --dur-3: 900ms;
  --dur-4: 1400ms;
}

/* Tema nocturno: villas */
[data-theme="night"] {
  --bg: var(--night);
  --bg-raised: var(--night-2);
  --fg: #ece7dd;
  --fg-muted: #b1ab9f;
  --fg-faint: #918c82;
  --rule: rgb(236 231 221 / 0.16);
  --rule-strong: rgb(236 231 221 / 0.5);
  --accent: var(--villa);
  --focus: #8fb6ff;
}

/* Tema casa: papel con acento verde */
[data-theme="casa"] {
  --accent: var(--casa);
}

@media (min-width: 900px) {
  :root { --header-h: 76px; }
}