/* =========================================================================
   Rosenhek Electric — Colors & Type
   Westbrook, ME · est. 2015
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@400;500;600;700;800&family=IBM+Plex+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap');

:root {
  /* ---------- Brand color tokens ---------- */
  /* Sampled from the logo: pure pikachu/electric yellow + true black. */
  --bolt-yellow:        #FEDB00;   /* primary signal color, large flat fills */
  --bolt-yellow-deep:   #F0C400;   /* hover / pressed yellow */
  --bolt-yellow-soft:   #FFEB66;   /* tint, badges, hover bg */
  --bolt-yellow-paper:  #FFF8D2;   /* faintest yellow, page tints */

  --ink:                #0A0A0A;   /* near-black for type & lockups */
  --ink-soft:           #1A1A1A;   /* secondary type */
  --ink-mid:            #3D3D3D;   /* mid body */
  --ink-low:            #6B6B6B;   /* captions, helper */
  --ink-faint:          #A3A3A3;   /* disabled, dividers */

  --paper:              #FFFFFF;   /* default surface */
  --paper-warm:         #FAF7F0;   /* warm cream — billboard/page bg */
  --paper-mute:         #F1EFE9;   /* warm gray surface */
  --hairline:           #E4E1D8;   /* warm border */
  --hairline-strong:    #C9C5B7;

  /* Supporting Maine-trade palette */
  --pine:               #1E3A2B;   /* deep forest — used sparingly for trust */
  --brick:              #B23A2A;   /* emergency / 24/7 callouts */
  --copper:             #B87333;   /* warm metal accent (copper wire) */
  --conduit:            #4A5057;   /* tool-gray, secondary chrome */

  /* Semantic */
  --success:            #2E7D52;
  --warning:            #E8A317;
  --danger:             #B23A2A;
  --info:               #1F5FA8;

  /* ---------- Semantic surface roles ---------- */
  --fg-1:               var(--ink);
  --fg-2:               var(--ink-mid);
  --fg-3:               var(--ink-low);
  --fg-on-yellow:       var(--ink);     /* black on yellow */
  --fg-on-ink:          #FFFFFF;        /* white on black */

  --bg-1:               var(--paper);
  --bg-2:               var(--paper-warm);
  --bg-3:               var(--paper-mute);
  --bg-ink:             var(--ink);
  --bg-signal:          var(--bolt-yellow);

  --border:             var(--hairline);
  --border-strong:      var(--ink);

  /* ---------- Typography stacks ---------- */
  /* Display: friendlier modern grotesque. Replaces the chunky Alfa Slab so
     hero headlines still feel strong but read cleanly. */
  --font-display:       'Bricolage Grotesque', 'IBM Plex Sans', system-ui, sans-serif;

  /* Logotype: same family for now — Honk was too aggressive. */
  --font-logotype:      'Bricolage Grotesque', 'IBM Plex Sans', sans-serif;

  /* Heading: humanist sans — H1–H4, eyebrows, button labels. Replaces the
     condensed Oswald with something with more breathing room. */
  --font-heading:       'IBM Plex Sans', system-ui, sans-serif;

  /* Body: clean modern sans, optimized for paragraphs + UI. */
  --font-body:          'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Mono: tickets, job numbers, license #s. */
  --font-mono:          'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---------- Type scale (1.250 major-third, anchored at 16px) ---------- */
  --fs-12: 0.75rem;     /* 12px — caption, license # */
  --fs-14: 0.875rem;    /* 14px — small body, helper */
  --fs-16: 1rem;        /* 16px — body */
  --fs-18: 1.125rem;    /* 18px — lead paragraph */
  --fs-20: 1.25rem;     /* 20px — H5 */
  --fs-24: 1.5rem;      /* 24px — H4 */
  --fs-32: 2rem;        /* 32px — H3 */
  --fs-44: 2.75rem;     /* 44px — H2 */
  --fs-64: 4rem;        /* 64px — H1 */
  --fs-96: 6rem;        /* 96px — poster display */

  /* Line-height */
  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.5;
  --lh-loose:   1.7;

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

  /* ---------- Spacing scale (4px base) ---------- */
  --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 ---------- */
  /* Mostly squared. Electricians don't do pillows. */
  --radius-0:  0px;
  --radius-1:  2px;
  --radius-2:  4px;
  --radius-3:  8px;
  --radius-pill: 999px;   /* only on small badges */

  /* ---------- Borders ---------- */
  --border-w-hair:   1px;
  --border-w-bold:   2px;
  --border-w-heavy:  3px;   /* signature look — thick black hairlines */

  /* ---------- Shadows ---------- */
  /* Sharp, offset, slightly hard — feels like a roadside sign. */
  --shadow-sm:    0 1px 0 0 rgba(10,10,10,0.08);
  --shadow-md:    0 2px 0 0 var(--ink), 0 6px 16px -8px rgba(10,10,10,0.25);
  --shadow-lg:    0 4px 0 0 var(--ink), 0 12px 24px -12px rgba(10,10,10,0.35);
  --shadow-bolt:  6px 6px 0 0 var(--ink);   /* hard offset, signage feel */
  --shadow-inset: inset 0 0 0 2px var(--ink);

  /* ---------- Motion ---------- */
  --ease-snap:    cubic-bezier(0.3, 0.8, 0.2, 1);
  --ease-out:     cubic-bezier(0.2, 0.7, 0.3, 1);
  --dur-fast:     120ms;
  --dur-base:     200ms;
  --dur-slow:     360ms;
}

/* =========================================================================
   Element defaults — opinionated reset for type
   ========================================================================= */
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ----- Display & headings ----- */
/* All-caps dropped from H1-H4 + .re-display. Only .re-eyebrow and .re-btn
   stay uppercase (per design choice: eyebrows + primary CTA only). */
.re-display,
h1.re-display {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(3rem, 7vw, var(--fs-96));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  text-wrap: balance;
}

h1, .re-h1 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-64);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}

h2, .re-h2 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-44);
  line-height: var(--lh-snug);
  letter-spacing: -0.005em;
  margin: 0 0 var(--space-3);
  text-wrap: balance;
}

h3, .re-h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-32);
  line-height: var(--lh-snug);
  margin: 0 0 var(--space-3);
}

h4, .re-h4 {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  margin: 0 0 var(--space-2);
}

h5, .re-h5 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
  margin: 0 0 var(--space-2);
}

/* Eyebrow — small caps label above headings */
.re-eyebrow {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-2);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* Body */
p, .re-body {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  color: var(--fg-2);
  margin: 0 0 var(--space-3);
  text-wrap: pretty;
}

.re-lead {
  font-size: var(--fs-18);
  line-height: var(--lh-normal);
  color: var(--fg-1);
}

.re-caption {
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}

/* Mono — license #, job tickets */
code, .re-mono {
  font-family: var(--font-mono);
  font-size: 0.95em;
  letter-spacing: 0.01em;
}

/* Links */
a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  text-decoration-color: var(--bolt-yellow);
  transition: text-decoration-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
a:hover {
  background: var(--bolt-yellow);
  text-decoration-color: var(--ink);
}

/* Selection */
::selection { background: var(--bolt-yellow); color: var(--ink); }

/* Horizontal rule — heavy black, signage-like */
hr.re-rule {
  border: 0;
  height: var(--border-w-heavy);
  background: var(--ink);
  margin: var(--space-8) 0;
}