/* ==========================================================================
   DESIGN TOKENS — cambia aquí colores, tipografía, espaciado y tiempos.
   El modo oscuro redefine los mismos tokens; ningún componente usa colores sueltos.
   ========================================================================== */

@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* ---- Color: superficies ---- */
  --bg: #ffffff;
  --bg-alt: #f5f5f7;          /* secciones alternas */
  --surface: #ffffff;         /* tarjetas sobre --bg-alt */
  --surface-muted: #f5f5f7;   /* tarjetas sobre --bg */
  --surface-inverse: #1d1d1f; /* bloque destacado (métrica principal) */
  --text-inverse: #f5f5f7;

  /* ---- Color: texto y bordes ---- */
  --text: #1d1d1f;
  --text-muted: #6e6e73;      /* 4.6:1 sobre --bg-alt (AA) */
  --text-dim: #8e8e93;        /* palabras aún no "iluminadas" en la frase de About (≥3:1, texto grande) */
  --border: #d2d2d7;
  --border-soft: #e8e8ed;

  /* ---- Color: acento (único color de marca) ---- */
  --accent: #0071e3;          /* botones — 4.7:1 con texto blanco */
  --accent-hover: #0077ed;
  --accent-link: #0066cc;     /* enlaces e indicadores */
  --accent-soft: rgba(0, 113, 227, 0.1);
  --on-accent: #ffffff;
  --success: #1f8f4e;

  /* ---- Navegación ---- */
  --nav-bg: rgba(255, 255, 255, 0.72);
  --nav-border: rgba(0, 0, 0, 0.08);

  /* ---- Contacto (sección final siempre oscura) ---- */
  --contact-bg: #000000;
  --contact-text: #f5f5f7;
  --contact-muted: #a1a1a6;
  --contact-surface: #1c1c1e;
  --contact-border: #333336;

  /* ---- Sombras ---- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06), 0 16px 40px rgba(0, 0, 0, 0.08);

  /* ---- Tipografía ---- */
  --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-hero: clamp(2.5rem, 1.35rem + 5.4vw, 5.75rem);
  --fs-h2: clamp(2.125rem, 1.4rem + 3.4vw, 4.25rem);
  --fs-statement: clamp(1.75rem, 1.1rem + 3vw, 3.5rem);
  --fs-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
  --fs-lead: clamp(1.125rem, 1rem + 0.55vw, 1.4375rem);
  --fs-body: 1.0625rem;
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;
  --fs-metric: clamp(2.5rem, 1.8rem + 2.6vw, 4rem);
  --fs-metric-xl: clamp(4.5rem, 2.8rem + 7vw, 9.5rem);
  --tracking-tight: -0.03em;
  --tracking-snug: -0.015em;

  /* ---- Espaciado (escala de 4px) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --section-pad: clamp(5rem, 3rem + 8vw, 10rem);
  --gutter: max(1.25rem, env(safe-area-inset-left));

  /* ---- Layout ---- */
  --container: 1080px;
  --container-wide: 1280px;
  --nav-h: 56px;

  /* ---- Radios ---- */
  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-pill: 999px;

  /* ---- Movimiento ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 150ms;
  --dur-base: 300ms;
  --dur-slow: 800ms;
}

/* ---------- Modo oscuro: paleta propia, no una inversión ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #000000;
  --bg-alt: #0f0f10;
  --surface: #1c1c1e;
  --surface-muted: #161617;
  --surface-inverse: #f5f5f7;
  --text-inverse: #1d1d1f;

  --text: #f5f5f7;
  --text-muted: #a1a1a6;
  --text-dim: #636366;
  --border: #3a3a3c;
  --border-soft: #2c2c2e;

  --accent: #0071e3;
  --accent-hover: #0a84ff;
  --accent-link: #2997ff;
  --accent-soft: rgba(41, 151, 255, 0.14);
  --success: #30d158;

  --nav-bg: rgba(22, 22, 23, 0.72);
  --nav-border: rgba(255, 255, 255, 0.1);

  --contact-bg: #0f0f10;
  --contact-surface: #1c1c1e;
  --contact-border: #333336;

  --shadow-sm: 0 0 0 1px rgba(255, 255, 255, 0.06);
  --shadow-md: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 16px 40px rgba(0, 0, 0, 0.6);
}