/* ===========================================================================
   brand.css - House of Canopies design tokens + base + shared primitives.

   This is the rebrand chokepoint: every colour, the reset, the type scale
   and the reusable bits (.wrap, .eyebrow, .btn, .chip, .price) live here so
   the whole site is restyled from one file. Tokens lifted straight from the
   approved mocks. "Bloomberg terminal meets editorial": hairlines not boxes,
   tabular numerals, micro-uppercase labels, green reserved for action.
   =========================================================================== */

:root{
  --paper:#fafafa;--paper-2:#f0f0f0;--card:#ffffff;
  --ink:#1a1a1a;--ink-2:#4b4b4b;--ink-3:#6e6e6e;--ink-4:#a8a8a8;
  --line:#e3e3e3;--night:#202020;
  --green:#5c8d3f;--green-deep:#4c7434;--green-soft:#edf3e8;--green-text:#4c7434;
  --green-on-dark:#7daf5e;
  --glaze:#4a6f8e;--load:#b8841f;--finish:#8a6f4e;--warranty:#2a8576;
  --scroll-thumb:#7d7d7d;--scroll-track:#fafafa;  /* reference only — see scrollbar block */
  color-scheme:light;
}
[data-theme="dark"]{
  color-scheme:dark;
  --paper:#1c1c1c;--paper-2:#262626;--card:#232323;
  --ink:#f4f4f4;--ink-2:#a8a8a8;--ink-3:#8a8a8a;--ink-4:#6e6e6e;
  --line:#2e2e2e;--night:#101010;
  --green-soft:#222a1d;--green-text:#7daf5e;
  --glaze:#8fb4d4;--load:#f0b85c;--finish:#c9a87e;--warranty:#6fc7b2;
  --scroll-thumb:#5e5e5e;--scroll-track:#1c1c1c;  /* reference only — see scrollbar block */
}

/* ---- reset + base -------------------------------------------------------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;background:var(--paper);color:var(--ink);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;transition:background-color .25s ease,color .25s ease}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--green);outline-offset:2px}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---- scrollbar ----------------------------------------------------------- */
/* The native Windows bar (arrow buttons, hard grey trough) is the one thing on
   the page still reading as 2010. Slimmed, arrows removed, and recoloured:
   graphite thumb on a track that matches the page, so the bar reads as a mark
   on the paper rather than a channel cut into the window chrome.
   Deliberately NOT hairline or auto-hiding: held at 11px and always visible so
   older customers can see where they are on the page and grab it with a mouse.

   !! LITERAL HEX ONLY IN THIS BLOCK — DO NOT var() IT. !!
   The ::-webkit-scrollbar-* pseudo-elements do not reliably inherit CSS custom
   properties, so var(--x) silently resolves to nothing and the browser falls
   back to the default Windows grey. Dimensions applied and colours didn't,
   which is exactly what that failure looks like. Values kept in step with the
   --scroll-* tokens above; change both together. */
html{
  scrollbar-width:thin;
  scrollbar-color:#7d7d7d #fafafa;              /* thumb, track */
}
html[data-theme="dark"]{scrollbar-color:#5e5e5e #1c1c1c}

/* Older Chrome/Safari. Ignored where scrollbar-width/-color apply. */
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:#fafafa}
::-webkit-scrollbar-thumb{background:#7d7d7d;border:3px solid #fafafa;border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:#5c8d3f}   /* --green, action only */
::-webkit-scrollbar-corner{background:#fafafa}
::-webkit-scrollbar-button{display:none;width:0;height:0}

html[data-theme="dark"]::-webkit-scrollbar-track,
[data-theme="dark"] ::-webkit-scrollbar-track{background:#1c1c1c}
html[data-theme="dark"]::-webkit-scrollbar-thumb,
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#5e5e5e;border-color:#1c1c1c}
html[data-theme="dark"]::-webkit-scrollbar-corner,
[data-theme="dark"] ::-webkit-scrollbar-corner{background:#1c1c1c}

/* ---- layout primitives --------------------------------------------------- */
.wrap{max-width:1280px;margin:0 auto;padding:0 32px}
@media(max-width:900px){.wrap{padding:0 18px}}

/* ---- editorial labels ---------------------------------------------------- */
.eyebrow{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.eyebrow.green{color:var(--green-text)}

/* ---- buttons ------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:15px 26px;border:1px solid transparent;transition:background .15s,border-color .15s,color .15s}
.btn.solid{background:var(--green);color:#fff}
.btn.solid:hover{background:var(--green-deep)}
.btn.ghost{border-color:var(--line);background:transparent;color:var(--ink)}
.btn.ghost:hover{border-color:var(--ink)}
.btn.ghost-dark{border-color:#4a4a4a;color:#f4f4f4;background:transparent}
.btn.ghost-dark:hover{border-color:#f4f4f4}

/* ---- spec chips ---------------------------------------------------------- */
.chip{display:inline-flex;align-items:center;font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:5px 9px;background:var(--paper-2);color:var(--ink-2);border-left:2px solid var(--ink-4)}
.chip.glaze{border-left-color:var(--glaze);color:var(--glaze)}
.chip.load{border-left-color:var(--load);color:var(--load)}
.chip.finish{border-left-color:var(--finish);color:var(--finish)}
.chip.warranty{border-left-color:var(--warranty);color:var(--warranty)}

/* ---- price (tabular feel) ------------------------------------------------ */
.price .ex{font-size:22px;font-weight:800;letter-spacing:-.01em}
.price .inc{font-size:12px;color:var(--ink-3);font-weight:500}