/* ============================================================
   FOODSTOCKS — DESIGN TOKENS
   Sumber: Brand Guideline Foodstocks + compro foodstocks.id
   ============================================================ */
:root{
  /* — Brand inti — */
  --fs-red:        #D60001;  /* primary brand / CTA */
  --fs-red-vivid:  #FF0101;  /* aksen / hover */
  --fs-red-dark:   #B40001;  /* pressed / teks di atas terang */
  --fs-yellow:     #FFC106;  /* highlight / "hemat" / badge */
  --fs-orange:     #FF6C02;  /* aksen sekunder / "Hot" */
  --fs-magenta:    #AB0067;  /* aksen langka / label premium */
  --fs-maroon:     #580302;  /* teks gelap alternatif / footer */

  /* — Netral & latar — */
  --fs-ink:        #0F172A;  /* teks utama */
  --fs-cream:      #FFF5EB;  /* latar lembut section */
  --fs-peach:      #FFE8D3;  /* latar kartu hangat */
  --fs-white:      #FFFFFF;
  --fs-gray-700:   #334155;
  --fs-gray-500:   #64748B;
  --fs-line:       #EADFD2;

  /* — Gradien — */
  --fs-grad-hero:  linear-gradient(135deg, #FF0101 0%, #D60001 60%, #B40001 100%);

  /* — Tipografi — */
  --fs-font-display: "Fredoka", "Plus Jakarta Sans", system-ui, sans-serif;
  --fs-font-body:    "Inter", system-ui, -apple-system, sans-serif;

  /* skala tipografi (clamp = responsif) */
  --fs-h1: clamp(2.25rem, 5vw, 3.75rem);
  --fs-h2: clamp(1.875rem, 3.5vw, 3rem);
  --fs-h3: clamp(1.5rem, 2.5vw, 2.125rem);
  --fs-h4: clamp(1.25rem, 2vw, 1.5rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;

  /* — Spacing (base 4px) — */
  --fs-s1: 4px;  --fs-s2: 8px;  --fs-s3: 12px; --fs-s4: 16px;
  --fs-s5: 24px; --fs-s6: 32px; --fs-s7: 48px; --fs-s8: 64px; --fs-s9: 96px;

  /* — Layout — */
  --fs-container: 1280px;
  --fs-gutter: 24px;

  /* — Radius — */
  --fs-radius-sm: 8px;
  --fs-radius-md: 16px;
  --fs-radius-lg: 24px;
  --fs-radius-pill: 999px;

  /* — Shadow — */
  --fs-shadow-soft: 0 4px 20px -4px rgb(15 23 42 / .08);
  --fs-shadow-card: 0 8px 30px -8px rgb(15 23 42 / .12);
  --fs-shadow-lift: 0 20px 60px -20px rgb(214 0 1 / .28);

  /* — Z-index — */
  --fs-z-header: 100;
  --fs-z-drawer: 200;
  --fs-z-modal: 300;
}