/* =============================================================
   DESIGN TOKENS — Angelis Belleza Capilar
   Base neutra tipo "spa boutique" (concreto, negro, blanco cálido) como el local;
   la paleta del logo (rosa → naranja → violeta) solo en acentos y llamados a la acción.
   ============================================================= */

:root {
  /* --- Color system --- */
  --void: #0b0a0c;          /* negro profundo de fondos oscuros */
  --surface: #151317;
  --cream: #f7f3ef;         /* blanco cálido */
  --nude: #ebe4de;          /* concreto claro */
  --concrete: #cfc8c2;
  --ink: #1b1719;
  --fog: #6e6669;
  --white: #ffffff;

  /* Marca (logo) */
  --rosa: #e21d78;
  --naranja: #f5872f;
  --violeta: #7d3ce0;
  --brand-gradient: linear-gradient(120deg, var(--rosa) 0%, var(--naranja) 52%, var(--violeta) 100%);
  --brand-gradient-soft: linear-gradient(120deg, #f6c7da 0%, #fbd9be 52%, #d9c7f5 100%);

  /* Acento principal de la marca */
  --accent: #e8577f;
  --accent-light: #f6b7a6;
  --accent-rgb: 232, 87, 127;
  --void-rgb: 11, 10, 12;
  --cream-rgb: 247, 243, 239;

  /* --- Typography --- */
  --font-display: 'Bodoni Moda', serif;
  --font-script: 'Allura', cursive;
  --font-body: 'Instrument Sans', sans-serif;
  --font-mono: 'DM Mono', monospace;

  --weight-thin: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 600;

  --size-hero: clamp(3rem, 8.2vw, 9.5rem);
  --size-display: clamp(2.5rem, 5.6vw, 5.5rem);
  --size-h2: clamp(2.25rem, 5vw, 4rem);
  --size-h3: clamp(1.4rem, 2.6vw, 2rem);
  --size-lead: clamp(1.05rem, 1.6vw, 1.3rem);
  --size-body: 1rem;
  --size-small: 0.875rem;
  --size-mono: 0.82rem;

  /* --- Spacing scale --- */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 8rem;
  --space-2xl: 12rem;

  /* --- Container --- */
  --container-width: 1440px;
  --container-pad: clamp(1.25rem, 5vw, 4rem);

  /* --- Motion --- */
  --ease-liquid: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 200ms;
  --duration-base: 400ms;
  --duration-slow: 800ms;

  --marquee-speed: 40s;

  /* --- Radius & borders --- */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 22px;
  --radius-full: 999px;
  --border-hairline: 1px solid rgba(var(--accent-rgb), 0.25);

  /* --- Z-index layers --- */
  --z-menu: 250;
  --z-nav: 260;
  --z-consent: 300;
  --z-loader: 400;
}