/* ══════════════════════════════════════════════
   SIPJOLT v4 — Design Tokens
   All variables defined here. No hardcoded values
   in component CSS.
   ══════════════════════════════════════════════ */

:root {
  /* ── COLOR PALETTE ── */
  --white:        #FFFFFF;
  --off-white:    #F8F7F5;
  --grey-50:      #F9FAFB;
  --grey-100:     #F3F4F6;
  --grey-200:     #E5E7EB;
  --grey-300:     #D1D5DB;
  --grey-400:     #9CA3AF;
  --grey-500:     #6B7280;
  --grey-600:     #4B5563;
  --grey-700:     #374151;
  --grey-900:     #111827;
  --ink:          #0D0D0D;

  /* ── ACCENT — clean tech energy ── */
  --accent:       #3B82F6;
  --accent-light: #DBEAFE;

  /* ── CATEGORY COLORS — beverages only ── */
  --matcha-tone:    #8FAF82;
  --coffee-tone:    #8C6E54;
  --tea-tone:       #A89070;
  --chocolate-tone: #5C4033;

  /* ── TYPOGRAPHY ── */
  --font-display: 'Inter', system-ui, sans-serif;
  --font-body:    'DM Sans', system-ui, sans-serif;

  --size-xs:      0.75rem;
  --size-sm:      0.875rem;
  --size-base:    1rem;
  --size-md:      1.125rem;
  --size-lg:      1.25rem;
  --size-xl:      1.5rem;
  --size-2xl:     2rem;
  --size-3xl:     2.5rem;
  --size-4xl:     3.5rem;
  --size-5xl:     5rem;
  --size-hero:    clamp(3.5rem, 8vw, 7rem);

  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;

  --leading-tight:   1.1;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

  --tracking-tight:  -0.03em;
  --tracking-normal:  0;
  --tracking-wide:    0.08em;
  --tracking-wider:   0.15em;

  /* ── 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-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;
  --space-32:  8rem;
  --space-40:  10rem;

  /* ── LAYOUT ── */
  --container:    1280px;
  --container-md: 960px;
  --container-sm: 720px;
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    16px;
  --radius-full:  9999px;

  /* ── ANIMATION ── */
  --ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:    cubic-bezier(0.45, 0, 0.55, 1);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:  200ms;
  --duration-base:  350ms;
  --duration-slow:  600ms;
  --duration-crawl: 1200ms;

  /* ── 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 20px 48px rgba(0,0,0,0.10), 0 8px 16px rgba(0,0,0,0.06);
  --shadow-xl:  0 40px 80px rgba(0,0,0,0.12);
}