/*
  Sistema de diseño — Iannello Studio Portfolio
  Paleta y tipografía extraídas del Brand Kit Maestro de Iannello Studio.
  Reglas de uso: el dorado es acento moderado (nunca fondo dominante),
  el azul eléctrico se reserva para CTAs y momentos de máximo contraste.
*/

:root {
  /* ---- Paleta de marca (roles fijos, no decorativos) ---- */
  --color-negro: #000518;
  --color-negro-suave: #0c1128;
  --color-crema: #f7f3ee;
  --color-blanco: #ffffff;
  --color-dorado: #d4af37;
  --color-dorado-suave: #e8cf85;
  --color-azul: #4400ff;
  --color-azul-hover: #3300cc;

  /* ---- Roles semánticos ---- */
  --bg-base: var(--color-crema);
  --bg-elevado: var(--color-blanco);
  --bg-invertido: var(--color-negro);
  --texto-principal: var(--color-negro);
  --texto-invertido: var(--color-crema);
  --texto-secundario: #55586b;
  --texto-secundario-invertido: rgba(247, 243, 238, 0.68);
  --borde-sutil: rgba(0, 5, 24, 0.1);
  --borde-sutil-invertido: rgba(247, 243, 238, 0.14);
  --acento: var(--color-dorado);
  --accion: var(--color-azul);
  --accion-hover: var(--color-azul-hover);
  --exito: #1f8a4c;
  --peligro: #c23b3b;

  /* ---- Tipografía ---- */
  --font-display: 'Playfair Display', 'Georgia', serif;
  --font-cuerpo: 'Spartan', 'Liberation Sans', system-ui, -apple-system, sans-serif;

  /* ---- Tipografía fluida con tracking/leading específicos por tamaño (apple-design) ---- */
  --fs-display: clamp(2.25rem, 1.4rem + 3.2vw, 4rem);
  --lh-display: 1.05;
  --ls-display: -0.02em;

  --fs-titulo: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  --lh-titulo: 1.15;
  --ls-titulo: -0.01em;

  --fs-subtitulo: 1.125rem;
  --lh-subtitulo: 1.4;

  --fs-cuerpo: 1rem;
  --lh-cuerpo: 1.6;
  --ls-cuerpo: 0em;

  --fs-pequeno: 0.8125rem;
  --lh-pequeno: 1.5;
  --ls-pequeno: 0.01em;

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

  /* ---- Radios y sombras ---- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --sombra-tarjeta: 0 1px 2px rgba(0, 5, 24, 0.04), 0 12px 32px -16px rgba(0, 5, 24, 0.18);
  --sombra-tarjeta-hover: 0 4px 10px rgba(0, 5, 24, 0.06), 0 24px 48px -20px rgba(0, 5, 24, 0.28);
  --sombra-flotante: 0 8px 24px rgba(0, 5, 24, 0.14);

  /* ---- Motion: curvas y duraciones (emil-design-eng / apple-design) ---- */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-instant: 100ms;
  --dur-rapida: 160ms;
  --dur-media: 220ms;
  --dur-lenta: 360ms;
}

@media (prefers-color-scheme: dark) {
  /* El sitio mantiene una identidad fija (crema/negro) independientemente
     del esquema del sistema, tal como especifica el brand kit. */
}