/* ==========================================================================
   Design tokens — Javier Carretero Luz
   Fuente: manual-de-marca-javier-carretero-luz.md (sección 3 y 4)
   ========================================================================== */

:root {
  /* Color */
  --noir: #17130f;
  --noir-card: #221c16;
  --cream: #f4efe4;
  --paper: #eeebe3;
  --paper-2: #e5e0d5;
  --ink: #1c2321;
  --ink-soft: #4a524c;
  --luz: #e8a23d;
  --luz-bright: #f5c065;
  --accent: #3e6fa8;
  --accent-bright: #8fb8e8;
  --clay: #b9714a;
  --rose: #e88fa3;
  --line: #d2ccbd;
  --line-dark: rgba(244, 239, 228, 0.14);

  /* Contextual roles (swap per section via [data-surface]) */
  --surface: var(--paper);
  --surface-alt: var(--paper-2);
  --on-surface: var(--ink);
  --on-surface-soft: var(--ink-soft);
  --hairline: var(--line);

  /* Type */
  --font-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --fs-hero: clamp(2.75rem, 4.4vw + 1.4rem, 6.75rem);
  --fs-h2: clamp(2.25rem, 2.6vw + 1.2rem, 4.25rem);
  --fs-h3: clamp(1.5rem, 1vw + 1.1rem, 2.25rem);
  --fs-lead: clamp(1.125rem, 0.4vw + 1rem, 1.5rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-mono: 0.8125rem;
  --fs-ghost: clamp(6rem, 16vw, 15rem);

  --lh-tight: 1.04;
  --lh-snug: 1.2;
  --lh-normal: 1.6;

  /* Space */
  --space-section: clamp(5rem, 11vw, 9.5rem);
  --space-xl: clamp(3rem, 5vw, 6rem);
  --space-lg: clamp(2rem, 3vw, 3.5rem);
  --space-md: 1.5rem;
  --space-sm: 1rem;
  --space-xs: 0.5rem;

  --container: 1360px;
  --gutter: clamp(1.25rem, 4.5vw, 4rem);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.2s;
  --dur-med: 0.5s;
  --dur-slow: 0.9s;

  --radius-sm: 3px;
  --radius-md: 6px;
}

[data-surface="dark"] {
  --surface: var(--noir);
  --surface-alt: var(--noir-card);
  --on-surface: var(--cream);
  --on-surface-soft: rgba(244, 239, 228, 0.62);
  --hairline: var(--line-dark);
}