/* ==========================================================================
   Bernardo Godoy — Design Tokens
   Dark luxury · acento magenta-vino · tipografía Figtree
   ========================================================================== */

:root {
  /* --- Superficies / fondo --- */
  --color-bg: #0a0a0c;
  --color-bg-soft: #0e0d11;
  --color-surface: #141319;
  --color-surface-2: #1a1922;
  --color-surface-3: #211f2a;
  --color-line: rgba(255, 255, 255, 0.07);
  --color-line-strong: rgba(255, 255, 255, 0.13);

  /* --- Acento (capturado del mockup: vino → magenta → rosa) --- */
  --color-accent: #c13c72;
  --color-accent-deep: #8e2749;
  --color-accent-bright: #e66aa0;
  --color-accent-soft: rgba(193, 60, 114, 0.14);
  --gradient-accent: linear-gradient(135deg, #8e2749 0%, #c13c72 55%, #e0608f 100%);
  --gradient-accent-hover: linear-gradient(135deg, #9c2c52 0%, #d2447e 55%, #ef76ad 100%);
  --glow-accent: 0 0 0 1px rgba(193, 60, 114, 0.35), 0 18px 50px -12px rgba(193, 60, 114, 0.55);

  /* --- Texto --- */
  --color-text: #f6f4f5;
  --color-text-muted: #9a949e;
  --color-text-dim: #6c6772;

  /* --- Tipografía --- */
  --font-display: "Figtree", Arial, sans-serif;
  --font-body: "Figtree", Arial, sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.4rem + 2.8vw, 3.25rem);
  --text-hero: clamp(2.75rem, 1.2rem + 7vw, 6.5rem);
  --text-script: clamp(1.75rem, 1rem + 3vw, 3rem);

  --tracking-tight: -0.03em;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.18em;

  /* --- Espaciado --- */
  --space-section: clamp(4.5rem, 3rem + 6vw, 9rem);
  --space-gutter: clamp(1.25rem, 0.5rem + 3vw, 3rem);
  --content-max: 1240px;
  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 26px;
  --radius-pill: 999px;

  /* --- Sombras / profundidad --- */
  --shadow-card: 0 24px 60px -28px rgba(0, 0, 0, 0.9);
  --shadow-soft: 0 8px 30px -16px rgba(0, 0, 0, 0.8);

  /* --- Movimiento --- */
  --duration-fast: 160ms;
  --duration: 320ms;
  --duration-slow: 600ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
}