/* ============================================================================
   brand-theme.css — the FrontSite MARKETING SITE's own look.

   Direction: the Apex Detail Studio demo ("Garage" style) — ink black, hard
   white, sharp corners, surgical spacing, one warm amber accent doing all the
   colour work. Jonathan picked it as the reference; it also happens to be the
   most on-brand style the engine produces: precise, dark, veteran-toned.

   Why this file exists instead of editing tokens.css: tokens.css is copied
   here from site-template/ by `npm run site:sync` because it is ALSO the base
   for every generated CLIENT site. Re-skinning the shared file would silently
   re-skin every client build and be overwritten on the next sync. This
   override loads after it, only on FrontSite's own pages.
   ========================================================================== */

:root{
  /* ink field, hard white type */
  --bg:#000000;
  --bg-elev:#0b0b0c;
  --bg-elev-2:#111113;
  --fg:#ffffff;
  --fg-muted:#8f959c;

  --border-soft:rgba(255,255,255,.12);
  --border-accent:rgba(255,255,255,.30);
  --surface-subtle:rgba(255,255,255,.04);
  --header-bg:rgba(0,0,0,.78);

  /* one warm accent against the ink — brighter than the shared brass so it
     carries on pure black */
  --accent:#d9954a;
  --accent-bright:#eeb066;
  --accent-ink:#0d0a06;

  /* the navy brand ramp collapses to blacks so band gradients and ambient
     washes sit on the field instead of floating navy islands on it */
  --brand-900:#060607;
  --brand-800:#0c0c0e;
  --brand-700:#141417;

  --shadow-md:0 8px 30px rgba(0,0,0,.65);
  --shadow-lg:0 24px 70px rgba(0,0,0,.8);

  /* Apex is SHARP. Zeroing the radius tokens squares every card, button,
     input and thumbnail on every page at once. */
  --radius:0px;
  --radius-sm:0px;
  --radius-lg:0px;

  /* Excon at 800 — the "Bold" pairing the Garage demo runs */
  --display-weight:800;
  --display-tracking:-.02em;
}

/* Headline voice: condensed, heavy, tight — the Garage look. Scoped to the
   marketing pages only; client sites keep their own pairings. */
/* body-prefixed so this outranks the per-component weights in bundle-clean
   and landing.css, which load after this file */
body h1,body h2,body h3,body .lhero-h,body .ltier-price,
body .section-title{
  font-weight:var(--display-weight);
  letter-spacing:var(--display-tracking);
}

/* Hairline discipline: Apex separates with thin white lines, not soft glows. */
.lsection.section-alt{border-block:1px solid rgba(255,255,255,.06)}

/* The light theme keeps the shared values — restate nothing here. */
html[data-theme="light"]{}

:root{
  --font-display:'Excon', Impact, sans-serif;
  --font-body:'Satoshi', -apple-system, system-ui, sans-serif;
}

/* ---- keyboard focus -------------------------------------------------------
   The template bundles carry their own :focus-visible styles; the marketing
   pages leaned on the browser default, which is inconsistent across engines
   on a pure-black ground. One amber ring, offset so it never kisses the
   glyphs, on everything a keyboard can land on. :focus-visible only — a
   mouse click stays clean. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}