/* ============================================================
   tokens.css — Sellaora · Design tokens
   Se define ANTES que cualquier estilo de componente.
   Concepto: "vitrina nocturna" — ónix cálido + oro champán + marfil.
   ============================================================ */
:root {
  /* ---------- Colors ---------- */
  --color-bg:           #0A0908;                   /* ónix cálido (no negro puro) */
  --color-surface:      #14110D;                   /* terciopelo */
  --color-primary:      #C8A96A;                   /* oro champán — énfasis, hairlines (8.8:1 sobre bg) */
  --color-accent:       #EAD9B0;                   /* champán pálido — CTA (fase 2), mayor contraste de la página */
  --color-accent-hover: #F4E7C6;
  --color-accent-rgb:   234, 217, 176;             /* para rgba() en glows */
  --color-shine:        #FFFCF4;                   /* destello del barrido sobre texto marfil */
  --color-shine-gold:   #FFF1CC;                   /* destello del barrido sobre la palabra dorada */
  --color-on-accent:    #0A0908;                   /* texto sobre el CTA (14:1) */
  --color-text:         #F4EFE6;                   /* marfil (ligeramente más luminoso) */
  --color-muted:        #8E8677;                   /* piedra cálida (5.5:1 sobre bg) */
  --color-border:       rgba(200, 169, 106, 0.22);
  --color-glow:         rgba(200, 169, 106, 0.16);

  /* ---------- Typography ----------
     2 familias de diseño: Bodoni Moda (wordmark) + Montserrat (frases y, en fase 2, cuerpo).
     Fallbacks por escritura (no son familias de diseño): Noto Sans SC para 新奢华时代 · Almarai para el árabe. */
  --font-display:     'Bodoni Moda', 'Didot', 'Bodoni MT', 'Bodoni 72', Georgia, serif;           /* wordmark */
  --font-headline:    'Montserrat', 'Helvetica Neue', Arial, sans-serif;                           /* frases */
  --font-headline-cjk: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', 'Montserrat', sans-serif;  /* solo 新奢华时代 */
  --font-headline-ar:  'Almarai', 'Noto Sans Arabic', 'Segoe UI', Tahoma, 'Montserrat', sans-serif; /* solo árabe */
  --font-body:        'Montserrat', 'Helvetica Neue', Arial, sans-serif;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  3.75rem;
  /* Titular: escala con el ancho Y el alto (landscape móvil, tablets) · >= 40px móvil · hasta 112px.
     Montserrat es ancha: "Nouvelle Ère du Luxe" debe caber en una línea en desktop. */
  --text-hero: clamp(2.5rem, min(7.5vw, 11vh), 7rem);

  /* ---------- Spacing (8pt grid) ---------- */
  --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;
  --space-32:  8rem;
  --hero-pad:    clamp(1.25rem, 3vw, 2.75rem);
  --content-max: 80rem;

  /* ---------- Border radius ---------- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-full: 9999px;
  --radius-btn:  2px;                              /* lujo: casi recto, nunca píldora */

  /* ---------- Motion ---------- */
  --transition-fast:  150ms ease;
  --transition-base:  250ms ease;
  --transition-slow:  400ms ease;
  --ease-out-expo:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-soft:     cubic-bezier(0.45, 0, 0.55, 1);
  --ease-in-out-luxe: cubic-bezier(0.7, 0, 0.2, 1);

  /* Rotador del headline — main.js lee estos valores con getComputedStyle.
     Prioridad: palabras nítidas la mayor parte del ciclo → transiciones cortas, blur leve, hold largo. */
  --rot-first-delay: 1100ms;  /* espera tras la secuencia de carga antes de la 1ª frase */
  --rot-in:          680ms;   /* entrada de cada palabra */
  --rot-stagger-in:  95ms;    /* desfase entre palabras (entrada) */
  --rot-hold:        3200ms;  /* frase quieta y nítida */
  --rot-out:         420ms;   /* salida de cada palabra */
  --rot-stagger-out: 45ms;    /* desfase entre palabras (salida) */
  --rot-gap:         160ms;   /* silencio entre frases */
  --rot-blur-in:     5px;     /* desenfoque inicial de entrada */
  --rot-blur-out:    3px;     /* desenfoque final de salida */
  --rot-rise-in:     0.35em;  /* elevación de entrada */
  --rot-rise-out:    0.22em;  /* elevación de salida */
}