/* ============================================================
   Harsenhorst Automotive — Design Tokens
   Colors · Typography · Spacing · Radii · Shadows · Motion
   ============================================================ */

/* ---- Fonts ---------------------------------------------------
   Montserrat is the brand font — used for everything
   (wordmark, headlines, body, micro-copy).
   Display feel comes from weight + tracking, not from a second family:
     - Wordmark / display caps: weight 300–500, ALL CAPS, ls 0.18em+
     - UI / body:               weight 400–600, sentence case, ls 0.005em
   Replace this @import with @font-face blocks pointing at fonts/
   once licensed files are dropped in.
--------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600;700&display=swap');

:root {
  /* ===== Brand colors ===== */
  --brand-green:        #0B3226;  /* deep forest — frame, footer, headlines */
  --brand-green-90:     #1A4537;  /* hover lift */
  --brand-green-110:    #061D16;  /* press darken */
  --brand-green-60:     #4E6F62;
  --brand-green-30:     #97AAA2;
  --brand-green-15:     #C8D3CD;  /* hairline borders */
  --brand-green-05:     #ECF0EE;  /* faint tint backgrounds */

  --brand-copper:       #7A5131;  /* wordmark + links */
  --brand-copper-90:    #8A6041;  /* hover */
  --brand-copper-110:   #5F3D22;  /* press */
  --brand-copper-30:    #C9B3A0;
  --brand-copper-15:    #E6D8CB;

  --brand-ivory:        #F6F2EA;  /* page background — NEVER pure white */
  --brand-ivory-deep:   #ECE6D9;  /* card-on-ivory variant */
  --brand-paper:        #FFFFFF;  /* true white, only on photography */

  /* ===== Neutrals (warm-greyed) ===== */
  --ink:                #1F1B16;  /* body text */
  --ink-2:              #4A4239;  /* secondary text */
  --ink-3:              #7A7165;  /* tertiary text, captions */
  --ink-4:              #ADA597;  /* placeholder, dividers on ivory */
  --ink-5:              #D4CEC1;  /* skeleton, faint rules */

  /* ===== Semantic ===== */
  --success:            #4F7A4A;
  --success-bg:         #E6EBE3;
  --warning:            #B5872E;
  --warning-bg:         #F4ECD8;
  --danger:             #9A3B2A;
  --danger-bg:          #F2DDD7;
  --info:               #3B5F7A;
  --info-bg:            #DDE4EB;

  /* ===== Surfaces ===== */
  --bg:                 var(--brand-ivory);
  --bg-elev-1:          #FFFFFF;
  --bg-elev-2:          #FFFFFF;
  --bg-inverse:         var(--brand-green);
  --fg:                 var(--ink);
  --fg-on-inverse:      var(--brand-ivory);
  --border-default:     var(--brand-green-15);
  --border-strong:      var(--brand-green);
  --link:               var(--brand-copper);
  --link-hover:         var(--brand-green);

  /* ===== Typography — families ===== */
  --font-display:       'Montserrat', 'Avenir Next', system-ui, sans-serif;
  --font-sans:          'Montserrat', 'Avenir Next', 'Avenir', system-ui, sans-serif;
  --font-serif:         'Montserrat', Georgia, serif;
  --font-mono:          ui-monospace, 'SF Mono', 'JetBrains Mono', monospace;

  /* ===== Typography — sizes (rem-based, 16px root) ===== */
  --fs-xs:    0.75rem;   /* 12 — meta, footnote */
  --fs-sm:    0.875rem;  /* 14 — captions, nav */
  --fs-md:    1rem;      /* 16 — body */
  --fs-lg:    1.125rem;  /* 18 — lead paragraph */
  --fs-xl:    1.375rem;  /* 22 */
  --fs-2xl:   1.75rem;   /* 28 — h3 */
  --fs-3xl:   2.25rem;   /* 36 — h2 */
  --fs-4xl:   3rem;      /* 48 — h1 desktop */
  --fs-5xl:   4rem;      /* 64 — hero */
  --fs-6xl:   5.5rem;    /* 88 — oversized display */

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.5;
  --lh-loose:   1.7;

  --ls-display: 0.18em;  /* wide tracking on display caps — brand signature */
  --ls-eyebrow: 0.22em;  /* even wider on small eyebrows / labels */
  --ls-body:    0.005em;
  --ls-tight:   -0.01em;

  /* ===== Spacing — 8pt scale ===== */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-8:   48px;
  --space-10:  64px;
  --space-12:  96px;
  --space-16:  128px;

  /* ===== Radii ===== */
  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;     /* maximum — never bigger */
  --radius-pill: 999px;   /* reserved for tiny badges only */

  /* ===== Shadows (warm-tinted, low spread) ===== */
  --shadow-xs: 0 1px 1px  rgba(11, 50, 38, 0.04);
  --shadow-sm: 0 1px 2px  rgba(11, 50, 38, 0.06);
  --shadow-md: 0 4px 16px rgba(11, 50, 38, 0.08);
  --shadow-lg: 0 24px 48px rgba(11, 50, 38, 0.12);
  --shadow-xl: 0 32px 80px rgba(11, 50, 38, 0.18);

  /* ===== Motion ===== */
  --dur-fast:   120ms;
  --dur-base:   220ms;
  --dur-slow:   480ms;
  --ease:       cubic-bezier(0.4, 0, 0.2, 1);

  /* ===== Layout ===== */
  --container:        1200px;
  --container-wide:   1440px;
  --gutter:           24px;
  --header-h:         80px;
  --header-h-mobile:  64px;
}

/* ============================================================
   Semantic typography — drop-in element styles
   Apply directly to html/body or import per-component.
   ============================================================ */

body, .ds-body {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.ds-h1, h1 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  color: var(--brand-green);
  margin: 0 0 var(--space-5);
}

.ds-h1--hero {
  font-size: var(--fs-5xl);
}

.ds-h2, h2 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  letter-spacing: -0.005em;
  color: var(--brand-green);
  margin: 0 0 var(--space-4);
}

.ds-h3, h3 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  color: var(--brand-green);
  margin: 0 0 var(--space-3);
}

.ds-h4, h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--ink);
  margin: 0 0 var(--space-2);
}

.ds-eyebrow {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--brand-copper);
}

.ds-lead {
  font-size: var(--fs-lg);
  line-height: var(--lh-loose);
  color: var(--ink-2);
}

.ds-p, p {
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  /* color inherits from body (--ink) on light surfaces, from parent on dark surfaces */
  margin: 0 0 var(--space-4);
  text-wrap: pretty;
}

.ds-caption {
  font-size: var(--fs-sm);
  color: var(--ink-3);
  line-height: var(--lh-normal);
}

.ds-pullquote {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-2xl);
  line-height: 1.4;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--brand-green);
}

.ds-pullquote--attribution {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--brand-copper);
}

.ds-wordmark {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--brand-copper);
}

.ds-link, a {
  color: var(--link);
  text-decoration: none;
  text-underline-offset: 4px;
  transition: color var(--dur-fast) var(--ease);
}
.ds-link:hover, a:hover {
  color: var(--link-hover);
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

code, .ds-code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--brand-green-05);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  color: var(--brand-green);
}