/* ============================================================
   CASA PICANTE — CSS VARIABLES
   Design system tokens: colors, typography, spacing, shadows
   ============================================================ */

:root {

  /* ── Colors ───────────────────────────────────────────── */
  --white:            #FFFFFF;
  --off-white:        #FAF9F7;
  --cream:            #FFF8F0;
  --gray-light:       #F2F0ED;
  --gray-100:         #E8E5E1;
  --gray-200:         #D1CEC9;
  --gray-mid:         #9CA3AF;
  --gray-dark:        #374151;
  --charcoal:         #1A1A1A;
  --black:            #0D0D0D;

  /* Brand accent palette */
  --red-chili:        #E8302A;
  --red-deep:         #C0211C;
  --orange-mango:     #F97316;
  --orange-light:     #FEA64A;
  --pink-watermelon:  #F4436C;
  --pink-light:       #FF7FA0;
  --lime:             #84CC16;
  --lime-light:       #A8E045;
  --yellow-candy:     #FBBF24;

  /* Gradients */
  --gradient-hero:    linear-gradient(135deg, #FFF8F0 0%, #FAF9F7 60%, #FFF0F3 100%);
  --gradient-warm:    linear-gradient(135deg, #F97316 0%, #E8302A 100%);
  --gradient-candy:   linear-gradient(135deg, #F4436C 0%, #F97316 50%, #FBBF24 100%);
  --gradient-subtle:  linear-gradient(180deg, #FFFFFF 0%, #FAF9F7 100%);

  /* ── Typography ───────────────────────────────────────── */
  --font-brand:       'Pacifico', cursive;
  --font-display:     'Nunito', sans-serif;
  --font-body:        'DM Sans', sans-serif;

  --text-hero:        clamp(48px, 7vw, 80px);
  --text-h1:          clamp(36px, 5vw, 56px);
  --text-h2:          clamp(28px, 4vw, 42px);
  --text-h3:          clamp(20px, 2.5vw, 28px);
  --text-h4:          clamp(16px, 2vw, 20px);
  --text-body-lg:     18px;
  --text-body:        16px;
  --text-sm:          14px;
  --text-xs:          12px;

  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-black:     800;

  --leading-tight:    1.1;
  --leading-snug:     1.3;
  --leading-normal:   1.6;
  --leading-loose:    1.8;

  --tracking-tight:   -0.03em;
  --tracking-normal:  -0.01em;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.1em;

  /* ── Spacing ──────────────────────────────────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;

  --section-padding-y:       96px;
  --section-padding-y-sm:    64px;
  --section-padding-y-xs:    48px;

  /* ── Layout ───────────────────────────────────────────── */
  --container-max:    1280px;
  --container-wide:   1440px;
  --container-narrow: 860px;
  --container-xs:     600px;

  --navbar-height:    72px;

  /* ── Borders & Radius ─────────────────────────────────── */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   32px;
  --radius-full: 9999px;

  --border-width: 1.5px;
  --border-color: var(--gray-100);
  --border:       var(--border-width) solid var(--border-color);

  /* ── Shadows ──────────────────────────────────────────── */
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
  --shadow-lg:   0 12px 40px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.06);
  --shadow-xl:   0 24px 64px rgba(0,0,0,0.12), 0 8px 24px rgba(0,0,0,0.08);
  --shadow-warm: 0 8px 32px rgba(232, 48, 42, 0.15);
  --shadow-card: 0 2px 12px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);

  /* ── Transitions ──────────────────────────────────────── */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-spring: 350ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Z-Index ──────────────────────────────────────────── */
  --z-base:    1;
  --z-card:    10;
  --z-sticky:  100;
  --z-overlay: 500;
  --z-modal:   600;
  --z-toast:   700;
  --z-chat:    800;
}