/* ═══════════════════════════════════════════════════════════════════
   HGM Modernized Framework — design bridge (2026-10-01)
   ------------------------------------------------------------------
   Applies the HGM Modernized Framework visual system on top of the
   existing luxury component layer. This file loads LAST in the
   stylesheet cascade, so its token redefinitions win.

   Design source: HGM-Modernized-Framework (brand-spec.md)
   - Deep navy / cool off-white structural colors
   - Gold brand accent (metallic #d4af37), bronze deep #7c5e1c
   - Inter Tight for interface/display, IBM Plex Mono for labels
   - Julius Sans One for the HGM typelogo mark
   - Flat panels, square corners, hairline borders
   - Light / Dark themes (body[data-theme]), dark default

   Token mapping (luxury → framework):
     --sans/--display → Inter Tight      --mono → IBM Plex Mono
     --ink/#0b0e13   --paper/#f4f4f1    --night/#0d1117
     --gold/#d4af37  --gold-deep/#7c5e1c --gold-hover/#e5c158
   ═══════════════════════════════════════════════════════════════════ */

/* ── §0 · Font stacks ─────────────────────────────────────────── */
:root {
  --sans: 'Inter Tight', 'Helvetica Neue', Arial, system-ui, sans-serif;
  --display: 'Inter Tight', 'Helvetica Neue', Arial, system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --typelogo: 'Julius Sans One', 'Inter Tight', sans-serif;
}

/* ── §1 · Light theme — framework light tokens ─────────────────── */
body[data-theme="light"] {
  --ink: #0b0e13;
  --night: #0d1117;
  --overlay: #07090d;
  --paper: #f4f4f1;
  --paper-warm: #fbfbf9;
  --paper-dim: #eceae4;
  --paper-faint: rgba(11, 14, 19, .06);
  --champagne: #f0e6cc;
  --line: #c9ccc8;
  --line-warm: #c9ccc8;
  --line-dark: rgba(255, 255, 255, .14);
  --gold: #c9992f;
  --gold-deep: #7c5e1c;
  --gold-hover: #6b5518;
  --gold-bright: #d4af37;
  --gold-ink: #5e4512;
  --gold-soft: #f3e5ab;
  --gold-soft-line: #e6d199;
  --gold-text: #7c5e1c;
  --link-gold: #7c5e1c;
  --gold-rgb: 201, 153, 47;
  --muted: #59616b;
  --kicker-gray: #6c757d;
  --nav-link: #42484f;
  --card-meta: #68717a;
  --on-night: #f4f4f1;
  --focus: #7c5e1c;
  --shadow-card: 0 2px 12px rgba(11, 14, 19, .08);
  --shadow-elevated: 0 8px 32px rgba(11, 14, 19, .12);
}
body[data-theme="light"] ::selection { background: #7c5e1c; color: #ffffff; }

/* ── §2 · Dark theme — framework dark tokens (site default) ────── */
body[data-theme="dark"] {
  --ink: #f4f4f1;
  --night: #0d1117;
  --overlay: #07090d;
  --paper: #0b0e13;
  --paper-warm: #11151c;
  --paper-dim: #141a23;
  --paper-faint: rgba(244, 244, 241, .06);
  --champagne: #2a2417;
  --line: #262c34;
  --line-warm: #262c34;
  --line-dark: rgba(255, 255, 255, .14);
  --gold: #d4af37;
  --gold-deep: #d4af37;
  --gold-hover: #e5c158;
  --gold-bright: #e5c158;
  --gold-ink: #f3e5ab;
  --gold-soft: #2a2417;
  --gold-soft-line: #4a3d1c;
  --gold-text: #d4af37;
  --link-gold: #d4af37;
  --gold-rgb: 212, 175, 55;
  --muted: #a8aeb7;
  --kicker-gray: #8b939d;
  --nav-link: #c9cfd6;
  --card-meta: #8b939d;
  --on-night: #f4f4f1;
  --focus: #d4af37;
  --shadow-card: 0 2px 12px rgba(0, 0, 0, .45);
  --shadow-elevated: 0 8px 32px rgba(0, 0, 0, .55);
}
body[data-theme="dark"] ::selection { background: #d4af37; color: #0b0e13; }

/* ── §3 · Base typography — framework voice ────────────────────── */
body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, .lux-head h2, .lux-hero h1 {
  font-family: var(--display);
  letter-spacing: -0.015em;
}
.lux-eyebrow, .eyebrow, .section-kicker, .kicker,
.m-sub, .card-label, .n, .mono, code, kbd {
  font-family: var(--mono);
}

/* ── §4 · Typelogo — HGM wordmark ────────────────────────────────
   HGM in Julius Sans One · hairline separator · full name with
   gold "Marketing". Replaces the logo-image wordmark. */
.typelogo {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
}
.typelogo__mark {
  font-family: var(--typelogo);
  font-size: 22px;
  letter-spacing: .14em;
  color: var(--ink);
  font-weight: 400;
  padding-right: 2px;
}
.typelogo__sep {
  width: 1px;
  height: 26px;
  background: var(--line);
  flex: none;
}
.typelogo__name {
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--ink);
}
.typelogo__accent {
  color: var(--gold-text);
  font-weight: 600;
}
a.typelogo:hover .typelogo__mark { color: var(--gold-text); }
a.typelogo:hover { text-decoration: none; }
/* Compact: hide full name on narrow screens, keep the HGM mark */
@media (max-width: 560px) {
  .typelogo__name { display: none; }
  .typelogo__sep { display: none; }
}
/* Footer typelogo — slightly smaller */
.site .typelogo__mark, footer.site .typelogo__mark { font-size: 19px; }
.site .typelogo__sep, footer.site .typelogo__sep { height: 22px; }

/* ── §5 · Framework surface refinements ───────────────────────── */
body { color-scheme: light; }
body[data-theme="dark"] { color-scheme: dark; }

/* Hairline discipline: square corners already enforced upstream;
   ensure focus visibility uses the framework accent. */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

/* Buttons pick up the framework gold voice */
.btn-accent, .lux-btn--gold, .product-cta {
  --btn-bg: var(--gold-deep);
}

/* Theme pill: two-dot framework toggle */
.theme-switcher {
  border: 1px solid var(--line);
  background: var(--paper-warm);
}
.theme-switcher__label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.theme-switcher__name {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink);
}
.theme-switcher button[data-theme-choice] {
  border: 1px solid var(--line);
  background: transparent;
}
.theme-switcher button[data-theme-choice].is-active {
  border-color: var(--gold-text);
  box-shadow: 0 0 0 1px var(--gold-text);
}

