/* =============================================================
   Dutchman Tree Service, Colors & Type
   Source of truth for foundational tokens.
   Brand palette derived from logos and dutchmantreeservice.com.
   ============================================================= */

/* ---------- Fonts ----------
   Barlow Condensed, Open Sans, and Roboto Condensed are self-hosted and
   registered via theme.json fontFace (files in assets/fonts/). No external
   Google Fonts request is made. */

:root {
  /* ===== BRAND COLORS =====
     Forest green is the dominant brand color (logo + headlines on site).
     Rust/orange comes from the lumberjack's beard + crossed-axes accents.
     Cream/bone is the hard-hat highlight, used as a warm off-white. */

  --dts-forest-900: #102A1C;   /* deepest evergreen, backgrounds, footers */
  --dts-forest-800: #1A3A26;
  --dts-forest-700: #234C30;   /* logo banner background */
  --dts-forest-600: #2F6A3E;   /* primary green, buttons, links, headlines */
  --dts-forest-500: #3E8A4F;   /* hover/lighter accents */
  --dts-forest-400: #6BAE76;
  --dts-forest-300: #A8CFAE;
  --dts-forest-200: #D6E7D8;
  --dts-forest-100: #EEF5EE;   /* tints, section bg */

  --dts-rust-700:   #8C3A11;
  --dts-rust-600:   #B84A18;   /* primary rust, secondary CTAs, highlights */
  --dts-rust-500:   #D55A1F;   /* logo beard, brightest rust */
  --dts-rust-400:   #E6814E;
  --dts-rust-300:   #F2B091;
  --dts-rust-100:   #FBE7DA;

  --dts-bone-50:    #FAF7F0;   /* warm white, hard-hat tone */
  --dts-bone-100:   #F2ECDD;
  --dts-bone-200:   #E5DBC4;

  --dts-bark-900:   #14110D;   /* near-black with warmth */
  --dts-bark-800:   #2A2520;
  --dts-bark-700:   #423A32;
  --dts-bark-500:   #6B5F53;
  --dts-bark-300:   #A89A8A;
  --dts-bark-200:   #C9BFB1;
  --dts-bark-100:   #E8E2D6;

  --dts-sky-500:    #5A8FB5;   /* lake/sky accent, used sparingly */

  /* Steel / saw-blade grey, third logo color (the chainsaw blade arc) */
  --dts-steel-100:  #E5E2DC;
  --dts-steel-300:  #BFBAB1;
  --dts-steel-500:  #8E8A82;
  --dts-steel-700:  #5C5853;
  --dts-steel-900:  #2A2926;

  /* ===== SEMANTIC TOKENS ===== */

  /* Surfaces */
  --bg-page:        var(--dts-bone-50);
  --bg-surface:     #FFFFFF;
  --bg-subtle:      var(--dts-bone-100);
  --bg-inverse:     var(--dts-forest-900);
  --bg-inverse-2:   var(--dts-forest-800);

  /* Foreground */
  --fg-1:           var(--dts-bark-900);  /* primary text */
  --fg-2:           var(--dts-bark-700);  /* body text */
  --fg-3:           var(--dts-bark-500);  /* muted text, captions */
  --fg-on-dark:     var(--dts-bone-50);
  --fg-on-dark-2:   var(--dts-bark-200);

  /* Brand */
  --brand-primary:        var(--dts-forest-600);
  --brand-primary-hover:  var(--dts-forest-700);
  --brand-primary-press:  var(--dts-forest-800);
  --brand-secondary:      var(--dts-rust-600);
  --brand-secondary-hover:var(--dts-rust-700);

  /* Borders / dividers */
  --border-subtle:  var(--dts-bark-100);
  --border-default: var(--dts-bark-200);
  --border-strong:  var(--dts-bark-700);

  /* Status */
  --status-success: var(--dts-forest-600);
  --status-warning: #C98A1F;
  --status-danger:  #B43224;
  --status-info:    var(--dts-sky-500);

  /* ===== TYPE FAMILIES =====
     Display:    Barlow Condensed (800/900), heavy condensed grotesque
                 used in the live site for all-caps headlines.
     UI/Body:    Open Sans (400/600/700/800), humanist sans used in the
                 live site for mixed-case headings and body copy.
     Accent:     Roboto Condensed, for tabular labels and meta. */
  --font-display:   "Barlow Condensed", "Impact", "Arial Narrow Bold", sans-serif;
  --font-body:      "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-accent:    "Roboto Condensed", "Barlow Condensed", sans-serif;
  --font-mono:      ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ===== TYPE SCALE ===== */
  --fs-display:     clamp(48px, 7vw, 88px);
  --fs-h1:          clamp(40px, 5vw, 64px);
  --fs-h2:          clamp(28px, 3.4vw, 44px);
  --fs-h3:          clamp(22px, 2.2vw, 30px);
  --fs-h4:          18px;
  --fs-eyebrow:     14px;
  --fs-body-lg:     20px;
  --fs-body:        17px;
  --fs-body-sm:     15px;
  --fs-meta:        13px;
  --fs-micro:       11px;

  --lh-display:     0.95;
  --lh-heading:     1.08;
  --lh-body:        1.55;
  --lh-tight:       1.25;

  --ls-display:     0.01em;
  --ls-eyebrow:     0.18em;
  --ls-button:      0.08em;

  /* ===== SPACING (8pt grid + a few halves) ===== */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ===== RADII =====
     The brand is square and industrial. Almost everything is sharp or
     softly rounded; pills exist only for status/category chips. */
  --radius-0:   0px;
  --radius-sm:  2px;
  --radius-md:  4px;
  --radius-lg:  8px;
  --radius-pill:999px;

  /* ===== ELEVATION ===== */
  --shadow-sm:  0 1px 2px rgba(20, 17, 13, 0.08);
  --shadow-md:  0 4px 12px rgba(20, 17, 13, 0.10);
  --shadow-lg:  0 12px 32px rgba(20, 17, 13, 0.16);
  --shadow-cta: 0 6px 18px rgba(47, 106, 62, 0.35); /* green-tinted */
  --shadow-inset: inset 0 -3px 0 rgba(0, 0, 0, 0.18);

  /* ===== MOTION ===== */
  --ease-out:   cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out:cubic-bezier(0.6, 0, 0.4, 1);
  --dur-fast:   120ms;
  --dur-base:   220ms;
  --dur-slow:   420ms;
}

/* ---------- Element defaults ---------- */
html, body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, .display, .eyebrow {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--ls-display);
  line-height: var(--lh-heading);
  color: var(--fg-1);
  margin: 0;
}

h1, .h1 { font-size: var(--fs-h1); line-height: var(--lh-display); }
h2, .h2 { font-size: var(--fs-h2); }
h3, .h3 { font-size: var(--fs-h3); }
h4, .h4 { font-size: var(--fs-h4); letter-spacing: 0.04em; }

.display {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: 0.005em;
}

.eyebrow {
  font-family: var(--font-accent);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  font-weight: 700;
  color: var(--brand-primary);
}

p { margin: 0 0 1em; max-width: 65ch; }

a {
  color: var(--brand-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1.5px;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--brand-primary-hover); }

small, .meta {
  font-family: var(--font-accent);
  font-size: var(--fs-meta);
  color: var(--fg-3);
}

::selection { background: var(--dts-forest-300); color: var(--dts-forest-900); }