/* MealCave design tokens — white + lime, Outfit throughout */
:root {
  /* Brand */
  --lime-500: #3DD15F;   /* brand green: buttons, badges, the fork */
  --lime-600: #2EBB50;   /* hover */
  --lime-700: #167A35;   /* green text on white (5:1) */
  --lime-100: #D9F6E0;   /* tints, selected states */
  --lime-50:  #F0FBF3;   /* soft section background */
  --ink:      #141210;   /* text, logo letters, text on green */
  --ink-2:    #57534D;   /* secondary text */
  --ink-3:    #8A857D;   /* hints */
  --line:     #E8E6E1;   /* borders */
  --bg:       #FFFFFF;
  --bg-soft:  #F7F8F5;   /* alternate section background */
  --ember:    #D9622B;   /* spicy tag only */
  --danger:   #C2412D;

  /* Type: Outfit (the logo font) everywhere */
  --font: "Outfit", "Helvetica Neue", Arial, sans-serif;
  --fs-h1: clamp(40px, 5.4vw, 68px);
  --fs-h2: clamp(30px, 3.4vw, 44px);
  --fs-h3: 20px;
  --fs-body: 17px;
  --fs-small: 14px;

  /* Space (8px base) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
  --section: clamp(64px, 8vw, 104px);
  --bleed: clamp(20px, 5vw, 80px);
  --max: 1280px;

  /* Shape */
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(20, 18, 16, .06);
  --shadow-md: 0 12px 32px -12px rgba(20, 18, 16, .18);

  /* Motion */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --t: 250ms;
}
@media (prefers-reduced-motion: reduce) { :root { --t: 1ms; } }