/* Sac Bites & Nights :: shared/tokens.css
   Single source of design truth. Every page loads it FIRST:
     <link rel="stylesheet" href="/shared/tokens.css">
   Owner: ARCHITECT. Teams never redefine these tokens; they consume them.
   Palette rule (owner): dark slate/charcoal ground, vivid teal/blue/violet accents,
   red/amber/green ONLY for status. NEVER olive/tan/beige/cream/sepia/khaki/gold/warm-earth. */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  color-scheme: dark;

  /* ---- ground (slate/charcoal) ---- */
  --bg:          #0B1120;   /* page ground */
  --bg-2:        #0F172A;   /* alt band */
  --surface:     #131C2E;   /* cards */
  --surface-2:   #1A2540;   /* raised / hover */
  --surface-3:   #22304F;   /* inputs, chips */
  --border:      #2A3A5C;
  --border-2:    #3B4E78;   /* focus-adjacent, strong dividers */
  --overlay:     rgba(5, 9, 20, 0.72);

  /* ---- text (explicit everywhere; all pass WCAG AA on --bg and --surface) ---- */
  --text:        #F1F5F9;   /* 16.9:1 on --bg */
  --text-2:      #CBD5E1;   /* 12.0:1 */
  --text-3:      #94A3B8;   /*  7.0:1 — minimum for any readable text */
  --text-invert: #06121A;   /* on accent fills */

  /* ---- accents ---- */
  --teal:        #2DD4BF;
  --teal-2:      #14B8A6;
  --teal-soft:   rgba(45, 212, 191, 0.14);
  --blue:        #60A5FA;
  --blue-2:      #3B82F6;
  --blue-soft:   rgba(96, 165, 250, 0.14);
  --violet:      #A78BFA;
  --violet-2:    #8B5CF6;
  --violet-soft: rgba(167, 139, 250, 0.16);
  --pink:        #F472B6;   /* sparing: night/"Nights" moments only */
  --grad-brand:  linear-gradient(115deg, #2DD4BF 0%, #60A5FA 48%, #A78BFA 100%);
  --grad-night:  radial-gradient(1200px 600px at 20% -10%, rgba(45,212,191,.18), transparent 60%),
                 radial-gradient(900px 500px at 90% 10%, rgba(139,92,246,.20), transparent 60%);

  /* ---- status (only for state, never decoration) ---- */
  --ok:          #22C55E;   /* approved / open now / joined */
  --ok-soft:     rgba(34, 197, 94, 0.16);
  --warn:        #F59E0B;   /* pending / starting soon / followup */
  --warn-soft:   rgba(245, 158, 11, 0.16);
  --bad:         #EF4444;   /* rejected / closed / error */
  --bad-soft:    rgba(239, 68, 68, 0.16);
  --info:        #60A5FA;

  /* ---- category colors (map pins, chips). Keys match shared/normalize.js CATEGORIES ---- */
  --cat-tacos:    #2DD4BF;  /* Tacos/Mexican */
  --cat-bbq:      #F87171;  /* BBQ/Grill */
  --cat-burgers:  #60A5FA;  /* Burgers/Dogs/Comfort */
  --cat-asian:    #A78BFA;  /* Asian/Island */
  --cat-med:      #34D399;  /* Mediterranean */
  --cat-pizza:    #FB7185;  /* Pizza/Italian */
  --cat-dessert:  #F472B6;  /* Dessert/Sweets */
  --cat-drinks:   #38BDF8;  /* Drinks/Coffee */
  --cat-other:    #94A3B8;  /* Other */

  /* ---- type ---- */
  --font-display: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --fs-body:      1.1875rem;   /* 19px — floor for body text */
  --fs-key:       1.3125rem;   /* 21px — key text: CTAs, truck names, times, form labels */
  --fs-small:     1.1875rem;   /* 19px — meta, hints, badges (blindside r3: owner floor is 19px) */
  --fs-legal:     1.0625rem;   /* 17px — ONLY legal/copyright lines and map attribution */
  --fs-h3:        clamp(1.5rem, 1.2rem + 1vw, 1.875rem);
  --fs-h2:        clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  --fs-h1:        clamp(2.6rem, 1.6rem + 4.5vw, 5rem);
  --fs-display:   clamp(3.25rem, 1rem + 9vw, 9rem); /* home hero only */
  --lh-body:      1.55;
  --lh-tight:     1.05;
  --tracking-display: -0.035em;

  /* ---- space / shape ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
  --gutter: 16px;               /* phone side gutter (375px) */
  --maxw: 1200px;
  --radius-sm: 10px; --radius: 16px; --radius-lg: 24px; --radius-pill: 999px;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  --glow-teal: 0 0 0 1px rgba(45,212,191,.35), 0 0 28px rgba(45,212,191,.28);
  --glow-violet: 0 0 0 1px rgba(167,139,250,.35), 0 0 28px rgba(167,139,250,.28);
  --focus: 0 0 0 3px #0B1120, 0 0 0 6px #2DD4BF;

  /* ---- motion ---- */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-1: 150ms; --dur-2: 280ms; --dur-3: 600ms;

  /* ---- layers ---- */
  --z-map: 1; --z-header: 50; --z-progress: 60; --z-sheet: 70; --z-toast: 90; --z-cursor: 100;
}
@media (min-width: 768px) { :root { --gutter: 32px; } }

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { margin: 0; background: var(--bg); color: var(--text); overflow-x: clip; }
body {
  font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body);
  min-height: 100dvh; -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--text); line-height: var(--lh-tight);
  letter-spacing: -0.02em; margin: 0 0 var(--s-4); text-wrap: balance; }
