/* ============================================================
   DESIGN TOKENS — Fresh Green & White Food Theme
   ============================================================ */

:root {

  /* ── Brand Colors ───────────────────────────────────────── */
  --color-primary:      #1B4332;   /* deep forest green */
  --color-primary-mid:  #2D6A4F;   /* mid green */
  --color-accent:       #52B788;   /* fresh mint green */
  --color-accent-light: #74C69D;   /* light mint */
  --color-accent-dark:  #40916C;   /* darker mint */
  --color-accent-2:     #F4845F;   /* warm coral — for Order Now CTA */
  --color-accent-2-dark:#E05C35;   /* darker coral hover */

  --color-bg:           #F8FAF8;   /* off-white with green tint */
  --color-surface:      #F0F7F1;   /* very light green surface */
  --color-surface-2:    #DCF0E3;   /* slightly deeper green tint */
  --color-text:         #1A2E1A;   /* near-black with green tint */
  --color-text-muted:   #4A6741;   /* muted green-grey */
  --color-text-light:   #8FAF87;   /* light muted */
  --color-white:        #FFFFFF;
  --color-black:        #000000;
  --color-border:       rgba(27,67,50,0.10);
  --color-overlay:      rgba(10,25,15,0.58);

  /* ── Typography ─────────────────────────────────────────── */
  --font-display: 'Playfair Display', 'Georgia', serif;
  --font-body:    'Plus Jakarta Sans', 'Helvetica Neue', sans-serif;
  --font-mono:    'DM Mono', monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.25rem;
  --text-xl:   1.5rem;
  --text-2xl:  2rem;
  --text-3xl:  2.75rem;
  --text-4xl:  3.75rem;
  --text-5xl:  5rem;
  --text-6xl:  6.5rem;

  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.6;
  --leading-loose:  1.85;

  --tracking-tight:   -0.03em;
  --tracking-normal:   0em;
  --tracking-wide:     0.06em;
  --tracking-widest:   0.18em;

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

  /* ── Layout ──────────────────────────────────────────────── */
  --container-sm:   640px;
  --container-md:   768px;
  --container-lg:   1024px;
  --container-xl:   1280px;
  --container-2xl:  1440px;

  --nav-height:        70px;
  --nav-height-mobile: 58px;

  /* ── Borders & Radius ────────────────────────────────────── */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-full: 9999px;

  /* ── Shadows ─────────────────────────────────────────────── */
  --shadow-xs:     0 1px 3px rgba(27,67,50,0.06);
  --shadow-sm:     0 4px 14px rgba(27,67,50,0.08);
  --shadow-md:     0 8px 28px rgba(27,67,50,0.12);
  --shadow-lg:     0 20px 60px rgba(27,67,50,0.14);
  --shadow-xl:     0 32px 80px rgba(27,67,50,0.18);
  --shadow-accent: 0 8px 28px rgba(82,183,136,0.30);
  --shadow-order:  0 8px 28px rgba(244,132,95,0.35);

  /* ── Transitions ─────────────────────────────────────────── */
  --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:   150ms;
  --duration-base:   280ms;
  --duration-slow:   500ms;
  --duration-slower: 800ms;

  /* ── Z-index ─────────────────────────────────────────────── */
  --z-below:   -1;
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
}

/* ── Dark Mode ──────────────────────────────────────────────── */
[data-theme="dark"] {
  --color-bg:         #0D1F12;
  --color-surface:    #162A1A;
  --color-surface-2:  #1E3823;
  --color-text:       #E8F5EA;
  --color-text-muted: #8FBF96;
  --color-text-light: #5A8F62;
  --color-border:     rgba(82,183,136,0.12);
  --color-overlay:    rgba(0,0,0,0.72);
}