/*
 * tokens.css — Sistema de diseño: variables CSS de Rosarios del Alma
 *
 * Fuente de verdad para colores, tipografía, espaciado, sombras y
 * todos los valores del sistema de diseño. Nunca usar valores
 * hardcoded en otros archivos CSS — siempre referenciar un token.
 *
 * Organización:
 *   1. Colores (familias + aliases semánticos)
 *   2. Tipografía (familias, tamaños, pesos, interlineado, tracking)
 *   3. Espaciado
 *   4. Bordes y radios
 *   5. Sombras
 *   6. Layout
 *   7. Transiciones y animaciones
 *   8. Z-index
 */

:root {

  /* ─── 1. COLORES ─────────────────────────────────────────────────────────── */

  /* Familia Navy — estructura, fondos oscuros, texto sobre fondo claro */
  --color-navy-deep:   #0A1733;
  --color-navy-base:   #0D1B3E;
  --color-navy-medium: #1E2D5A;
  --color-navy-soft:   #2B3D6F;

  /* Familia Dorado — acentos primarios, botones CTA, detalles de lujo */
  --color-gold-deep:    #9C7F2A;
  --color-gold-base:    #C9A84C;
  --color-gold-warm:    #D4B560;
  --color-gold-soft:    #E8C97A;
  --color-gold-whisper: #FBF3DC;

  /* Familia Rosa — humanidad, calidez, elementos secundarios */
  --color-rose-deep:    #B88A85;
  --color-rose-base:    #D4A5A0;
  --color-rose-soft:    #E8C9C5;
  --color-rose-whisper: #F5E6E4;

  /* Familia Crema — superficies, fondos, papel */
  --color-cream-light: #FDFAF5;
  --color-cream-base:  #F5EDD8;
  --color-cream-warm:  #E8DCC0;
  --color-cream-deep:  #C9B896;

  /* Texto y jerarquía */
  --color-ink-primary:   #1A1F3A;
  --color-ink-secondary: #4A5070;
  --color-ink-muted:     #8A8FAA;
  --color-ink-whisper:   #C0C4D8;
  --color-ink-inverse:   #F5EDD8;

  /* Estados del sistema */
  --color-success: #4F7D5C;
  --color-error:   #A04545;
  --color-warning: #C9A84C;
  --color-info:    #5A7090;

  /* ─── Aliases semánticos ─────────────────────────────────────────────────── */

  /* Fondos */
  --color-bg-primary:   var(--color-cream-light);
  --color-bg-secondary: var(--color-cream-base);
  --color-bg-dark:      var(--color-navy-base);
  --color-bg-card:      #FFFFFF;

  /* Texto */
  --color-text-primary:   var(--color-ink-primary);
  --color-text-secondary: var(--color-ink-secondary);
  --color-text-on-dark:   var(--color-cream-base);

  /* Acentos */
  --color-accent-primary: var(--color-gold-base);
  --color-accent-hover:   var(--color-gold-deep);

  /* Bordes */
  --color-border-subtle: var(--color-cream-warm);
  --color-border-medium: var(--color-cream-deep);
  --color-border-accent: var(--color-gold-base);


  /* ─── 2. TIPOGRAFÍA ──────────────────────────────────────────────────────── */

  /* Familias tipográficas */
  --font-display: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Tamaños fluidos (escalan entre viewport mínimo y máximo) */
  --text-display-1: clamp(3rem, 6vw, 5.5rem);
  --text-display-2: clamp(2.25rem, 4vw, 3.5rem);
  --text-h1:        clamp(2rem, 3.5vw, 2.75rem);
  --text-h2:        clamp(1.5rem, 2.5vw, 2rem);
  --text-h3:        1.125rem;
  --text-h4:        0.875rem;

  /* Tamaños de cuerpo de texto */
  --text-body-large: 1.125rem;
  --text-body-base:  1rem;
  --text-body-small: 0.875rem;
  --text-caption:    0.75rem;

  /* Pesos tipográficos */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Interlineado (line-height) */
  --leading-tight:   1.2;
  --leading-snug:    1.4;
  --leading-normal:  1.6;
  --leading-relaxed: 1.7;
  --leading-loose:   1.9;

  /* Espaciado entre letras (letter-spacing) */
  --tracking-tight:   -0.02em;
  --tracking-normal:   0;
  --tracking-wide:     0.05em;
  --tracking-wider:    0.1em;
  --tracking-widest:   0.15em;


  /* ─── 3. ESPACIADO (base 8px) ────────────────────────────────────────────── */

  --space-2xs: 0.25rem;  /* 4px  */
  --space-xs:  0.5rem;   /* 8px  */
  --space-sm:  0.75rem;  /* 12px */
  --space-md:  1rem;     /* 16px */
  --space-lg:  1.5rem;   /* 24px */
  --space-xl:  2rem;     /* 32px */
  --space-2xl: 3rem;     /* 48px */
  --space-3xl: 4rem;     /* 64px */
  --space-4xl: 6rem;     /* 96px */
  --space-5xl: 8rem;     /* 128px */


  /* ─── 4. BORDES Y RADIOS ─────────────────────────────────────────────────── */

  --radius-sm:   0.25rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1.25rem;
  --radius-full: 9999px;

  --border-thin: 1px;
  --border-base: 2px;
  --border-bold: 3px;


  /* ─── 5. SOMBRAS ─────────────────────────────────────────────────────────── */

  --shadow-whisper: 0 1px 3px rgba(13, 27, 62, 0.04);
  --shadow-soft:    0 4px 12px rgba(13, 27, 62, 0.06);
  --shadow-medium:  0 8px 24px rgba(13, 27, 62, 0.08);
  --shadow-strong:  0 16px 48px rgba(13, 27, 62, 0.12);
  --shadow-gold:    0 4px 16px rgba(201, 168, 76, 0.20);


  /* ─── 6. LAYOUT ──────────────────────────────────────────────────────────── */

  --container-narrow: 720px;
  --container-base:   1200px;
  --container-wide:   1440px;
  --container-full:   1680px;

  --header-height-desktop: 80px;
  --header-height-mobile:  64px;


  /* ─── 7. TRANSICIONES Y ANIMACIONES ─────────────────────────────────────── */

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  --duration-fast: 200ms;
  --duration-base: 300ms;
  --duration-slow: 500ms;


  /* ─── 8. Z-INDEX ─────────────────────────────────────────────────────────── */

  --z-base:        1;
  --z-dropdown:    100;
  --z-sticky:      200;
  --z-overlay:     300;
  --z-modal:       400;
  --z-cart-drawer: 500;
  --z-toast:       600;
}