/* ============================================
   CHISPITA PASTELERÍA — Design Tokens
   Tema: Sweet · Caramelo · Crema
   ============================================ */

:root {
  /* Fondos cremosos */
  --bg-primary:   #FFF8F1;   /* Crema fondo (warm white) */
  --bg-secondary: #FBEEDD;   /* Crema rosada */
  --bg-tertiary:  #F5E1CB;   /* Caramelo claro */
  --bg-elevated:  #FFFFFF;   /* Tarjetas */
  --bg-dark:      #2A1810;   /* Chocolate profundo (footer, contraste) */

  /* Surfaces (glassmorphism cálido) */
  --surface-glass:        rgba(255, 248, 241, 0.65);
  --surface-glass-strong: rgba(255, 255, 255, 0.85);
  --surface-hover:        rgba(232, 169, 92, 0.08);

  /* Borders */
  --border-subtle:  rgba(42, 24, 16, 0.06);
  --border-default: rgba(42, 24, 16, 0.10);
  --border-strong:  rgba(232, 169, 92, 0.32);
  --border-glow:    rgba(228, 124, 149, 0.40);

  /* Marca · paleta dulce */
  --sugar:        #FFFFFF;
  --cream:        #FCE7C4;   /* Crema vainilla */
  --cream-soft:   #FFF0DA;
  --caramel:      #E8A95C;   /* Caramelo principal */
  --caramel-deep: #C8772E;   /* Caramelo profundo */
  --chocolate:    #4A2C20;   /* Chocolate oscuro */
  --rose-blush:   #F8B8C4;   /* Rosa empolvado */
  --rose-deep:    #E47C95;   /* Rosa profundo (acentos) */
  --berry:        #B83E5C;   /* Frutos rojos (errores y alertas) */
  --mint:         #B4D4B8;   /* Pistacho suave (éxito) */
  --gold:         #D4AF37;   /* Dorado real (premium accents) */
  --gold-light:   #F2D87A;

  /* Texto */
  --text-primary:   #2A1810;
  --text-secondary: #6B4A38;
  --text-muted:     #9C7B66;
  --text-disabled:  #C9B7A6;
  --text-on-dark:   #FFF8F1;
  --text-link:      #C8772E;

  /* Gradientes "Caramelo" (signature) */
  --gradient-caramel: linear-gradient(135deg, #FCE7C4 0%, #E8A95C 60%, #C8772E 100%);
  --gradient-rose:    linear-gradient(135deg, #FCE7C4 0%, #F8B8C4 50%, #E47C95 100%);
  --gradient-sunset:  linear-gradient(135deg, #FBEEDD 0%, #F8B8C4 40%, #E8A95C 100%);
  --gradient-cream:   linear-gradient(135deg, #FFF8F1 0%, #FCE7C4 100%);
  --gradient-text:    linear-gradient(135deg, #C8772E 0%, #E47C95 100%);
  --gradient-button:  linear-gradient(135deg, #E8A95C 0%, #C8772E 100%);
  --gradient-button-rose: linear-gradient(135deg, #F8B8C4 0%, #E47C95 100%);
  --gradient-border:  linear-gradient(135deg, rgba(232,169,92,0.5), rgba(228,124,149,0.3), rgba(212,175,55,0.4));

  /* Glows */
  --glow-caramel:        0 0 40px rgba(232, 169, 92, 0.35);
  --glow-caramel-strong: 0 0 80px rgba(232, 169, 92, 0.50);
  --glow-rose:           0 0 60px rgba(228, 124, 149, 0.35);
  --glow-gold:           0 0 50px rgba(212, 175, 55, 0.40);
  --glow-card-hover:     0 20px 60px -15px rgba(228, 124, 149, 0.35);

  /* Shadows cálidas */
  --shadow-sm: 0 1px 2px rgba(74, 44, 32, 0.08);
  --shadow-md: 0 4px 16px rgba(74, 44, 32, 0.10);
  --shadow-lg: 0 12px 40px rgba(74, 44, 32, 0.12);
  --shadow-xl: 0 24px 80px rgba(74, 44, 32, 0.18);

  /* Typography */
  --font-display: 'Fraunces', 'Playfair Display', Georgia, serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-script:  'Caveat', 'Brush Script MT', cursive;
  --font-mono:    'JetBrains Mono', 'Geist Mono', ui-monospace, monospace;

  /* Sizes — fluid */
  --text-xs:   clamp(0.72rem, 0.7rem + 0.1vw, 0.78rem);
  --text-sm:   clamp(0.84rem, 0.82rem + 0.12vw, 0.92rem);
  --text-base: clamp(0.95rem, 0.92rem + 0.15vw, 1.05rem);
  --text-md:   clamp(1.05rem, 1rem + 0.25vw, 1.18rem);
  --text-lg:   clamp(1.2rem, 1.1rem + 0.5vw, 1.4rem);
  --text-xl:   clamp(1.45rem, 1.25rem + 1vw, 1.85rem);
  --text-2xl:  clamp(1.8rem, 1.5rem + 1.5vw, 2.4rem);
  --text-3xl:  clamp(2.2rem, 1.7rem + 2.5vw, 3.2rem);
  --text-4xl:  clamp(2.8rem, 2rem + 4vw, 4.5rem);
  --text-5xl:  clamp(3.4rem, 2.4rem + 5vw, 5.8rem);
  --text-hero: clamp(2.8rem, 2rem + 5.5vw, 6.5rem);

  /* Spacing */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Layout */
  --container-max:    1280px;
  --container-narrow: 1100px;
  --container-wide:   1440px;
  --content-padding:  clamp(1.25rem, 4vw, 2.5rem);
  --section-padding-y: clamp(4rem, 10vw, 8rem);

  /* Radius (suaves, casi pastelosos) */
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   22px;
  --radius-xl:   32px;
  --radius-2xl:  40px;
  --radius-full: 9999px;

  /* Transitions */
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-fast:   150ms var(--ease-out-quart);
  --transition-base:   250ms var(--ease-out-quart);
  --transition-slow:   500ms var(--ease-out-expo);
  --transition-slower: 800ms var(--ease-out-expo);

  /* Z-index */
  --z-base:    1;
  --z-content: 10;
  --z-sticky:  100;
  --z-nav:     200;
  --z-modal:   300;
  --z-toast:   400;
}