/**
 * LC MICHELLE — Design Tokens & Theme Architecture
 * Quiet Luxury + Beauty Editorial + Contemporary Elegance
 */

:root {
  /* ==========================================================================
     Color Palette (Paleta de Color Quiet Luxury)
     ========================================================================== */
  
  /* Burgundy Primary Identity Accent (Borgoña profundo y sofisticado) */
  --color-burgundy: #661F2B;
  --color-burgundy-hover: #7D2635;
  --color-burgundy-deep: #4A161F;
  --color-burgundy-light: rgba(102, 31, 43, 0.08);
  --color-burgundy-glow: rgba(102, 31, 43, 0.22);
  --color-burgundy-border: rgba(102, 31, 43, 0.28);
  
  /* Pearl / Warm Ivory / Warm Beige (Tonos perla y marfil para textos y superficies) */
  --color-pearl-100: #FAF7F2;
  --color-pearl-200: #F5F0E8;
  --color-pearl-300: #F1E9DE;
  --color-pearl-400: #E9DFD1;
  --color-pearl-500: #D8CCC0;
  --color-pearl-muted: rgba(245, 240, 232, 0.76);
  --color-pearl-dim: rgba(245, 240, 232, 0.48);
  
  /* Dark Brown / Warm Espresso / Noir Cálido (Contraste editorial para textos secundarios) */
  --color-dark-espresso: #241D1A;
  --color-dark-soft: #382F2A;
  --color-dark-muted: #6B5E57;
  --color-dark-faint: rgba(36, 29, 26, 0.08);
  
  /* Editorial Scrims & Surface Overlays */
  --overlay-hero-gradient: linear-gradient(
    180deg,
    rgba(18, 12, 11, 0.38) 0%,
    rgba(18, 12, 11, 0.62) 42%,
    rgba(18, 12, 11, 0.88) 100%
  );
  --overlay-card-ambient: linear-gradient(
    180deg,
    rgba(22, 15, 14, 0.12) 0%,
    rgba(22, 15, 14, 0.45) 55%,
    rgba(18, 12, 11, 0.90) 100%
  );
  --overlay-card-featured: linear-gradient(
    180deg,
    rgba(74, 22, 31, 0.24) 0%,
    rgba(22, 15, 14, 0.52) 50%,
    rgba(18, 12, 11, 0.94) 100%
  );
  
  /* Expanded Drawer Panel Surface */
  --panel-bg: rgba(245, 240, 232, 0.97);
  --panel-bg-blur: 16px;
  --panel-border: rgba(102, 31, 43, 0.22);
  --panel-divider: rgba(102, 31, 43, 0.12);

  /* Sticky Header Surface */
  --header-bg: rgba(24, 18, 17, 0.82);
  --header-blur: 18px;
  --header-border: rgba(245, 240, 232, 0.08);

  /* ==========================================================================
     Typography System (Tipografía Editorial)
     ========================================================================== */
  
  /* Font Families */
  --font-serif-editorial: 'Cormorant Garamond', 'Italiana', 'Bodoni Moda', 'Playfair Display', Georgia, serif;
  --font-brand-display: 'Italiana', 'Cormorant Garamond', serif;
  --font-sans-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono-numbers: 'Cormorant Garamond', 'Plus Jakarta Sans', serif;

  /* Font Weights */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  /* Letter Spacing (Tracking) */
  --tracking-tight: -0.015em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;
  --tracking-wider: 0.18em;
  --tracking-brand: 0.32em;
  --tracking-hero-meta: 0.22em;

  /* ==========================================================================
     Spacing & Layout Scales (Aire y Espaciado Editorial)
     ========================================================================== */
  
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 36px;
  --space-2xl: 56px;
  --space-3xl: 80px;
  --space-4xl: 120px;

  /* Max widths */
  --container-max-width: 1180px;
  --container-editorial-width: 680px;

  /* Subtle Radii (4px - 10px) */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;

  /* ==========================================================================
     Micro-transitions & Motion Curves
     ========================================================================== */
  
  --ease-editorial: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-gentle: cubic-bezier(0.25, 0.1, 0.25, 1);
  
  --transition-fast: 220ms var(--ease-editorial);
  --transition-normal: 380ms var(--ease-editorial);
  --transition-slow: 700ms var(--ease-editorial);
  --transition-image-hover: transform 750ms var(--ease-editorial), filter 750ms var(--ease-editorial);

  /* Elevation & Shadows (Sutiles y discretas) */
  --shadow-editorial-card: 0 16px 40px -12px rgba(0, 0, 0, 0.42);
  --shadow-expanded-panel: 0 20px 48px -10px rgba(36, 29, 26, 0.28);
  --shadow-subtle-glow: 0 0 24px rgba(102, 31, 43, 0.15);

  /* Touch minimum target */
  --touch-target-min: 44px;
}