h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); }
p, li, dd, td, th, label, legend, figcaption, blockquote { color: var(--text-2); }
p { margin: 0 0 var(--s-4); max-width: 68ch; }
strong, b { color: var(--text); }
a { color: var(--teal); text-underline-offset: 3px; }
a:hover { color: var(--blue); }
img, svg, video, canvas { max-width: 100%; display: block; }
small, .u-small { font-size: var(--fs-small); color: var(--text-3); }
hr { border: 0; border-top: 1px solid var(--border); margin: var(--s-6) 0; }
::selection { background: var(--violet-2); color: #FFFFFF; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--radius-sm); }

/* form controls: explicit colors so phone dark/light modes never hide text */
input, select, textarea, button { font: inherit; color: var(--text); }
input, select, textarea {
  width: 100%; min-height: 52px; padding: 12px 14px;
  background: var(--surface-3); color: var(--text); caret-color: var(--teal);
  border: 1px solid var(--border-2); border-radius: var(--radius-sm); font-size: var(--fs-body);
}
input::placeholder, textarea::placeholder { color: var(--text-3); opacity: 1; }
select option { background: var(--surface); color: var(--text); }
input:focus, select:focus, textarea:focus { border-color: var(--teal); box-shadow: var(--focus); outline: none; }
input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--bad); }
label { display: block; font-size: var(--fs-key); font-weight: 600; color: var(--text); margin-bottom: var(--s-2); }

/* ---------------------------------------------------------------- shared components (sb-*) */
.sb-container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.sb-section { padding-block: var(--s-8); }

.sb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 52px; padding: 12px 22px; border-radius: var(--radius-pill); border: 1px solid transparent;
  font-family: var(--font-display); font-size: var(--fs-key); font-weight: 700; line-height: 1;
  text-decoration: none; cursor: pointer; transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-2);
  background: var(--grad-brand); color: var(--text-invert);
}
.sb-btn:hover { color: var(--text-invert); box-shadow: var(--glow-teal); transform: translateY(-1px); }
.sb-btn--ghost { background: transparent; color: var(--text); border-color: var(--border-2); }
.sb-btn--ghost:hover { color: var(--text); border-color: var(--teal); box-shadow: none; }
.sb-btn--danger { background: var(--bad); color: #FFFFFF; }
.sb-btn--ok { background: var(--ok); color: var(--text-invert); }
.sb-btn[disabled], .sb-btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }

.sb-card {
  background: var(--surface); color: var(--text); border: 1px solid var(--border);
  border-radius: var(--radius); padding: var(--s-5);
}
.sb-card:hover { border-color: var(--border-2); }

.sb-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 14px;
  border-radius: var(--radius-pill); background: var(--surface-3); color: var(--text);
  border: 1px solid var(--border-2); font-size: var(--fs-key); font-weight: 600; cursor: pointer; /* fix r3.2: chips are key text (21px) */
}
.sb-chip[aria-pressed="true"], .sb-chip.is-active { background: var(--teal-soft); border-color: var(--teal); color: var(--text); }

/* status badges — the only place red/amber/green appear */
.sb-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius-pill); white-space: nowrap; flex: none; /* fix r3.2: "Open now" never breaks */
  font-size: var(--fs-small); font-weight: 700; color: var(--text); border: 1px solid currentColor; }
.sb-badge::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.sb-badge--ok   { color: var(--ok);   background: var(--ok-soft); }
.sb-badge--warn { color: var(--warn); background: var(--warn-soft); }
.sb-badge--bad  { color: var(--bad);  background: var(--bad-soft); }
.sb-badge--info { color: var(--blue); background: var(--blue-soft); }

.sb-cat-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--cat-other); }
.sb-cat-dot[data-cat="Tacos/Mexican"]        { background: var(--cat-tacos); }
.sb-cat-dot[data-cat="BBQ/Grill"]            { background: var(--cat-bbq); }
.sb-cat-dot[data-cat="Burgers/Dogs/Comfort"] { background: var(--cat-burgers); }
.sb-cat-dot[data-cat="Asian/Island"]         { background: var(--cat-asian); }
.sb-cat-dot[data-cat="Mediterranean"]        { background: var(--cat-med); }
.sb-cat-dot[data-cat="Pizza/Italian"]        { background: var(--cat-pizza); }
.sb-cat-dot[data-cat="Dessert/Sweets"]       { background: var(--cat-dessert); }
.sb-cat-dot[data-cat="Drinks/Coffee"]        { background: var(--cat-drinks); }

.sb-field { margin-bottom: var(--s-5); }
.sb-field__hint  { font-size: var(--fs-small); color: var(--text-3); margin-top: var(--s-1); }
.sb-field__error { font-size: var(--fs-small); color: var(--bad); margin-top: var(--s-1); font-weight: 600; }

.sb-empty { text-align: center; padding: var(--s-7) var(--s-4); color: var(--text-2); border: 1px dashed var(--border-2); border-radius: var(--radius); }

/* ---------------------------------------------------------------- utilities (u-*) */
.u-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.u-grad-text { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.u-key { font-size: var(--fs-key); color: var(--text); font-weight: 600; }
.u-legal, .sb-footer small { font-size: var(--fs-legal); }
/* blindside r3: key info on phones (status badges, where the truck is) is 21px */
@media (max-width: 767px) { .sb-badge, .week-stop__addr, .map-item__addr, .home-stop__addr { font-size: var(--fs-key); } }
.u-muted { color: var(--text-3); }
.u-stack > * + * { margin-top: var(--s-4); }
.u-row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.u-grid { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.u-hide-mobile { display: none; }
@media (min-width: 768px) { .u-hide-mobile { display: initial; } .u-hide-desktop { display: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; }
}