/* =========================================================================
   Deck Restore+ — Foundations
   Colors, type, spacing, radius, shadow
   ========================================================================= */

/* ---------- Fonts (Google Fonts — see README for substitution notes) ----- */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&family=Caveat:wght@500;700&display=swap');

:root {
  /* ====================================================================
     COLOR — Brand
     The wordmark uses a deep, mossy green. We pair the deep "forest"
     green with two supporting greens (mint accent + sage mid-tone) and
     two warm wood tones (saddle brown + sienna) lifted from the wood
     materials Deck Restore+ works with: cedar, redwood, oak.
     ==================================================================== */
  --forest-900: #002417;   /* deepest moss — text on cream */
  --forest-800: #003a20;
  --forest-700: #004225;   /* PRIMARY brand green (from logo) */
  --forest-600: #14583a;
  --forest-500: #2e8b57;   /* sage / sea green — supporting */
  --forest-400: #4fa977;
  --forest-300: #79c599;
  --forest-200: #a8dbbb;
  --forest-100: #d6ecdf;
  --forest-050: #eef6f1;

  --mint-500:   #50c878;   /* emerald accent — for "fresh / restored" highlights */
  --mint-300:   #8fdca7;
  --mint-100:   #d2f1dc;

  /* Wood tones — used sparingly as accents, never primary surfaces */
  --wood-900:   #4a2306;
  --wood-800:   #6b340c;
  --wood-700:   #8b4513;   /* saddle brown */
  --wood-600:   #a0522d;   /* sienna */
  --wood-500:   #b86a3e;
  --wood-300:   #d9a982;
  --wood-100:   #f3e3d2;

  /* Neutrals — warm, slightly creamy, never pure white/black */
  --ink-900:    #14110d;   /* near-black text */
  --ink-800:    #2a241c;
  --ink-700:    #463e32;
  --ink-600:    #6b6151;
  --ink-500:    #8a8170;
  --ink-400:    #b0a99b;
  --ink-300:    #d3cdc0;
  --ink-200:    #e6e1d6;
  --ink-100:    #f1ede4;
  --cream:      #faf7f0;   /* page background */
  --paper:      #ffffff;

  /* Semantic */
  --success:    var(--forest-500);
  --warning:    #c98a1a;
  --danger:     #b3331a;
  --info:       #2c6b9c;

  /* Foreground / background semantic tokens */
  --bg:         var(--cream);
  --bg-elev:    var(--paper);
  --bg-inverse: var(--forest-700);
  --bg-muted:   var(--ink-100);

  --fg:         var(--ink-900);
  --fg-muted:   var(--ink-600);
  --fg-subtle:  var(--ink-500);
  --fg-onbrand: #ffffff;
  --fg-link:    var(--forest-700);

  --border:        var(--ink-200);
  --border-strong: var(--ink-300);
  --border-brand:  var(--forest-700);

  /* ====================================================================
     TYPE
     Outfit — display & headings (geometric sans, matches logo wordmark)
     Inter  — body, UI
     Caveat — occasional handwritten accent (e.g. "Hand-finished since 2008")
     ==================================================================== */
  --font-display: 'Outfit', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-accent:  'Caveat', 'Brush Script MT', cursive;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale (1.25 ratio) */
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-30: 1.875rem;
  --fs-36: 2.25rem;
  --fs-48: 3rem;
  --fs-60: 3.75rem;
  --fs-72: 4.5rem;

  /* Line heights */
  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  /* Weights */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-eyebrow: 0.18em; /* uppercase eyebrows */

  /* ====================================================================
     SPACING — 4px base
     ==================================================================== */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ====================================================================
     RADII — generous, soft, never pill except for tags
     ==================================================================== */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-pill: 999px;

  /* ====================================================================
     SHADOW — soft, warm-tinted, rooted (more y-offset than blur)
     ==================================================================== */
  --shadow-xs:  0 1px 2px rgba(20, 17, 13, 0.06);
  --shadow-sm:  0 2px 6px rgba(20, 17, 13, 0.06), 0 1px 2px rgba(20, 17, 13, 0.04);
  --shadow-md:  0 8px 20px -6px rgba(20, 17, 13, 0.10), 0 2px 4px rgba(20, 17, 13, 0.05);
  --shadow-lg:  0 18px 40px -12px rgba(20, 17, 13, 0.18), 0 4px 8px rgba(20, 17, 13, 0.06);
  --shadow-xl:  0 32px 60px -20px rgba(20, 17, 13, 0.22);
  --shadow-inset-soft: inset 0 1px 0 rgba(255,255,255,0.6);
  --shadow-brand:  0 12px 30px -8px rgba(0, 66, 37, 0.30);

  /* Layout */
  --container: 1200px;
  --gutter: 24px;
  --transition-fast: 120ms cubic-bezier(.2,.6,.2,1);
  --transition-base: 200ms cubic-bezier(.2,.6,.2,1);
  --transition-slow: 360ms cubic-bezier(.2,.6,.2,1);
}

/* =========================================================================
   SEMANTIC TYPE CLASSES
   ========================================================================= */
.ds-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--forest-700);
}

.ds-h1, h1 {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4.5vw, var(--fs-72));
  line-height: var(--lh-tight);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--ink-900);
}

.ds-h2, h2 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, var(--fs-48));
  line-height: var(--lh-snug);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--ink-900);
}

.ds-h3, h3 {
  font-family: var(--font-display);
  font-size: var(--fs-30);
  line-height: var(--lh-snug);
  font-weight: var(--fw-semibold);
  color: var(--ink-900);
}

.ds-h4, h4 {
  font-family: var(--font-display);
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  font-weight: var(--fw-semibold);
  color: var(--ink-900);
}

.ds-lead {
  font-family: var(--font-body);
  font-size: var(--fs-20);
  line-height: var(--lh-relaxed);
  color: var(--ink-700);
  font-weight: var(--fw-regular);
}

.ds-body, p, body {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-relaxed);
  color: var(--ink-800);
}

.ds-small {
  font-family: var(--font-body);
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  color: var(--ink-600);
}

.ds-caption {
  font-family: var(--font-body);
  font-size: var(--fs-12);
  line-height: var(--lh-normal);
  color: var(--ink-500);
}

.ds-accent {
  font-family: var(--font-accent);
  font-size: var(--fs-30);
  color: var(--forest-700);
  font-weight: var(--fw-bold);
}

.ds-mono, code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--ink-100);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-xs);
  color: var(--ink-800);
}