/* ═══════════════════════════════════════════════
   LA CIMA — variable.css
   All CSS custom properties for the entire project
   ═══════════════════════════════════════════════ */

:root {
  /* ── Brand palette (from logo) ── */
  --color-blue:         #75BAD9;   /* sky blue ring */
  --color-red:          #EE5659;   /* "LA CIMA" banner */
  --color-green:        #C3BC3B;   /* "PALETERÍA Y NEVERÍA" banner */
  --color-yellow-light: #F7F0D5;   /* logo background cream */
  --color-sky-blue:     #E5F3F9;   /* light tint of blue */
  --color-dark:         #3C3D5D;   /* dark navy/text */

  /* ── Derived UI tones ── */
  --color-blue-dark:    #4A9ABF;
  --color-blue-light:   #D2EBF5;
  --color-red-dark:     #CC3336;
  --color-red-light:    #FDEAEA;
  --color-green-dark:   #8A8528;
  --color-green-light:  #F2F1CF;
  --color-dark-mid:     #5C5E80;
  --color-dark-light:   #EDEDF4;
  --color-cream:        #FDFAF4;
  --color-white:        #FFFFFF;
  --color-border:       rgba(60, 61, 93, 0.10);
  --color-border-light: rgba(60, 61, 93, 0.05);

  /* ── WhatsApp ── */
  --color-wa:           #25D366;
  --color-wa-dark:      #1AAF55;

  /* ── Typography ── */
  --font-display: 'DM Serif Display', Georgia, serif;
  --font-body:    'Outfit', system-ui, sans-serif;
  --font-accent:  'Josefin Sans', system-ui, sans-serif;

  /* ── Font sizes ── */
  --fs-xs:   11px;
  --fs-sm:   13px;
  --fs-base: 15px;
  --fs-md:   17px;
  --fs-lg:   22px;
  --fs-xl:   28px;
  --fs-2xl:  36px;
  --fs-3xl:  48px;
  --fs-hero: clamp(36px, 5.5vw, 66px);

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

  /* ── Border radius ── */
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   12px;
  --r-lg:   18px;
  --r-xl:   28px;
  --r-full: 999px;

  /* ── Shadows ── */
  --shadow-sm: 0 2px 8px  rgba(60,61,93,.07);
  --shadow-md: 0 4px 20px rgba(60,61,93,.10);
  --shadow-lg: 0 12px 48px rgba(60,61,93,.13);

  /* ── Layout ── */
  --nav-h:        68px;
  --max-width:    1180px;
  --gutter:       24px;

  /* ── Transitions ── */
  --ease:  .22s cubic-bezier(.4,0,.2,1);
  --ease-bounce: .35s cubic-bezier(.34,1.56,.64,1);
}