/* ============================================================
Heartwood — Zevyon shared design system
------------------------------------------------------------
Single source of truth for tokens + base components.
Link with:
Pages must still load the Google Fonts in their
(Bricolage Grotesque / Instrument Sans / Spline Sans Mono).
Palette: charred oak #1B1712 · linen #F5EEDF · amber #E0A14D ·
copper #A8501F. Mirrors the inline Heartwood styles used on
index.html and the contractor funnel — keep in sync if those
tokens ever change.
============================================================ */
:root{
--char:#1B1712; /* charred oak — warm near-black */
--char-2:#2A241C;
--linen:#F5EEDF; /* light section ground */
--linen-2:#EFE5D0;
--card:#FBF6EA; /* warm card white */
--amber:#E0A14D; /* finish-coat amber — primary accent */
--amber-deep:#C4842E;
--copper:#A8501F; /* hot accent: LIVE, totals, deltas */
--ash:#6E6353; /* muted text on light */
--smoke:#B9AD97; /* muted text on dark */
--ok:#3E7A46; /* success green */
--bad:#A8341B; /* error / destructive */
--seam:rgba(27,23,18,.14);
--seam-strong:rgba(27,23,18,.26);
--shadow-soft:0 12px 30px rgba(27,23,18,.09);
}
/* ---------- Base ---------- */
*{ box-sizing:border-box; }
body{
margin:0;
font-family:"Instrument Sans", system-ui, sans-serif;
background:var(--linen);
color:var(--char);
line-height:1.55;
-webkit-font-smoothing:antialiased;
}
a{ text-decoration:none; color:inherit; }
::selection{ background:var(--amber); color:var(--char); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible{
outline:3px solid var(--amber);
outline-offset:2px;
border-radius:6px;
}
/* ---------- Header ---------- */
.simple-header{
background:var(--char);
color:#fff;
position:sticky;
top:0;
z-index:20;
border-bottom:1px solid rgba(224,161,77,.18);
}
.simple-header-inner{
max-width:1180px;
margin:0 auto;
padding:14px 24px;
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
}
.logo-link{ text-decoration:none; }
.logo-wrap{
display:flex;
align-items:center;
gap:12px;
}
.logo-img{
width:72px; height:72px; object-fit:contain;
background:#fff; border-radius:10px; padding:0;
flex:0 0 72px;
}
.logo{
font-family:"Bricolage Grotesque", sans-serif;
font-weight:800;
font-size:27px;
letter-spacing:-.02em;
color:#fff;
white-space:nowrap;
line-height:1;
}
.logo span{ color:var(--amber); }
.tagline{
font-size:12px;
line-height:1.3;
color:var(--smoke);
max-width:160px;
}
.back-home-btn{
color:#E8DFCE;
text-decoration:none;
font-size:.88rem;
font-weight:600;
border:1px solid rgba(255,255,255,.22);
padding:9px 14px;
border-radius:9px;
transition:all .15s ease;
white-space:nowrap;
}
.back-home-btn:hover{
border-color:var(--amber);
color:#fff;
}
/* ---------- Typography helpers ---------- */
.eyebrow{
font-family:"Spline Sans Mono", monospace;
font-size:.68rem;
letter-spacing:.22em;
text-transform:uppercase;
font-weight:700;
color:var(--copper);
display:inline-flex;
align-items:center;
gap:10px;
margin-bottom:14px;
}
.eyebrow::before{
content:"";
width:26px; height:3px;
background:var(--amber);
display:inline-block;
}
.display{
font-family:"Bricolage Grotesque", sans-serif;
font-weight:700;
letter-spacing:-.02em;
line-height:1.08;
}
.subtitle{
color:var(--ash);
font-size:.98rem;
line-height:1.5;
}
.back-link{
color:var(--copper);
font-weight:700;
}
.back-link:hover{ text-decoration:underline; }
/* ---------- Buttons ----------
Base look shared by