/* ==========================================================================
   TOKENS — Sistema de diseño Cami & Mauri
   Paleta beige/nude + dorado, decoración floral blanca.
   Todo mobile-first; las medidas usan rem y clamp() para escalar.
   ========================================================================== */

:root {
  /* ---- Color: fondos nude ---- */
  --nude-50:  #FDFAF3;  /* casi blanco cálido */
  --nude-100: #FBF6EC;  /* fondo base */
  --nude-200: #F7EFE0;  /* fondo tarjetas / secciones alternas */
  --nude-300: #F1E6D2;  /* bordes suaves, separadores */
  --nude-400: #E7D8BE;  /* líneas decorativas */

  /* ---- Color: dorado (acentos) ---- */
  --gold:       #C1984B;  /* dorado principal */
  --gold-dark:  #A67C34;  /* dorado profundo (hover, texto sobre claro) */
  --gold-light: #D9BC7E;  /* dorado claro (glow, degradados) */
  --gold-soft:  #EBD9B4;  /* dorado muy tenue (fondos, halos) */

  /* ---- Color: tinta (texto) ---- */
  --ink:        #5B4A33;  /* texto principal, marrón cálido */
  --ink-soft:   #7A6A50;  /* texto secundario */
  --ink-muted:  #9C8C72;  /* texto terciario / placeholders */

  /* ---- Color: estados ---- */
  --green:      #4F7D5A;  /* confirmado / asiste */
  --green-soft: #E4EFE5;
  --red:        #B25B4E;  /* no asiste */
  --red-soft:   #F3E2DE;
  --amber:      #C79A3C;  /* pendiente */

  /* ---- Color: utilitarios ---- */
  --white:      #FFFFFF;
  --shadow-warm: 30, 20, 8;   /* rgb base para sombras cálidas */

  /* ---- Tipografía ---- */
  --font-display: 'Cinzel', Georgia, 'Times New Roman', serif;      /* mayúsculas grabadas */
  --font-serif:   'Cormorant Garamond', 'EB Garamond', Georgia, serif; /* nombres y cuerpo */
  --font-script:  'Great Vibes', 'Brush Script MT', cursive;        /* firmas / gracias */

  /* Escala tipográfica (fluida) */
  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  --fs-lg:   clamp(1.25rem, 1.1rem + 0.8vw, 1.6rem);
  --fs-xl:   clamp(1.6rem, 1.3rem + 1.6vw, 2.4rem);
  --fs-2xl:  clamp(2.2rem, 1.6rem + 3vw, 3.8rem);   /* nombres grandes */
  --fs-3xl:  clamp(2.8rem, 2rem + 4vw, 5rem);

  --tracking-wide:  0.12em;
  --tracking-wider: 0.22em;   /* labels tipo "CONFIRMÁ TU ASISTENCIA" */

  /* ---- Espaciado (escala 4px) ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;

  /* ---- Radios ---- */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* ---- Sombras ---- */
  --shadow-sm: 0 1px 3px rgba(var(--shadow-warm), 0.08);
  --shadow-md: 0 6px 20px rgba(var(--shadow-warm), 0.10);
  --shadow-lg: 0 18px 50px rgba(var(--shadow-warm), 0.16);

  /* ---- Layout ---- */
  --content-max: 42rem;    /* ancho máx. de lectura (mobile-first, se centra en desktop) */
  --content-pad: clamp(1.25rem, 5vw, 2.5rem);

  /* ---- Transiciones ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}