/* ============================================================
   Burgwedel Consulting — Design System (tokens + semantic layer)

   Single source of truth for brand tokens. Two consumers:
     1. the marketing site (.ed / .fmt3 / shared components), and
     2. any other surface (slides, prototypes) via the opt-in .bc scope.

   @font-face rules live in shared/fonts.css (self-hosted woff2 with
   a latin unicode-range); this file is tokens + semantics only.

   Palette note: the shipped brand renamed the original handover's
   teal/green accents to a calmer slate-blue. The historical token
   names (--teal/--green) are kept because the shared component layer
   (intake-form, focus-contact, nav, legal) references them; the
   editorial layer references the clearer --blue/--blue-soft aliases.
   Both resolve to the same values and both follow the dark remap.
   ============================================================ */

:root{
  /* ---------- Core palette (light / "paper") ---------- */
  --paper:#F6F2EA;        /* dominant background — warm bone paper */
  --paper-2:#EFEADF;      /* secondary surface / alternating band fill */
  --ink:#111315;          /* dominant text — near-black */
  --graphite:#3F4348;     /* secondary text */
  --steel:#6F767D;        /* tertiary text / captions / mono labels */
  --hairline:#D8D1C4;     /* rules, dividers, borders (1px) */
  --surface:#ffffff;      /* raised cards / console */

  /* ---------- Accents (used sparingly) ----------
     --teal/--teal-ink/--green are the historical token names the shared
     component layer still references; --blue* are the editorial aliases. */
  --teal:#21476B;         /* primary action: CTAs, links, default accent */
  --teal-ink:#173655;     /* hover / pressed primary */
  --green:#2F5C7A;        /* status: shipped / verified */
  --amber:#B7791F;        /* status: gated / "where AI breaks" / caution */
  --forest:#3D6B52;       /* lane accent: developers */
  --oxblood:#6B2634;      /* lane accent: companies / risk emphasis */
  --blue:var(--teal);     /* editorial alias of --teal */
  --blue-ink:var(--teal-ink);
  --blue-soft:var(--green);

  /* ---------- Lane accent system (audience router) ---------- */
  --lane-start:var(--teal);
  --lane-build:var(--amber);
  --lane-dev:var(--forest);
  --lane-company:var(--oxblood);
  --lane-cross:var(--steel);

  /* ---------- Misc ---------- */
  --graph-empty:#ebedf0;
  --on-accent:#F6F2EA;
  --shadow:rgba(17,19,21,.35);

  /* ---------- Type families ---------- */
  --serif:"Fraunces",Georgia,"Times New Roman",serif;                 /* display / authority */
  --sans:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,sans-serif; /* body / UI */
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;/* evidence / labels */

  /* ---------- Radii (deliberately tight — engineered, not soft SaaS) ---------- */
  --radius-sm:2px;
  --radius-md:4px;
  --radius-lg:6px;

  /* ---------- Shadows (minimal, low) ---------- */
  --shadow-hairline:0 1px 0 var(--hairline);
  --shadow-raise:0 16px 36px -26px var(--shadow);                      /* card hover */
  --shadow-console:0 1px 0 var(--hairline),0 22px 50px -28px rgba(17,19,21,.35);

  /* ---------- Layout ---------- */
  --maxw:1200px;
  --gutter:28px;
  --nav-h:72px;          /* sticky-nav height fallback; editorial.js publishes the EXACT
                            measured height onto :root (html) so both the hero min-height
                            and html{scroll-padding-top} stay pixel-accurate. */

  /* ---------- Semantic aliases consumed by the shared component layer ---------- */
  --bc-bg:var(--paper); --bc-bg-alt:var(--paper-2); --bc-surface:var(--surface); --bc-surface-alt:var(--paper-2);
  --bc-text:var(--ink); --bc-text-muted:var(--graphite); --bc-text-faint:var(--steel); --bc-border:var(--hairline);
  --bc-accent:var(--green); --bc-accent-hover:color-mix(in srgb,var(--green) 85%,var(--ink)); --bc-accent-subtle:color-mix(in srgb,var(--green) 12%,var(--surface));
  --bc-accent-2:var(--amber); --bc-on-accent:var(--on-accent); --bc-ring:var(--green); --bc-shadow:var(--shadow);
  --bc-radius-sm:2px; --bc-radius-md:4px; --bc-font-display:var(--serif); --bc-font-body:var(--sans); --bc-font-mono:var(--mono);
}

