/* ==========================================================================
   Eat Local Pizza, Design Token System
   Brand: Green #21A831 | Red #E40021 | Font: Montserrat
   ========================================================================== */

:root {
  /* ---- Brand Primary ---- */
  --brand-green: #21A831;
  --brand-red: #E40021;

  /* ---- Dark Surface Scale ---- */
  --surface-base: #0A0A0A;
  --surface-elevated: #141414;
  --surface-floating: #1E1E1E;
  --surface-overlay: #282828;
  --surface-border: #333333;

  /* ---- Warm Neutrals ---- */
  --neutral-50: #FAF7F2;
  --neutral-100: #F0EBE1;
  --neutral-200: #DDD5C7;
  --neutral-300: #C4B9A7;
  --neutral-400: #A69882;
  --neutral-500: #8A7B65;
  --neutral-600: #6E6150;
  --neutral-700: #524A3D;
  --neutral-800: #38332B;
  --neutral-900: #1F1C18;

  /* ---- Green Scale ---- */
  --green-50: #E8F8EA;
  --green-100: #C5EDC9;
  --green-200: #9FE1A6;
  --green-300: #74D47E;
  --green-400: #4DCA5C;
  --green-500: #21A831;
  --green-600: #1B8C29;
  --green-700: #156F21;
  --green-800: #0F5319;
  --green-900: #093811;

  /* ---- Red Scale ---- */
  --red-50: #FDE8EC;
  --red-100: #FBC5CE;
  --red-200: #F89DAD;
  --red-300: #F4718A;
  --red-400: #EF4D6E;
  --red-500: #E40021;
  --red-600: #C2001C;
  --red-700: #9E0017;
  --red-800: #7A0012;
  --red-900: #56000D;

  /* ---- Semantic Colors ---- */
  --text-primary: var(--neutral-50);
  --text-secondary: var(--neutral-300);
  --text-muted: var(--neutral-500);
  --text-inverse: var(--surface-base);
  --accent-primary: var(--brand-green);
  --accent-secondary: var(--brand-red);

  /* ---- Typography ---- */
  --font-heading: 'Montserrat Alternates', 'Montserrat', sans-serif;
  --font-body: 'Montserrat', sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem;
  --text-4xl: 2.5rem;
  --text-5xl: 3.5rem;
  --text-6xl: 4.5rem;

  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  --tracking-tight: -0.03em;
  --tracking-normal: 0;
  --tracking-wide: 0.05em;
  --tracking-wider: 0.1em;

  /* ---- Spacing (8px grid).
     Tokens 10+ get mobile overrides below to prevent excessive gaps
     between sections on small viewports. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5rem;
  --space-11: 6rem;
  --space-12: 8rem;
  --space-13: 10rem;
  --space-14: 12rem;
  --space-15: 14rem;
  --space-16: 16rem;

  --section-py: var(--space-9);
  --section-px: var(--space-4);
  --container-max: 1280px;
  --container-narrow: 960px;

  /* ---- Shadows (layered, green-tinted) ---- */
  --shadow-sm: 0 1px 2px rgba(33, 168, 49, 0.04), 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px rgba(33, 168, 49, 0.06), 0 2px 4px rgba(0, 0, 0, 0.08), 0 10px 15px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 25px rgba(33, 168, 49, 0.08), 0 6px 10px rgba(0, 0, 0, 0.08), 0 20px 40px rgba(0, 0, 0, 0.12);
  --shadow-glow-green: 0 0 20px rgba(33, 168, 49, 0.2), 0 0 40px rgba(33, 168, 49, 0.08);
  --shadow-glow-red: 0 0 20px rgba(228, 0, 33, 0.2), 0 0 40px rgba(228, 0, 33, 0.08);

  /* ---- Animation ---- */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;

  /* ---- Z-Index Layers ---- */
  --z-base: 0;
  --z-elevated: 10;
  --z-floating: 20;
  --z-sticky: 30;
  --z-overlay: 40;
  --z-modal: 50;

  /* ---- Border Radius ---- */
  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;

  /* Layout - sticky header height. Read by JS (initStickyNav rootMargin)
     and CSS (scroll-margin-top, sticky tab top). MUST be defined here so
     getComputedStyle returns a parseable value, not an empty string. */
  --header-height: 72px;
}

/* Mobile spacing scale-down: tightens the large spacing tokens
   (used for section padding) by ~40-50% so the gaps between
   sections don't feel cavernous on narrow viewports. Tokens 1-9
   stay constant since they're used for micro-spacing inside
   cards, gaps, and components where shrinking would harm legibility. */
@media (max-width: 767px) {
  :root {
    --space-10: 3rem;     /* was 5rem */
    --space-11: 3.5rem;   /* was 6rem */
    --space-12: 4rem;     /* was 8rem */
    --space-13: 5rem;     /* was 10rem */
    --space-14: 5.5rem;   /* was 12rem */
    --space-15: 6rem;     /* was 14rem */
    --space-16: 6.5rem;   /* was 16rem */

    /* Section vertical padding was previously left at the base 4rem on
       mobile (the desktop query raises it, but nothing lowered it for
       small screens). That put ~128px between every pair of sections,
       compounding into cavernous gaps + stranded hairline dividers on
       long pages. Scale down ~40% to match the token philosophy above.
       One override tightens inter-section spacing on every page. */
    --section-py: var(--space-7);  /* 2.5rem (was 4rem) */
  }
}

/* Desktop overrides */
@media (min-width: 768px) {
  :root {
    --section-py: var(--space-11);
    --section-px: var(--space-8);
  }
}

@media (min-width: 1024px) {
  :root {
    --text-xs: 0.8125rem;
    --text-sm: 1rem;
    --text-base: 1.125rem;
    --text-lg: 1.25rem;
    --text-xl: 1.5rem;
    --text-2xl: 1.75rem;
  }
}