/* tokens/fonts.css */
/* BuggyGirl webfonts.
   NOTE: These are Google Fonts, loaded from the Google Fonts CDN — no custom
   brand binaries were supplied. If BuggyGirl has licensed brand fonts, drop the
   .woff2 files in assets/fonts/ and add real @font-face rules here.

   Families:
   - Bricolage Grotesque  -> display / headlines
   - Public Sans          -> body / UI (US civic typeface, accessible)
   - IBM Plex Mono        -> data, code, tabular figures */

@import url("https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,300..800;1,400..700&family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=IBM+Plex+Mono:wght@400;500;600&display=swap");


/* tokens/colors.css */
/* ============================================================
   BuggyGirl — Color tokens
   Land & waste management. Earthy, civic, trustworthy.
   ============================================================ */
:root {
  /* --- Prairie green (primary brand) --- */
  --green-50:  #EAF4EC;
  --green-100: #CFE6D5;
  --green-200: #A6D1B2;
  --green-300: #72B588;
  --green-400: #429666;
  --green-500: #1F6B45; /* primary */
  --green-600: #185737;
  --green-700: #12432B;
  --green-800: #0D3220;
  --green-900: #082116;
  --green-vivid: #1FC13B; /* bright kelly green from the logo mark — illustration/accents */

  /* --- Clay / terracotta (accent) --- */
  --clay-50:  #FBEEE7;
  --clay-100: #F4D3C2;
  --clay-200: #E8AA8C;
  --clay-300: #D98255;
  --clay-400: #C4622D; /* accent */
  --clay-500: #A24E22;
  --clay-600: #7E3C1A;

  /* --- Stone (warm neutrals) --- */
  --stone-50:  #FAF9F6;
  --stone-100: #F2F0EA;
  --stone-200: #E4E0D6;
  --stone-300: #CFC9BC;
  --stone-400: #A8A090;
  --stone-500: #7D7566;
  --stone-600: #5C5648;
  --stone-700: #433E33;
  --stone-800: #2B2822;
  --stone-900: #1A1814;
  --white: #FFFFFF;

  /* --- Semantic status --- */
  --success-500: #2F8F5B;
  --success-100: #DCEEE3;
  --warning-500: #D9822B;
  --warning-100: #F8E6D2;
  --danger-500:  #C23B3B;
  --danger-100:  #F5DBDB;
  --info-500:    #2A6FB0;
  --info-100:    #DBE8F4;

  /* --- Waste-stream color coding (domain) --- */
  --stream-recycling: #2A6FB0; /* blue */
  --stream-organics:  #6A8E2B; /* olive */
  --stream-landfill:  #4B5563; /* slate */
  --stream-hazardous: #D9822B; /* amber */
  --stream-yard:      #2E7D6B; /* teal */
  --stream-bulk:      #8A5A9E; /* plum */

  /* ---------- Semantic aliases ---------- */
  --brand:            var(--green-500);
  --brand-strong:     var(--green-600);
  --brand-soft:       var(--green-50);
  --accent:           var(--clay-400);

  --bg-page:          var(--stone-50);
  --bg-subtle:        var(--stone-100);
  --surface-card:     var(--white);
  --surface-sunken:   var(--stone-100);
  --surface-inverse:  var(--green-800);

  --text-strong:      var(--stone-900);
  --text-body:        var(--stone-700);
  --text-muted:       var(--stone-500);
  --text-on-brand:    var(--white);
  --text-on-accent:   var(--white);
  --text-link:        var(--green-600);

  --border-subtle:    var(--stone-200);
  --border-default:   var(--stone-300);
  --border-strong:    var(--stone-400);
  --focus-ring:       var(--green-400);
}


/* tokens/typography.css */
/* ============================================================
   BuggyGirl — Typography tokens
   Display: Bricolage Grotesque · UI/body: Public Sans · Data: IBM Plex Mono
   ============================================================ */
:root {
  --font-display: "Bricolage Grotesque", "Public Sans", system-ui, sans-serif;
  --font-sans:    "Public Sans", system-ui, -apple-system, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  /* weights */
  --fw-regular: 400; /* @kind font */
  --fw-medium:  500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold:    700; /* @kind font */
  --fw-extrabold: 800; /* @kind font */

  /* type scale (1.20 minor-third-ish, tuned) */
  --fs-2xs: 0.6875rem; /* 11px */
  --fs-xs:  0.75rem;   /* 12px */
  --fs-sm:  0.875rem;  /* 14px */
  --fs-md:  1rem;      /* 16px base */
  --fs-lg:  1.125rem;  /* 18px */
  --fs-xl:  1.375rem;  /* 22px */
  --fs-2xl: 1.75rem;   /* 28px */
  --fs-3xl: 2.25rem;   /* 36px */
  --fs-4xl: 3rem;      /* 48px */
  --fs-5xl: 4rem;      /* 64px */

  /* line heights */
  --lh-tight:   1.1; /* @kind other */
  --lh-snug:    1.25; /* @kind other */
  --lh-normal:  1.5; /* @kind other */
  --lh-relaxed: 1.65; /* @kind other */

  /* letter spacing */
  --ls-tight:  -0.02em; /* @kind other */
  --ls-snug:   -0.01em; /* @kind other */
  --ls-normal: 0; /* @kind other */
  --ls-wide:   0.04em; /* @kind other */
  --ls-caps:   0.08em; /* @kind other */

  /* semantic roles */
  --text-display-font: var(--font-display);
  --text-display-weight: var(--fw-bold);
  --text-heading-weight: var(--fw-semibold);
  --text-eyebrow-transform: uppercase;
}


