/* ============================================================
   EATS ON 601 — Design Tokens
   Colors & Type definitions used across the design system.
   Load on every product surface (app, web, marketing).
   ============================================================ */

/* ---------- TYPOGRAPHY ---------- */
@import url("https://fonts.googleapis.com/css2?family=League+Spartan:wght@400;500;600;700;800;900&family=Public+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Inter:wght@400;500;600;700&family=Lobster+Two:ital,wght@0,400;0,700;1,400;1,700&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

:root {
  /* ============= COLOR =============
     Roadside-Americana palette: deep highway navy + cream shoulder line +
     tomato red ribbon + marigold "601" + sky blue. Neutrals are warm
     so cream/navy combinations don't go cold. */

  /* Primary brand colors (the five shown in the standards page) */
  --eats-navy:      #0B1D33;   /* Highway Navy — primary brand color */
  --eats-cream:     #FBF7EF;   /* Road Cream — primary background */
  --eats-red:       #D6453D;   /* Tomato Red — accent / ribbon */
  --eats-yellow:    #F2B32D;   /* Marigold — "601" highlight */
  --eats-sky:       #2BA7B8;   /* Sky Blue — secondary accent */

  /* Tints + shades — derived for UI states. Keep within brand temperature. */
  --eats-navy-900:  #050E1A;
  --eats-navy-800:  #081628;
  --eats-navy-700:  #0B1D33;   /* same as base */
  --eats-navy-600:  #1B3653;
  --eats-navy-500:  #2E4F76;
  --eats-navy-400:  #5A7596;
  --eats-navy-300:  #8FA3BC;
  --eats-navy-200:  #BBC9DC;
  --eats-navy-100:  #DDE5EE;
  --eats-navy-050:  #EFF3F8;

  --eats-cream-100: #FFFDF6;   /* Lightest — page bg, cards */
  --eats-cream-200: #FBF7EF;   /* Base cream */
  --eats-cream-300: #EFE8D6;   /* Borders / dividers on cream */
  --eats-cream-400: #DDD2B5;   /* Hovers on cream */

  --eats-red-700:   #B23730;   /* Pressed */
  --eats-red-600:   #D6453D;   /* Base */
  --eats-red-500:   #E25C55;   /* Hover */
  --eats-red-100:   #FADCD9;   /* Subtle bg */

  --eats-yellow-700:#C08C1E;
  --eats-yellow-600:#F2B32D;   /* Base */
  --eats-yellow-500:#F5C557;   /* Hover */
  --eats-yellow-100:#FCEDC4;

  --eats-sky-700:   #1F8593;
  --eats-sky-600:   #2BA7B8;   /* Base */
  --eats-sky-500:   #5DC0CD;
  --eats-sky-100:   #D2EEF1;

  /* Functional colors */
  --eats-success:   #4F8C4A;   /* Open Now / available — leans olive, not screaming green */
  --eats-warning:   #F2B32D;   /* same as marigold */
  --eats-danger:    #D6453D;   /* same as tomato */
  --eats-info:      #2BA7B8;   /* same as sky */

  /* Neutrals (warm-leaning) */
  --eats-ink:       #1A2230;   /* Body text on cream */
  --eats-ink-soft:  #4A5564;   /* Secondary text */
  --eats-ink-mute:  #7A8593;   /* Tertiary text / metadata */
  --eats-line:      #E0D8C2;   /* Hairline on cream */
  --eats-line-strong:#B8AC8A;  /* Heavy rule (signage / stall-marker style) */

  /* Surfaces */
  --eats-surface:        var(--eats-cream-100);
  --eats-surface-elev:   #FFFFFF;
  --eats-surface-inset:  var(--eats-cream-200);
  --eats-surface-dark:   var(--eats-navy);
  --eats-surface-on-dark:#081628;

  /* ============= TYPE ============= */
  --font-display:  "League Spartan", "Oswald", "Helvetica Neue", Arial, sans-serif;
  --font-body:     "Public Sans", "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-ui:       "Public Sans", "Inter", system-ui, -apple-system, sans-serif;
  --font-script:   "Lobster Two", "Pacifico", cursive;
  --font-mono:     "IBM Plex Mono", "Menlo", monospace;

  /* Type scale — display sizes are tight & condensed; body is calm serif */
  --t-display-xl: 88px;   /* hero billboard */
  --t-display-lg: 64px;
  --t-display-md: 48px;
  --t-display-sm: 36px;
  --t-headline:   28px;
  --t-title:      22px;
  --t-body-lg:    18px;
  --t-body:       16px;
  --t-body-sm:    14px;
  --t-caption:    12px;
  --t-eyebrow:    11px;   /* uppercase marker text */

  --lh-tight:    1.05;
  --lh-snug:     1.2;
  --lh-base:     1.5;
  --lh-relaxed:  1.65;

  --ls-display: -0.01em;
  --ls-eyebrow:  0.18em;   /* generous tracking on uppercase eyebrows */
  --ls-button:   0.06em;

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

  /* Radii — generally LOW. The brand is signage / shield / stall-marker.
     Sharp corners, no soft bubbles. */
  --r-0:  0;
  --r-1:  2px;
  --r-2:  4px;
  --r-3:  8px;
  --r-pill: 999px;     /* used sparingly — chips & status pills */
  --r-shield: 12px 12px 12px 12px / 16px 16px 4px 4px; /* faux highway shield */

  /* Shadows — soft & low; this brand uses borders + ribbons more than shadow */
  --sh-1: 0 1px 0 rgba(27,58,92,0.08);
  --sh-2: 0 4px 14px -4px rgba(27,58,92,0.18);
  --sh-3: 0 12px 32px -10px rgba(27,58,92,0.28);
  --sh-stamp: 2px 2px 0 var(--eats-navy);     /* offset hard shadow — sticker feel */
  --sh-stamp-cream: 3px 3px 0 var(--eats-cream-300);
}

/* ---------- BASE ---------- */
html, body {
  background: var(--eats-cream-100);
  color: var(--eats-ink);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
}

/* Display / heading helpers */
.eats-display {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 75%;            /* condensed feel */
  letter-spacing: -0.015em;
  line-height: 0.92;            /* tight stack — display words shouldn't gap apart */
  text-transform: uppercase;
  color: var(--eats-navy);
  text-wrap: balance;
}
.eats-display--xl { font-size: var(--t-display-xl); }
.eats-display--lg { font-size: var(--t-display-lg); }
.eats-display--md { font-size: var(--t-display-md); }
.eats-display--sm { font-size: var(--t-display-sm); }

.eats-headline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-headline);
  line-height: var(--lh-snug);
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--eats-navy);
}

.eats-eyebrow {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--t-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--eats-red);
}

.eats-script {
  font-family: var(--font-script);
  font-weight: 400;
  color: var(--eats-cream-200);
  line-height: 1;
}

.eats-body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-relaxed);
  color: var(--eats-ink);
}

.eats-mono {
  font-family: var(--font-mono);
  font-size: var(--t-body-sm);
  letter-spacing: 0.02em;
  color: var(--eats-ink-soft);
}