/* Fuel Lab — design tokens. Change colors/type/spacing here only. */
:root {
  /* Colors */
  /* Matte palette — no neon, no gradients */
  --bg:          #FFFFFF;
  --cream:       #FBF6EC;   /* alternate section background */
  --surface:     var(--cream);
  --ink:         #1E2A44;   /* navy — text, footer bg */
  --ink-muted:   #6B7280;
  --line:        #ECE6DC;
  --red:         #C9503A;   /* primary accent */
  --red-dark:    #A94030;
  --yellow:      #E9B44C;
  --yellow-soft: #FBEFD3;
  --orange:      #DE7F45;   /* thin 3rd stripe only */
  --success:     #2F7D4F;
  --danger:      #C0392B;

  /* White text on --red is 4.47:1 (AA needs 4.5), so buttons and red text
     (prices) use --red-dark. For the brighter red: --cta: var(--red). */
  --cta:         var(--red-dark);
  --cta-hover:   #8F3628;
  --red-text:    var(--red-dark);

  /* Type */
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-ui:      "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-section:   32px;   /* 40–48px on desktop, see base.css */
  --fs-dish:      24px;
  --fs-body:      16px;
  --fs-small:     14px;
  --fs-label:     12px;
  --tracking-label: 0.2em;

  /* Spacing — 8px grid */
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 32px;
  --s-5: 40px;
  --s-6: 48px;
  --s-8: 64px;
  --s-10: 80px;

  --gutter: 16px;
  --max-width: 1120px;

  /* Shape */
  --radius-card: 14px;
  --radius-pill: 999px;
  --border: 1px solid var(--line);

  /* The only shadow on the site: cart drawer */
  --shadow-drawer: 0 0 48px rgba(30, 42, 68, 0.14);

  /* Sticky layout heights (used for scroll offsets) */
  --header-h: 64px;
  --catnav-h: 56px;

  --tap: 44px;
}