/* Dibs on Dirt shared theme — design tokens + base typography.
   Single source of truth for all web pages (linked before each page's
   inline <style>, so page-specific rules still win on the cascade).
   Not used by email templates (clients strip external CSS). */

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

:root {
  --glass:            rgba(8, 12, 20, 0.74);
  --glass-2:          rgba(5, 8, 14, 0.86);
  --glass-border:     rgba(255, 255, 255, 0.10);
  --glass-hi:         rgba(255, 255, 255, 0.05);
  --accent:           #d4884a;        /* warm amber — horizon glow in the photo */
  --accent-dim:       rgba(180, 100, 50, 0.22);
  --accent-text:      #f5c08a;
  --green-hi:         #72d63e;
  --green-dim:        rgba(38, 85, 16, 0.60);
  --text:             #f0ece4;        /* warm off-white */
  --text-muted:       rgba(240, 236, 228, 0.68);  /* lifted from 0.52 for legibility */
  --text-muted-strong: rgba(240, 236, 228, 0.82); /* body copy on content pages */
  --text-dim:         rgba(240, 236, 228, 0.32);  /* lifted from 0.25 */
  --mono:             ui-monospace, 'SF Mono', 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace;
  --r:                5px;
  --red:              rgba(130, 22, 22, 0.72);
  --red-hi:           #e87070;
  --yellow:           rgba(120, 80, 0, 0.72);
  --yellow-hi:        #e8b448;
  --font-head:        'Barlow Condensed', system-ui, sans-serif;
  --font-body:        'Barlow', system-ui, sans-serif;

  /* spacing scale (4/8) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-6:24px; --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px;

  /* type scale */
  --fs-display:clamp(44px,9vw,76px); --fs-h1:clamp(28px,5.5vw,52px); --fs-h2:clamp(26px,5vw,38px);
  --fs-h3:20px; --fs-body:16px; --fs-caption:13px; --fs-micro:11px;

  /* motion */
  --dur-fast:0.15s; --dur-mid:0.2s; --ease:cubic-bezier(0.2,0,0,1);

  /* radius — keep --r:5px for chips/header; soft variants for forms/cards */
  --r-form:8px; --r-card:10px;

  /* documented amber hover (was hardcoded #c07840) */
  --accent-hover:#c07840;

  /* brand-art greens used by the tent logo SVG (documented, not for restyling) */
  --brand-leaf:#2d5016; --brand-leaf-hi:#5da832;

  /* app-dashboard status/slot palette + surfaces (tokenized from index.html — same values) */
  --slot-green:#c8ffaa; --slot-green-dim:rgba(160,230,120,0.72);
  --pending:#e8a030; --pending-hi:#ffd788; --pending-bg:rgba(255,190,80,0.10);
  --src-rec-bg:rgba(74,144,226,0.18); --src-rec-hi:#7bb8f5;
  --src-permit-bg:rgba(212,136,74,0.18); --src-permit-hi:#d4a96a;
  --surface-modal:#0d1119; --overlay:rgba(0,0,0,0.65); --accent-border:rgba(212,136,74,0.45);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { font-family: var(--font-head); }

a { color: var(--accent-text); }

.tabular { font-variant-numeric: tabular-nums; }

/* Hero subtitle: each sentence on its own line; balance is a safety net so any
   line that must wrap (very small phones) breaks tidily, never ragged. Per-page
   <style> blocks set the fluid font-size. */
.hero-sub > span,
.hero-sub .hero-sub-line { display: block; }
.hero-sub { text-wrap: balance; }

/* Brand headings: balance line lengths so marketing copy never strands a single
   orphaned word on the last line. Centralized here so every page — parks, guides,
   permits — matches the house standard; per-page <style> blocks set the fluid
   font-size. Stubborn breaks (proper nouns, sentence-ending fragments) are pinned
   with &nbsp; in the markup. */
.hero-h1, .section-h2, .bottom-h2 { text-wrap: balance; }

/* ─── Ghost button / Google OAuth divider ────────────────────────────────────
   Single source of truth — was duplicated in index.html <style> and
   static/park-signup.js. Downstream files should remove their local copies. */
.hero-or {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 430px;
  margin: 0 auto 12px;
  color: var(--text-dim);
  font-size: 12px;
  letter-spacing: 0.5px;
}
.hero-or::before,
.hero-or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.12);
}
.hero-google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: 430px;
  width: 100%;
  margin: 0 auto 14px;
  padding: 13px 22px;
  background: rgba(255,255,255,0.06);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--r-form);
  cursor: pointer;
  transition: background var(--dur-fast), border-color var(--dur-fast), opacity var(--dur-fast);
}
.hero-google-btn:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.28); }
.hero-google-btn:disabled { opacity: 0.55; cursor: default; }
.hero-google-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ─── Accessibility utility ──────────────────────────────────────────────────*/
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ─── Submit spinner ──────────────────────────────────────────────────────────
   In-button loading indicator. Centralized so every signup form (homepage,
   park pages via park-signup.js, /caught) can show it. index.html keeps an
   identical inline copy that simply wins on the cascade — same rule. */
.spin {
  display: inline-block;
  width: 13px; height: 13px;
  border: 2px solid rgba(255,255,255,0.20);
  border-top-color: #fff;
  border-radius: 50%;
  animation: rot 0.7s linear infinite;
  vertical-align: -1px;
}
@keyframes rot { to { transform: rotate(360deg); } }