/* ============================================================
   variables.css – Design tokens
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:wght@600;700&display=swap');

:root {
  /* ── Brand Palette ── */
  --clr-primary:       hsl(225, 70%, 55%);
  --clr-primary-dark:  hsl(225, 70%, 42%);
  --clr-primary-light: hsl(225, 70%, 70%);
  --clr-accent:        hsl(38, 95%, 55%);
  --clr-accent-dark:   hsl(38, 95%, 42%);

  /* ── Neutrals ── */
  --clr-bg:            hsl(220, 20%, 97%);
  --clr-surface:       #ffffff;
  --clr-surface-2:     hsl(220, 20%, 94%);
  --clr-border:        hsl(220, 15%, 88%);
  --clr-text:          hsl(220, 25%, 15%);
  --clr-text-muted:    hsl(220, 15%, 50%);
  --clr-text-light:    hsl(220, 10%, 70%);

  /* ── Status Colors ── */
  --clr-new:           hsl(4,   80%, 58%);   /* red   */
  --clr-preparing:     hsl(38,  95%, 52%);   /* amber */
  --clr-ready:         hsl(142, 60%, 42%);   /* green */
  --clr-delivered:     hsl(220, 15%, 62%);   /* grey  */

  /* ── Gradients ── */
  --grad-hero:         linear-gradient(135deg, hsl(225,70%,22%) 0%, hsl(260,65%,28%) 100%);
  --grad-card:         linear-gradient(145deg, rgba(255,255,255,0.9), rgba(255,255,255,0.6));
  --grad-accent:       linear-gradient(90deg, var(--clr-accent), hsl(30,95%,55%));
  --grad-primary:      linear-gradient(135deg, var(--clr-primary), hsl(260,70%,55%));

  /* ── Glass ── */
  --glass-bg:          rgba(255, 255, 255, 0.15);
  --glass-border:      rgba(255, 255, 255, 0.25);
  --glass-blur:        blur(14px);

  /* ── Shadows ── */
  --shadow-xs:         0 1px 3px rgba(0,0,0,0.07);
  --shadow-sm:         0 2px 8px rgba(0,0,0,0.09);
  --shadow-md:         0 6px 24px rgba(0,0,0,0.11);
  --shadow-lg:         0 16px 48px rgba(0,0,0,0.14);
  --shadow-xl:         0 24px 72px rgba(0,0,0,0.18);

  /* ── Border Radius ── */
  --radius-sm:         6px;
  --radius-md:         12px;
  --radius-lg:         18px;
  --radius-xl:         26px;
  --radius-full:       9999px;

  /* ── Typography ── */
  --font-sans:         'Inter', system-ui, sans-serif;
  --font-display:      'Playfair Display', Georgia, serif;

  /* ── 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;

  /* ── Transitions ── */
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:     150ms;
  --dur-normal:   250ms;
  --dur-slow:     400ms;

  /* ── Cart bar height ── */
  --cart-bar-h:   68px;
}