/* tokens/spacing.css */
/* ============================================================
   BuggyGirl — Spacing & layout tokens (4px base grid)
   ============================================================ */
:root {
  --space-0:  0;
  --space-1:  0.25rem;  /* 4  */
  --space-2:  0.5rem;   /* 8  */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.25rem;  /* 20 */
  --space-6:  1.5rem;   /* 24 */
  --space-8:  2rem;     /* 32 */
  --space-10: 2.5rem;   /* 40 */
  --space-12: 3rem;     /* 48 */
  --space-16: 4rem;     /* 64 */
  --space-20: 5rem;     /* 80 */
  --space-24: 6rem;     /* 96 */

  /* layout */
  --container-sm:  40rem;   /* 640  */
  --container-md:  64rem;   /* 1024 */
  --container-lg:  80rem;   /* 1280 */
  --gutter:        var(--space-6);
  --section-y:     var(--space-20);
}


/* tokens/effects.css */
/* ============================================================
   BuggyGirl — Radii, borders, shadows, motion
   ============================================================ */
:root {
  /* radii — soft but grounded, never pill-everything */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* borders */
  --border-width: 1px;
  --border-width-strong: 2px;

  /* shadows — low, warm, soft. Tinted with stone rather than pure black. */
  --shadow-xs: 0 1px 2px rgba(43, 40, 34, 0.06);
  --shadow-sm: 0 1px 3px rgba(43, 40, 34, 0.08), 0 1px 2px rgba(43, 40, 34, 0.06);
  --shadow-md: 0 4px 12px rgba(43, 40, 34, 0.08), 0 2px 4px rgba(43, 40, 34, 0.05);
  --shadow-lg: 0 12px 28px rgba(43, 40, 34, 0.12), 0 4px 10px rgba(43, 40, 34, 0.06);
  --shadow-focus: 0 0 0 3px rgba(66, 150, 102, 0.4);

  /* motion */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-med: 200ms; /* @kind other */
  --dur-slow: 320ms; /* @kind other */
}



