/* ============================================================================
   Vantage Design System — tokens
   Fuente única de verdad para color, tipografía, espacio, forma y movimiento.
   Ningún otro archivo debe declarar un hex, un px de escala o una curva.
   ========================================================================= */

:root {
  color-scheme: dark;

  /* ── Color · tinta ──────────────────────────────────────────────────── */
  --ink-900: #111110;
  --ink-800: #1a1918;
  --ink-700: #292826;
  --ink-600: #3f3c37;

  /* ── Color · claros ─────────────────────────────────────────────────── */
  --paper:   #ffffff;
  --cream-0: #fafaf8;
  --cream-50:#f4f2ee;

  /* ── Color · neutros ────────────────────────────────────────────────── */
  --stone-100: #e6e4df;
  --stone-300: #c3c0b9;
  --stone-500: #8b8880;
  --concrete-500: #9a968f;

  /* ── Color · acento teak ────────────────────────────────────────────── */
  --teak-100: #eddfcd;
  --teak-300: #d3a878;   /* acento SOBRE oscuro */
  --teak-500: #b57d48;   /* color de marca, sobre claro */
  --teak-600: #8f5f34;

  /* ── Señales ────────────────────────────────────────────────────────── */
  --success: #4a5c3f;
  --error:   #b5453a;

  /* ── Roles semánticos · contexto oscuro (por defecto) ───────────────── */
  --surface:          var(--ink-900);
  --surface-raised:   var(--ink-800);
  --surface-raised-2: var(--ink-700);
  --text-primary:     var(--cream-50);
  --text-secondary:   var(--stone-300);
  --text-tertiary:    var(--stone-500);
  --accent:           var(--teak-300);
  --accent-solid:     var(--teak-500);
  --on-accent:        var(--ink-900);
  --hairline:         rgb(244 242 238 / 0.14);
  --hairline-strong:  rgb(244 242 238 / 0.28);

  /* ── Tipografía ─────────────────────────────────────────────────────── */
  --font-display: "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-serif:   "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-mono:    ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;

  --fs-display-2xl: clamp(3.4rem, 1.6rem + 6.4vw, 6.4rem);
  --fs-display-xl:  clamp(2.75rem, 1.5rem + 4.6vw, 4.6rem);
  --fs-display-lg:  clamp(2.1rem, 1.3rem + 2.9vw, 3.4rem);
  --fs-display-md:  clamp(1.6rem, 1.2rem + 1.5vw, 2.4rem);
  --fs-display-sm:  1.5rem;

  --fs-body-lg:  1.25rem;
  --fs-body:     1.0625rem;
  --fs-body-sm:  0.9375rem;
  --fs-label:    0.8125rem;
  --fs-caption:  0.75rem;

  --w-regular: 400;
  --w-medium:  500;
  --w-semi:    600;
  --w-bold:    700;
  --w-black:   800;

  --lh-display: 0.98;
  --lh-heading: 1.14;
  --lh-body:    1.6;

  --tracking-display: -0.03em;
  --tracking-tight:   -0.015em;
  --tracking-eyebrow: 0.18em;
  --tracking-meta:    0.1em;

  /* ── Espacio (base 4) ───────────────────────────────────────────────── */
  --space-1: 4px;    --space-2: 8px;    --space-3: 12px;   --space-4: 16px;
  --space-6: 24px;   --space-8: 32px;   --space-12: 48px;  --space-16: 64px;
  --space-24: 96px;  --space-32: 128px; --space-40: 160px; --space-50: 200px;

  --container: 1440px;
  --gutter: clamp(20px, 4vw, 64px);
  --section-y: clamp(72px, 9vw, 160px);

  /* ── Forma ──────────────────────────────────────────────────────────── */
  --radius-0: 0px;
  --radius-1: 3px;
  --radius-2: 10px;
  --radius-3: 20px;
  --radius-pill: 999px;
  --border-w: 1px;

  --shadow-card:    0 20px 60px -24px rgb(18 17 16 / 0.28);
  --shadow-card-sm: 0 8px 24px -12px rgb(18 17 16 / 0.22);
  --shadow-raise:   0 28px 70px -28px rgb(0 0 0 / 0.55);

  /* ── Movimiento ─────────────────────────────────────────────────────── */
  --dur-press:  120ms;
  --dur-fast:   250ms;
  --dur-hover:  340ms;
  --dur-reveal: 520ms;   /* entrada de un bloque al hacer scroll */
  --dur-base:   600ms;
  --dur-slow:   1000ms;
  --dur-hero:   1400ms;

  /* Escalonados: 30–80ms es el rango en el que se lee como una sola secuencia */
  --stagger:      60ms;
  --stagger-word: 38ms;

  --ease-premium:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  --hover-lift: -6px;
  --hover-zoom: 1.05;
}

/* ── Contexto claro: los mismos roles, invertidos ──────────────────────── */
.on-light {
  color-scheme: light;
  --surface:          var(--cream-50);
  --surface-raised:   var(--cream-0);
  --surface-raised-2: var(--paper);
  --text-primary:     var(--ink-900);
  --text-secondary:   var(--ink-600);
  --text-tertiary:    var(--stone-500);
  --accent:           var(--teak-500);
  --accent-solid:     var(--ink-900);
  --on-accent:        var(--cream-50);
  --hairline:         rgb(17 17 16 / 0.12);
  --hairline-strong:  rgb(17 17 16 / 0.22);
}