/* ═══════════════════════════════════════════════════
   DESIGN TOKENS — Wild & Nearly-Wild Camping Planner
   ═══════════════════════════════════════════════════ */

:root {
  /* ─── Colour Palette (Light) ─── */
  --deep:   #1b3d2f;
  --forest: #2d5f45;
  --moss:   #5a8a6e;
  --sage:   #a8c5b2;
  --sagef:  #e6f0ea;

  --cream:  #f5f0e4;
  --bark:   #6b4c2a;
  --barkl:  #f0e6d2;
  --ember:  #c45a3c;
  --emberl: #fce8e2;

  --river:  #2e6e8e;
  --riverl: #ddeef7;
  --char:   #2a2d2e;
  --stone:  #7a7d7e;
  --mist:   #d8d2c4;
  --white:  #fff;

  /* ─── Typography ─── */
  --fd: 'Vollkorn', Georgia, serif;
  --fb: 'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-title:   clamp(1.75rem, 1.5rem + 1.25vw, 2.25rem);
  --fs-section: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
  --fs-card:    clamp(1.05rem, 1rem + 0.25vw, 1.2rem);
  --fs-body:    clamp(0.9rem, 0.875rem + 0.125vw, 1rem);
  --fs-caption: 0.85rem;
  --fs-label:   0.75rem;
  --fs-badge:   0.6875rem;

  --lh-tight:  1.15;
  --lh-snug:   1.3;
  --lh-normal: 1.55;
  --lh-loose:  1.7;

  --ls-tight:  -0.02em;
  --ls-normal: 0;
  --ls-wide:   0.04em;
  --ls-caps:   0.08em;

  /* ─── Spacing (4px base) ─── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* ─── Layout ─── */
  --card-padding:     var(--sp-4);
  --list-item-height: 56px;
  --bottom-nav-height: 64px;
  --bottom-nav-safe:  calc(64px + env(safe-area-inset-bottom));
  --touch-min:        44px;
  --page-gutter:      var(--sp-4);
  --page-max:         480px;
  --section-gap:      var(--sp-6);
  --top-bar-height:   56px;

  /* ─── Elevation (Warm organic shadows) ─── */
  --shadow-1: 0 1px 3px rgba(107,76,42,0.08), 0 1px 2px rgba(107,76,42,0.06);
  --shadow-2: 0 4px 12px rgba(107,76,42,0.10), 0 2px 4px rgba(107,76,42,0.06);
  --shadow-3: 0 12px 32px rgba(107,76,42,0.14), 0 4px 8px rgba(107,76,42,0.08);

  /* ─── Polish ─── */
  --glow-forest: 0 0 0 1px rgba(45,95,69,0.04), 0 0 20px rgba(45,95,69,0.03);
  --card-border-subtle: rgba(107,76,42,0.06);
  --progress-gradient: linear-gradient(90deg, var(--forest), var(--moss), #6fbf8a);

  /* ─── Animation ─── */
  --dur-instant: 80ms;
  --dur-fast:    150ms;
  --dur-normal:  250ms;
  --dur-slow:    400ms;
  --dur-glacial: 600ms;

  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:     cubic-bezier(0.55, 0, 1, 0.45);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ─── Component Tokens ─── */
  --card-radius:  16px;
  --btn-radius:   10px;
  --badge-radius: 6px;
  --input-radius: 10px;
  --sheet-radius: 20px 20px 0 0;
  --toast-radius: 12px;
  --fab-radius:   28px;

  --btn-height:   44px;
  --fab-size:     56px;
  --progress-h:   6px;
  --progress-r:   3px;

  /* ─── Image ─── */
  --img-ratio:       3 / 2;
  --img-ratio-thumb: 1 / 1;
  --img-radius:      12px;
  --img-placeholder: var(--sagef);
  --img-overlay: linear-gradient(160deg,
    rgba(27,61,47,0.88) 0%,
    rgba(27,61,47,0.55) 40%,
    rgba(196,90,60,0.2) 100%);
}

/* ─── Dark Mode ─── */
[data-theme="dark"] {
  --deep:   #a8c5b2;
  --forest: #6fbf8a;
  --moss:   #5a8a6e;
  --sage:   #2d5f45;
  --sagef:  #1a2e24;

  --cream:  #1a1c1a;
  --bark:   #d4a574;
  --barkl:  #2a2218;
  --ember:  #e8735a;
  --emberl: #2e1a14;

  --river:  #5ab0d4;
  --riverl: #142830;
  --char:   #e8e4dc;
  --stone:  #9a9d9e;
  --mist:   #2e3130;
  --white:  #222524;

  --shadow-1: 0 1px 3px rgba(0,0,0,0.24), 0 1px 2px rgba(0,0,0,0.18);
  --shadow-2: 0 4px 12px rgba(0,0,0,0.32), 0 2px 4px rgba(0,0,0,0.20);
  --shadow-3: 0 12px 32px rgba(0,0,0,0.44), 0 4px 8px rgba(0,0,0,0.24);

  --glow-forest: 0 0 0 1px rgba(111,191,138,0.08), 0 0 24px rgba(111,191,138,0.04);
  --card-border-subtle: rgba(255,255,255,0.04);

  --img-overlay: linear-gradient(to top,
    rgba(26,28,26,0.8) 0%,
    rgba(26,28,26,0.2) 50%,
    transparent 100%);
}

/* ─── Reduced Motion ─── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0ms;
    --dur-fast:    0ms;
    --dur-normal:  0ms;
    --dur-slow:    0ms;
    --dur-glacial: 0ms;
  }
}