/* No-JS / first-paint fallback: the phone nav is shorter on initial load (one-line
   brand, no nav links). Slightly high so the hero errs toward a tiny gap, never a peek.
   editorial.js overrides this with the exact measured value when JS runs. */
@media (max-width:620px){ :root{ --nav-h:64px; } }

/* ---------- Dark ("night") theme ----------
   Toggled via the nav button (#themeToggle) and persisted to
   localStorage('bc-theme-index'); an inline <body> script applies the saved
   theme before paint. --blue/--blue-soft are var()-aliases of --teal/--green,
   so they follow this remap automatically. Note: the .ed-dark "Where AI breaks"
   band is intentionally pinned to fixed dark literals and does NOT invert here. */
body.nightmode,
body[data-theme="dark"]{
  --paper:#14161A; --paper-2:#1B1E24; --ink:#E8E4DA; --graphite:#AEB3B8; --steel:#888E94;
  --hairline:#2C3036; --surface:#23272F; /* raised: one elevation step above --paper-2 (#1B1E24) so cards, rails, and selected tabs read in dark mode */
  --teal:#6E97C8; --teal-ink:#86A9D2; --green:#7FB0D8;
  --amber:#D8A33E; --forest:#6E9E83; --oxblood:#D98A93;
  --graph-empty:#21262d; --on-accent:#14161A; --shadow:rgba(0,0,0,.55);
}

/* ============================================================
   SEMANTIC ELEMENT STYLES — opt-in via the .bc scope so this file
   never fights a host page. Wrap reusable content in <div class="bc">.
   The marketing site uses its own .ed/.fmt3 layers and does not need this.
   ============================================================ */
.bc{
  background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.55;
  -webkit-font-smoothing:antialiased; font-feature-settings:"ss01";
  letter-spacing:-0.005em;
}
.bc h1{font-family:var(--serif);font-weight:500;font-size:clamp(2.2rem,4.6vw,3.5rem);line-height:1.04;letter-spacing:-.02em;color:var(--ink)}
.bc h2{font-family:var(--serif);font-weight:500;font-size:clamp(1.7rem,3vw,2.4rem);line-height:1.08;letter-spacing:-.015em;color:var(--ink)}
.bc h3{font-family:var(--serif);font-weight:600;font-size:1.35rem;letter-spacing:-.01em;color:var(--ink)}
.bc h4{font-family:var(--serif);font-weight:600;font-size:1.32rem;line-height:1.12;letter-spacing:-.01em;color:var(--ink)}
.bc p{color:var(--graphite)}
.bc .lead{color:var(--graphite);font-size:1.12rem;max-width:54ch}
.bc strong{font-weight:600;color:var(--ink)}
.bc em{font-style:italic}
.bc a{color:var(--blue);text-decoration:none}
.bc a:hover{color:var(--blue-ink)}
.bc .principle{font-family:var(--serif);font-style:italic;font-size:1.18rem;color:var(--blue);border-left:2px solid var(--blue);padding-left:14px}
.bc .mono{font-family:var(--mono);font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;color:var(--steel)}
.bc .eyebrow{font-family:var(--mono);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);display:flex;align-items:center;gap:10px}
.bc .eyebrow::before{content:"";width:26px;height:1px;background:var(--blue);display:inline-block}
.bc hr,.bc .rule{height:1px;background:var(--hairline);border:0}