/* ==========================================================================
   Mussav Studio — tokens de marca
   Paleta oficial (no agregar colores): violeta, lavanda, grafito, gris,
   gris claro, blanco humo. Negro y blanco puros solo para neutros.
   Regla 60/30/10: neutros / grises + lavanda / violeta de acento.
   ========================================================================== */

:root {
  /* Paleta oficial */
  --violeta: #6D5DFB;
  --lavanda: #B47DD5;
  --grafito: #25252B;
  --gris: #6F7078;
  --gris-claro: #D9D9E0;
  --humo: #F5F5F7;
  --negro: #000000;
  --blanco: #FFFFFF;

  /* Derivados (solo opacidades de la paleta, sin tonos nuevos) */
  --grafito-profundo: color-mix(in srgb, var(--grafito) 70%, var(--negro));
  --texto-claro: var(--humo);
  --texto-claro-suave: color-mix(in srgb, var(--humo) 70%, transparent);
  --texto-oscuro: var(--grafito);
  --texto-oscuro-suave: var(--gris);
  --linea-oscuro: color-mix(in srgb, var(--humo) 14%, transparent);
  --linea-claro: var(--gris-claro);
  --violeta-suave: color-mix(in srgb, var(--violeta) 14%, transparent);
  --lavanda-suave: color-mix(in srgb, var(--lavanda) 18%, transparent);

  /* Tipografía oficial: principal Poiret One, secundaria Raleway */
  --font-display: 'Poiret One', 'Raleway', system-ui, sans-serif;
  --font-body: 'Raleway', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --tracking-display: 0.08em;
  --tracking-label: 0.28em;

  /* Escala */
  --fs-xs: 0.75rem;
  --fs-s: 0.875rem;
  --fs-m: 1rem;
  --fs-l: clamp(1.0625rem, 0.98rem + 0.4vw, 1.25rem);
  --fs-h3: clamp(1.375rem, 1.1rem + 1.2vw, 2rem);
  --fs-h2: clamp(2.25rem, 1.4rem + 4vw, 4.5rem);
  --fs-h1: clamp(3rem, 1.2rem + 8.2vw, 8.75rem);

  /* Forma y movimiento */
  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 24px;
  --radius-pill: 999px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 600ms;
  --sombra-suave: 0 24px 60px -24px color-mix(in srgb, var(--grafito) 45%, transparent);

  /* Layout */
  --container: 1240px;
  --gutter: clamp(16px, 4vw, 32px);
  --section-y: clamp(72px, 10vw, 144px);
  --header-h: 72px;

  /* Capas */
  --z-header: 50;
  --z-menu: 60;
  --z-bot: 80;
}

/* Contraste verificado (WCAG AA):
   - blanco sobre violeta: 4.55:1 (botones OK)
   - gris sobre blanco humo: 4.52:1 (texto secundario OK)
   - lavanda sobre grafito: 4.96:1 (texto pequeño OK)
   - violeta sobre grafito: 3.35:1 -> solo texto grande (>= 24px)
   - violeta sobre blanco humo: 4.17:1 -> solo texto grande (>= 24px) */