/* ── §6 · Announce / ticker — framework restraint ──────────────── */
.announce, .tick-track {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
}

/* ── §7 · Print ────────────────────────────────────────────────── */
@media print {
  .theme-switcher, .a11y-tab, .mnav-scrim { display: none !important; }
}

/* ── §8 · Hero H1 visibility fix ──────────────────────────────────
   hgm-overhaul.css sets body:not(.home) .page-hero h1 to var(--paper),
   which resolves DARK in dark mode (invisible). Under the 2-theme token
   system, --ink is the theme-aware text color in both modes. */
body:not(.home) .page-hero h1 { color: var(--ink); }
body:not(.home) .page-hero h1 em,
body:not(.home) .page-hero h1 strong { color: var(--gold-hover); }

/* ── §9 · Professional chrome — static announce, header theme toggle,
   editorial index lists ─────────────────────────────────────────── */

/* Static announcement bar: single line, no marquee, no ticker. */
.announce--static { justify-content: center; }
.announce--static .tick { display: none; }
.announce__text {
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--on-night);
}
.announce__text a { color: var(--gold); border-bottom: 1px solid var(--gold); }

/* Header theme toggle: minimal text control, replaces floating pill. */
.theme-switcher { display: none; } /* hide legacy floating pill */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.theme-toggle button {
  background: none;
  border: 0;
  padding: 4px 2px;
  font: inherit;
  color: var(--muted);
  cursor: pointer;
  letter-spacing: inherit;
  text-transform: inherit;
}
.theme-toggle button:hover { color: var(--ink); }
.theme-toggle button.is-active { color: var(--gold-text); }
.theme-toggle__sep { color: var(--line); }

/* Flat icon theme toggle: circular, no embossing, no shadows. */
.theme-icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
  cursor: pointer;
  box-shadow: none;
  transition: color .18s ease, border-color .18s ease;
}
.theme-icon-btn:hover {
  color: var(--gold-text);
  border-color: var(--gold-text);
  box-shadow: none;
}
.theme-icon-btn:active {
  transform: none;
  box-shadow: none;
}
.theme-icon-btn .theme-icon { display: none; }
/* dark mode → show sun (click to go light); light mode → show moon */
.theme-icon-btn[data-icon-state="dark"] .theme-icon--sun { display: block; }
.theme-icon-btn[data-icon-state="light"] .theme-icon--moon { display: block; }

/* Editorial index: numbered hairline rows replace card grids. */
.index-list { border-top: 1px solid var(--line); }
.index-list__row {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 16px;
  align-items: baseline;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
}
.index-list__row:hover .index-list__title { color: var(--gold-text); }
.index-list__num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--muted);
}
.index-list__title {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.01em;
  transition: color .2s;
}
.index-list__desc { color: var(--muted); font-size: 14px; margin-top: 4px; }
.index-list__arrow {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--gold-text);
}
@media (max-width: 560px) {
  .index-list__row { grid-template-columns: 32px 1fr auto; }
  .index-list__title { font-size: 17px; }
}

/* Clean proof lists: no checkmarks, hairline separators. */
.proof-list { list-style: none; margin: 0; padding: 0; }
.proof-list li {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
}
.proof-list li:last-child { border-bottom: 0; }
.proof-list__label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: 4px;
}

/* Typographic hero: single column, no art. */
.home-hero-grid { grid-template-columns: 1fr; max-width: 880px; }
.home-hero-grid .lux-reveal { max-width: 100%; }

/* ── §10 · Flat design system ────────────────────────────────────
   Stripe/Linear/Vercel principle: restraint creates credibility.
   No shadows, no gradients, no blur, no 3D. Flat surfaces,
   hairline borders, whitespace. */
.lux-card, .service-card, .assessment-card, .offer-card,
.bento-tile, .lux-tier, .art-card, .slide-art,
.faq-section details, .lux-faq details,
.cookie-bar, .a11y-panel, .theme-icon-btn,
.btn, .btn-accent, .btn-ghost {
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* Kill gradient backgrounds (keep solid colors). */
.lux-grid-bg,
[class*="gradient"],
.hero-gradient, .section-gradient {
  background-image: none !important;
}
/* Flat cards: 1px hairline border, no lift. */
.lux-card, .service-card, .bento-tile, .lux-tier {
  border: 1px solid var(--line);
}
.lux-card:hover, .service-card:hover, .bento-tile:hover {
  box-shadow: none !important;
  transform: none !important;
}
/* Flat buttons: solid, no shadow, no gradient. */
.btn, .btn-accent, .btn-ghost,
button, input[type="submit"] {
  background-image: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
}