/* ============================================================
   Design tokens — Landing personal
   Principios: sobriedad, jerarquía tipográfica, espacio.
   Paleta light por defecto; dark mediante [data-theme="dark"].
   ============================================================ */

:root {
  /* ---------- Color · claro ---------- */
  --bg: #FAF9F6;                 /* papel */
  --bg-elevated: #FFFFFF;        /* superficies */
  --bg-muted: #F2F1EC;           /* secciones alternas */
  --ink: #17181C;                /* texto principal */
  --ink-2: #4E5057;              /* texto secundario */
  --ink-3: #5A5D64;              /* etiquetas y metadatos (WCAG AA sobre --bg-muted) */
  --line: #E4E2DB;               /* separadores */
  --line-strong: #C9C7BF;
  --accent: #3A5676;             /* azul pizarra, desaturado */
  --accent-ink: #2C4360;
  --accent-soft: rgba(58, 86, 118, 0.08);
  --on-accent: #F7F6F2;

  /* ---------- Color · oscuro ---------- */
  --bg-dark: #101113;
  --bg-elevated-dark: #17181C;
  --bg-muted-dark: #1C1E22;
  --ink-dark: #ECECE7;
  --ink-2-dark: #A9ABB2;
  --ink-3-dark: #868991;         /* WCAG AA sobre fondos oscuros */
  --line-dark: #26282E;
  --line-strong-dark: #3A3D45;
  --accent-dark: #93A9C7;
  --accent-ink-dark: #B9C9E0;
  --accent-soft-dark: rgba(147, 169, 199, 0.12);
  --on-accent-dark: #14151A;

  /* ---------- Tipografía ---------- */
  --font-display: "Archivo", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --fs-hero: clamp(2.6rem, 6.5vw, 4.75rem);
  --fs-h2: clamp(1.9rem, 3.6vw, 2.75rem);
  --fs-h3: 1.35rem;
  --fs-body: 1.0625rem;
  --fs-small: 0.9rem;
  --fs-label: 0.72rem;

  --lh-tight: 1.06;
  --lh-body: 1.7;
  --tracking-label: 0.12em;
  --tracking-tight: -0.02em;

  /* ---------- Espaciado ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  --section-pad: clamp(4.5rem, 10vw, 8.5rem);
  --container: 74rem;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  /* ---------- Radio ---------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-pill: 999px;

  /* ---------- Sombras ---------- */
  --shadow-1: 0 1px 2px rgba(20, 22, 26, 0.05), 0 6px 18px -6px rgba(20, 22, 26, 0.08);
  --shadow-2: 0 2px 4px rgba(20, 22, 26, 0.05), 0 14px 34px -10px rgba(20, 22, 26, 0.14);

  /* ---------- Movimiento ---------- */
  --dur-fast: 140ms;
  --dur: 260ms;
  --ease: cubic-bezier(0.25, 0.7, 0.3, 1);

  /* ---------- Breakpoints ---------- */
  --bp-sm: 40rem;
  --bp-md: 56rem;
  --bp-lg: 75rem;
}

/* ---------- Asignación de tema oscuro ---------- */
[data-theme="dark"] {
  --bg: var(--bg-dark);
  --bg-elevated: var(--bg-elevated-dark);
  --bg-muted: var(--bg-muted-dark);
  --ink: var(--ink-dark);
  --ink-2: var(--ink-2-dark);
  --ink-3: var(--ink-3-dark);
  --line: var(--line-dark);
  --line-strong: var(--line-strong-dark);
  --accent: var(--accent-dark);
  --accent-ink: var(--accent-ink-dark);
  --accent-soft: var(--accent-soft-dark);
  --on-accent: var(--on-accent-dark);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 18px -6px rgba(0, 0, 0, 0.5);
  --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.3), 0 14px 34px -10px rgba(0, 0, 0, 0.6);
}