/*
 * CampgroundViews v3 — Design System
 * Outdoorsy, light & airy — nature-inspired palette
 * Brand green from logo: #3a7d44
 *
 * This file: CSS reset, variables, base typography, utility classes
 */

/* ── Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&display=swap');

/* ── Reset ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
table { border-collapse: collapse; width: 100%; }

/* ── Design Tokens ── */
:root {
  /* Brand Greens (from logo) */
  --brand-green:        #3a7d44;
  --brand-green-light:  #5a9e62;
  --brand-green-dark:   #2d6435;
  --brand-green-pale:   #e8f5e9;
  --brand-green-mist:   #c8e6c9;

  /* Backgrounds */
  --bg:                 #faf8f3;
  --surface:            #f4f1e8;
  --card:               #ffffff;
  --card-warm:          #fdfaf4;

  /* Borders */
  --border:             #ddd8c4;
  --border-light:       #ece8d8;

  /* Accent: warm amber/gold (campfire) */
  --gold:               #d4813a;
  --gold-light:         #e8a05a;
  --gold-dark:          #b86820;
  --gold-pale:          #fdf0e0;

  /* Accent: sky blue (open sky) */
  --sky:                #4a90b8;
  --sky-light:          #6aaed4;
  --sky-pale:           #e3f2fd;

  /* Text */
  --text:               #2c3e2d;
  --text-muted:         #5a7a5c;
  --text-dim:           #6d8a6f;   /* darkened from #8aab8c for WCAG AA */
  --text-light:         #8a9f8b;

  /* Semantic */
  --red:                #c0392b;
  --red-pale:           #fdecea;
  --green-check:        #27ae60;
  --yellow:             #e6a817;
  --yellow-pale:        #fef9e7;
  --green-dim:          #d4edda;
  --blue-dim:           #d6eaf8;

  /* Tags */
  --tag-bg:             #e8f5e9;
  --tag-text:           #2d6435;

  /* Nav */
  --nav-height:         70px;
  --nav-bg:             #ffffff;
  --nav-border:         #e0ddd0;

  /* Admin layout */
  --sidebar-width:      220px;
  --topbar-height:      52px;

  /* Shadows */
  --shadow-sm:          0 1px 4px rgba(44,62,45,0.08);
  --shadow-md:          0 4px 16px rgba(44,62,45,0.10);
  --shadow-lg:          0 8px 32px rgba(44,62,45,0.12);

  /* Radius */
  --radius-sm:          6px;
  --radius-md:          10px;
  --radius-lg:          16px;
  --radius-xl:          20px;

  /* Spacing scale */
  --sp-xs:              4px;
  --sp-sm:              8px;
  --sp-md:              16px;
  --sp-lg:              24px;
  --sp-xl:              32px;
  --sp-2xl:             48px;
  --sp-3xl:             64px;
}

/* ── Base Typography ── */
body {
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text);
}

h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
h2 { font-size: clamp(1.4rem, 3vw, 1.85rem); }
h3 { font-size: clamp(1.1rem, 2.5vw, 1.4rem); }
h4, h5, h6 {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  line-height: 1.35;
}

p { margin-bottom: 1em; }
p:last-child { margin-bottom: 0; }

/* ── Utility Classes ── */
.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;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--sp-md);
  background: var(--brand-green);
  color: #fff;
  padding: var(--sp-sm) var(--sp-md);
  border-radius: var(--radius-sm);
  z-index: 10000;
  font-weight: 600;
  transition: top 0.2s;
}
.skip-link:focus {
  top: var(--sp-sm);
}

/* ── Focus styles ── */
:focus-visible {
  outline: 2px solid var(--brand-green);
  outline-offset: 2px;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  border-color: var(--brand-green);
  box-shadow: 0 0 0 3px rgba(58,125,68,0.18);
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--surface); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-light); }
html { scrollbar-width: thin; scrollbar-color: var(--border) var(--surface); }

/* ── Selection ── */
::selection {
  background: var(--brand-green-pale);
  color: var(--text);
}

/* Fix focus outline on headings after SPA navigation */
h1:focus, h2:focus, h3:focus, h4:focus { outline: none; }