/* Rooted Chicago Tours — page styles */
html { scroll-behavior: smooth; }
body { margin:0; background:#FAF9F6; color:var(--text-body); font-family:var(--font-sans); }
* { box-sizing:border-box; }
a { color:#7A5F22; text-decoration:none; }
a:hover { color:#A8853F; }
img { max-width:100%; }
.chip { display:inline-flex; align-items:center; gap:8px; height:46px; padding:0 18px; border-radius:var(--radius-pill); font-family:var(--font-sans); font-size:15px; font-weight:600; cursor:pointer; transition:all var(--dur-fast) var(--ease-standard); background:#FFFFFF; color:var(--stone-700); border:1px solid #CFC9BC; }
.chip[aria-pressed="true"] { background:#0D3220; color:#FAF9F6; border-color:#0D3220; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; font-family:var(--font-sans); line-height:1; border-radius:var(--radius-md); cursor:pointer; white-space:nowrap; text-transform:uppercase; transition:filter var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard); }
.btn:hover { filter:brightness(0.94); }
.btn:active { transform:translateY(1px); }
.btn-sm { height:32px; padding:0 12px; font-size:12px; font-weight:700; letter-spacing:0.1em; }
.btn-lg { height:48px; padding:0 20px; font-size:13px; font-weight:800; letter-spacing:0.12em; }
.btn-gold { background:#A8853F; border:1px solid #A8853F; color:#1A1814; }
.btn-dark { background:#0D3220; border:1px solid #0D3220; color:#FAF9F6; }
.btn-ondark { background:transparent; border:1px solid rgba(250,249,246,0.45); color:#FAF9F6; }
.card { position:relative; background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); overflow:hidden; font-family:var(--font-sans); transition:box-shadow var(--dur-med) var(--ease-standard), transform var(--dur-med) var(--ease-standard); }
.badge { display:inline-flex; align-items:center; gap:5px; height:18px; padding:2px 8px; font-family:var(--font-sans); font-size:var(--fs-2xs); font-weight:var(--fw-semibold); line-height:1; letter-spacing:var(--ls-wide); text-transform:uppercase; border-radius:var(--radius-pill); color:var(--stone-600); background:var(--stone-100); white-space:nowrap; }
.field { display:flex; align-items:center; gap:8px; height:48px; padding:0 12px; background:var(--surface-card); border:1px solid var(--border-default); border-radius:var(--radius-md); transition:border-color var(--dur-fast), box-shadow var(--dur-fast); }
.field:focus-within { border-color:var(--green-400); box-shadow:var(--shadow-focus); }
.field input { flex:1 1 0%; min-width:0; height:100%; border:none; outline:none; background:transparent; font-family:inherit; font-size:var(--fs-md); color:var(--text-strong); }
.flabel { display:block; font-size:var(--fs-sm); font-weight:var(--fw-semibold); color:var(--text-strong); margin-bottom:6px; }

/* Signature bronze frame around the whole site */
body::after { content:""; position:fixed; inset:0; border:1px solid #A8853F; pointer-events:none; z-index:200; }

.tile { color:inherit; transition:transform var(--dur-med,200ms) ease, box-shadow var(--dur-med,200ms) ease, border-color var(--dur-med,200ms) ease; }
.tile:hover { color:inherit; transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:#CFC9BC; }
.tile:hover h3 { color:#7A5F22; }
/* Concierge location block */
.geo-select { height:48px; padding:0 12px; background:#FFFFFF; border:1px solid #CFC9BC; border-radius:var(--radius-md); font-family:var(--font-sans); font-size:15px; font-weight:600; color:var(--stone-700); cursor:pointer; max-width:100%; }
.geo-select:hover { border-color:#0D3220; }
.geo-select:focus-visible { outline:none; border-color:#0D3220; box-shadow:0 0 0 3px rgba(13,50,32,0.16); }
.btn-outline-dark { background:transparent; border:1px solid #0D3220; color:#0D3220; }
.geo-clear { display:inline-flex; align-items:center; margin:18px 0 0; padding:0; background:none; border:0; font-family:var(--font-sans); font-size:13px; font-weight:600; color:var(--text-muted); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.geo-clear:hover { color:#0D3220; }
@media (max-width:600px) {
  .geo-row { flex-direction:column; align-items:stretch; gap:10px; }
  .geo-row #geo-btn, .geo-row .geo-select { width:100%; }
  .geo-or { display:none; }
  #geo-actions > .btn { width:100%; }
}

/* Language selector */
.lang-dd { position:relative; margin-left:6px; }
.lang-dd > button { display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 10px; background:#FFFFFF; border:1px solid #E4E0D6; border-radius:var(--radius-md); font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:0.08em; color:var(--stone-700); cursor:pointer; transition:border-color var(--dur-fast), background var(--dur-fast); }
.lang-dd > button:hover { border-color:#CFC9BC; background:#F2F0EA; color:#0D3220; }
.lang-dd > button .chev { font-size:9px; opacity:0.7; }
.lang-menu { display:none; position:absolute; top:calc(100% + 6px); right:0; min-width:172px; z-index:60; padding:6px; background:#FFFFFF; border:1px solid var(--border-subtle); border-radius:var(--radius-lg); box-shadow:var(--shadow-md); }
.lang-dd.open .lang-menu { display:block; }
.lang-menu a { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 10px; border-radius:var(--radius-md); font-size:14px; font-weight:600; color:var(--stone-700); }
.lang-menu a:hover { background:#F2F0EA; color:#0D3220; }
.lang-menu a[aria-current="true"] { background:#0D3220; color:#FAF9F6; }
.lang-menu a .code { font-family:var(--font-mono); font-size:11px; letter-spacing:0.06em; opacity:0.75; }

/* ==== Mobile (<=768px): stacked hero + collapsed nav ==== */
.nav-toggle { display:none; }
@media (max-width: 768px) {
  header > div { padding:10px 16px !important; flex-wrap:wrap; row-gap:0; }
  .nav-toggle { display:inline-flex !important; align-items:center; justify-content:center; width:44px; height:44px; background:transparent; border:1px solid #E4E0D6; border-radius:var(--radius-md); color:#0D3220; cursor:pointer; padding:0; }
  .site-nav { display:none !important; }
  .site-nav.open { display:flex !important; flex-direction:column !important; align-items:stretch !important; justify-content:flex-start !important; width:100%; flex-basis:100%; gap:2px !important; padding:10px 0 4px; margin-top:10px; border-top:1px solid #E4E0D6; }
  .site-nav.open > a { font-size:16px !important; padding:11px 2px; }
  .site-nav.open > a.btn { margin-top:8px; justify-content:center; }

  #top { display:flex !important; flex-direction:column !important; align-items:stretch !important; min-height:0 !important; overflow:visible !important; background:#0D3220 !important; background-image:none !important; }
  .hero-copy { order:2; position:static !important; padding:30px 20px 32px !important; max-width:none !important; }
  .hero-copy > div { max-width:none !important; }
  .hero-haze { display:none !important; }
  .hero-h1 { font-size:clamp(34px,10vw,50px) !important; text-shadow:none !important; }
  .hero-cta { flex-direction:column !important; align-items:stretch !important; }
  .hero-cta > a { width:100%; }
  .lang-dd { order:4; margin:14px 0 0; align-self:stretch; }
  .lang-dd > button { width:100%; height:44px; justify-content:space-between; font-size:14px; }
  .lang-menu { left:0; right:0; min-width:0; }
  .lang-menu a { padding:12px 10px; font-size:15px; }
  .hero-img { order:1; position:static !important; display:block !important; width:100% !important; max-width:100% !important; height:auto !important; object-fit:contain !important; object-position:top !important; inset:auto !important; }
}