/* css/base.css — The Soil Dog design tokens + foundation */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,600&family=DM+Sans:wght@300;400;500;600&family=DM+Mono:wght@400&display=swap');

/* ── TOKENS ─────────────────────────────────────────── */
:root {
  /* Soil palette */
  --soil:      #140f08;
  --bark:      #1e1610;
  --humus:     #2c2015;
  --loam:      #3d2e1c;
  --clay:      #5a3d22;

  /* Warm accents */
  --amber:     #c8832a;
  --gold:      #e2a235;
  --straw:     #f0cc7a;
  --cream:     #f5ede0;
  --parchment: #faf5ec;

  /* Naturals */
  --stone:     #8a7d6e;
  --gravel:    #6a5f52;
  --moss:      #4a5c38;
  --sage:      #7a8f66;

  /* Utility */
  --white:     #fdfaf5;
  --error:     #b84030;
  --success:   #4a6b35;

  /* Type */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --font-mono:    'DM Mono', monospace;

  /* Spacing */
  --max-w:    1200px;
  --section-pad: clamp(2rem, 4.5vw, 3.75rem);

  /* Motion */
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in:  cubic-bezier(.7,0,.84,0);

  /* ── Semantic aliases for template system ───────────────────────
     Templates (config/templates.js) write to these properties.
     Defaults mirror soildog-v1 so the site is unchanged with no template.
     Any template that sets these overrides the entire colour scheme. */
  --bg:             var(--soil);
  --surface:        var(--bark);
  --card-bg:        var(--humus);
  --accent:         var(--amber);
  --accent-hover:   var(--gold);
  --text-primary:   var(--white);
  --text-secondary: var(--stone);
  --text-muted:     var(--gravel);
  --border-color:   rgba(200,131,42,.15);
  --btn-text:       var(--soil);
  --radius:         4px;
  --radius-lg:      8px;
}

/* ── RESET ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
img, video { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
a { color: inherit; }

/* ── BASE ───────────────────────────────────────────── */
body {
  font-family: var(--font-body);
  background: var(--soil);
  color: var(--cream);
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* Grain overlay - whole page */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 999; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  background-repeat: repeat;
  mix-blend-mode: overlay;
  opacity: .6;
}

/* ── TYPOGRAPHY ─────────────────────────────────────── */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  line-height: 1;
  color: var(--white);
  font-weight: 600;
}

.display-xl {
  font-size: clamp(52px, 9vw, 120px);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: .92;
}
.display-lg {
  font-size: clamp(40px, 6vw, 80px);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: .95;
}
.display-md {
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1;
}
h3 { font-size: clamp(20px, 2.5vw, 28px); font-weight: 600; }
h4 { font-size: 18px; font-weight: 600; }

.eyebrow {
  font-family: var(--font-body);
  font-size: 11px; font-weight: 700;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--amber);
  display: flex; align-items: center; gap: 12px;
}
.eyebrow::before {
  content: '';
  width: 32px; height: 1.5px;
  background: var(--amber); flex-shrink: 0;
}

.serif-body {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(16px, 2vw, 20px);
  color: var(--stone);
  line-height: 1.65;
  font-weight: 300;
}

/* ── LAYOUT ─────────────────────────────────────────── */
.container {
  width: 100%; max-width: var(--max-w);
  margin: 0 auto; padding: 0 1.5rem;
}
.section { padding: var(--section-pad) 1.5rem; }
.section-inner { max-width: var(--max-w); margin: 0 auto; }
.section-header { margin-bottom: 2rem; }

/* ── UTILITY ─────────────────────────────────────────── */
.text-amber  { color: var(--amber); }
.text-gold   { color: var(--gold); }
.text-stone  { color: var(--stone); }
.text-cream  { color: var(--cream); }
.text-white  { color: var(--white); }
.bg-bark     { background: var(--bark); }
.bg-humus    { background: var(--humus); }
.bg-amber    { background: var(--amber); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ── ANIMATIONS ──────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slideLeft {
  from { opacity: 0; transform: translateX(32px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .5; }
}

.animate-fade-up  { animation: fadeUp .7s var(--ease-out) both; }
.animate-fade-in  { animation: fadeIn .5s ease both; }
.delay-1 { animation-delay: .1s; }
.delay-2 { animation-delay: .2s; }
.delay-3 { animation-delay: .3s; }
.delay-4 { animation-delay: .4s; }
.delay-5 { animation-delay: .5s; }

/* ── SCROLLBAR ───────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bark); }
::-webkit-scrollbar-thumb { background: var(--clay); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--amber); }

/* ── SELECTION ───────────────────────────────────────── */
::selection { background: var(--amber); color: var(--soil); }

/* ── RESPONSIVE BASE ─────────────────────────────────── */
@media (max-width: 768px) {
  .section { padding: 1.75rem 1rem; }
  .section-header { margin-bottom: 1.25rem; }
}
@media (max-width: 480px) {
  .section { padding: 1.375rem .875rem; }
  .section-header { margin-bottom: 1rem; }
  /* tighter container edges */
  .container { padding: 0 .875rem; }
}