/* ============================================================
   tokens.css — Normandia Web 2026
   Variables CSS: paleta, tipografía, espaciado, radios.
   ============================================================ */

:root {
  color-scheme: light dark;

  /* === COLORES (con light-dark() function) === */
  --bg:           light-dark(#fdfdfc, #0d0d0c);
  --bg-elev:      light-dark(#ffffff, #161614);
  --bg-soft:      light-dark(#f5f4f1, #1c1c1a);
  --text:         light-dark(#0e0e0e, #f0eee9);
  --text-soft:    light-dark(#4a4a4a, #b8b6b1);
  --text-muted:   light-dark(#8a8a8a, #6e6c68);
  --border:       light-dark(rgba(14,14,14,0.08), rgba(240,238,233,0.10));
  --border-soft:  light-dark(rgba(14,14,14,0.04), rgba(240,238,233,0.05));
  --accent:       var(--text);
  --on-accent:    var(--bg);

  /* === TIPOGRAFÍA === */
  --font-sans: 'Inter Tight', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* === ESCALA TIPOGRÁFICA fluida === */
  --fs-display: clamp(2.5rem, 6vw, 4.5rem);
  --fs-h1:      clamp(2rem, 4.5vw, 3.25rem);
  --fs-h2:      clamp(1.5rem, 3vw, 2.25rem);
  --fs-h3:      clamp(1.125rem, 2vw, 1.4rem);
  --fs-body:    1rem;
  --fs-small:   0.875rem;
  --fs-mono:    0.8125rem;

  /* === ESPACIADO (8-point baseline) === */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;

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

  /* === LAYOUT === */
  --container-max: 1200px;
  --container-pad: var(--space-6);

  /* === TRANSICIONES === */
  --easing: cubic-bezier(0.2, 0.8, 0.2, 1);
  --transition-fast: 150ms var(--easing);
  --transition-base: 250ms var(--easing);
  --transition-slow: 600ms var(--easing);
}

/* === FALLBACK explícito para navegadores sin light-dark() === */
[data-theme="light"] {
  --bg:           #fdfdfc;
  --bg-elev:      #ffffff;
  --bg-soft:      #f5f4f1;
  --text:         #0e0e0e;
  --text-soft:    #4a4a4a;
  --text-muted:   #8a8a8a;
  --border:       rgba(14,14,14,0.08);
  --border-soft:  rgba(14,14,14,0.04);
  --accent:       #0e0e0e;
  --on-accent:    #fdfdfc;
  color-scheme: light;
}

[data-theme="dark"] {
  --bg:           #0d0d0c;
  --bg-elev:      #161614;
  --bg-soft:      #1c1c1a;
  --text:         #f0eee9;
  --text-soft:    #b8b6b1;
  --text-muted:   #6e6c68;
  --border:       rgba(240,238,233,0.10);
  --border-soft:  rgba(240,238,233,0.05);
  --accent:       #f0eee9;
  --on-accent:    #0d0d0c;
  color-scheme: dark;
}