/* ═══════════════════════════════════════════════════════════════
   ROE ROE'S CATERING — Design Tokens
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Color Palette ─────────────────────────────────────────── */
  --color-bg:          #8a4822;       /* Main background — warm terracotta brown */
  --color-bg-mid:      #7a3d1c;       /* ~10% darker mid bg */
  --color-bg-deep:     #5c2c12;       /* Deep/footer background */
  --color-bg-card:     #9e5530;       /* Card surfaces — slightly lighter */
  --color-bg-elevated: #a66038;       /* Elevated surface (tabs, inputs) */

  --color-accent:      #ffc36c;       /* Gold/amber CTA */
  --color-accent-light:#ffd48e;       /* Hover — lighten ~15% */
  --color-accent-warm: #ff9f3c;       /* Warm secondary accent — shifted complementary */
  --color-accent-deep: #e8a840;       /* Deeper gold for active states */

  --color-text:        #fff5ea;       /* Warm off-white body text */
  --color-text-muted:  #d4a882;       /* Muted body copy */
  --color-text-faint:  #b07d58;       /* Very faint / placeholder */
  --color-heading:     #ffffff;       /* Headings pure white */
  --color-border:      rgba(255, 195, 108, 0.15);  /* Subtle accent border */
  --color-border-mid:  rgba(255, 195, 108, 0.25);

  /* ── Typography ────────────────────────────────────────────── */
  --font-heading: 'Poppins', sans-serif;
  --font-body:    'Inter', sans-serif;

  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-xbold:   800;
  --fw-black:   900;

  /* ── Spacing ───────────────────────────────────────────────── */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 5rem;
  --space-4xl: 7rem;

  /* ── Border Radius ─────────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 9999px;

  /* ── Shadows ───────────────────────────────────────────────── */
  --shadow-sm:  0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-md:  0 4px 20px rgba(0, 0, 0, 0.4);
  --shadow-lg:  0 8px 40px rgba(0, 0, 0, 0.5);
  --shadow-xl:  0 16px 64px rgba(0, 0, 0, 0.6);

  /* ── Glow (accent-based) ───────────────────────────────────── */
  --glow-accent:    0 0 32px rgba(255, 195, 108, 0.35);
  --glow-accent-sm: 0 0 16px rgba(255, 195, 108, 0.25);
  --glow-accent-lg: 0 0 60px rgba(255, 195, 108, 0.45);
  --glow-warm:      0 0 32px rgba(255, 159, 60, 0.35);

  /* ── Motion ────────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:   150ms;
  --duration-base:   300ms;
  --duration-slow:   500ms;
  --duration-reveal: 700ms;

  /* ── Layout ────────────────────────────────────────────────── */
  --container-max: 1200px;
  --nav-height:    72px;
  --section-py:    clamp(4rem, 8vw, 7rem);

  /* ── Z-indices ─────────────────────────────────────────────── */
  --z-base:    1;
  --z-overlay: 100;
  --z-nav:     200;
  --z-top:     9999;
}