/* =====================================================================
   Official brand — DEFAULT mechanics overlay

   The OFFICIAL Halo brand ("compliance should be fun" — full material,
   flat) is the SHIPPING DEFAULT: its TOKEN values live in the base
   token contract (tokens.css `:root` / `[data-theme="dark"]`), so a
   consumer that imports only tokens.css already gets the official
   palette, fonts, radii, and shadows.

   This file carries the official brand MECHANICS — the rule-level
   overrides the token remap can't reach (kill the glass backdrop-filter,
   paint solid material buttons, opaque cards/chrome, gold-discipline
   border flattening, the client-portal chrome idioms). The proposed
   brand's mechanics are the unscoped base component CSS (glass,
   engraving, metal); these official mechanics must therefore apply by
   DEFAULT but step aside under the opt-in proposed brand. So every rule
   is scoped `:root:not([data-brand="proposed"])` — `data-brand` rides on
   `<html>` (= `:root`), so this matches the document root exactly when
   it is NOT proposed (no attribute, `official`, or anything else). That
   makes `data-brand="official"` a harmless no-op (it just re-asserts the
   default), and lets the base proposed mechanics show through only under
   `data-brand="proposed"`.

   Import AFTER tokens.css. Surfaces that render @halo-compliance/ui
   components (the design site, account shells) import this file; the
   Bootstrap-based customer app consumes only the token contract and does
   not need it.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Brand-gated artwork helpers — for block-level brand artwork placed in
   page content (heroes, specimens) outside BrandSlot's own seam. Render
   both artworks; the data-brand attribute shows exactly one. OFFICIAL is
   the no-attribute default; the proposed side is revealed under
   [data-brand="proposed"] in brands/proposed.css. Inline `style` display
   values would beat these — keep display out of inline styles on gated
   artwork.
   --------------------------------------------------------------------- */
.brand-artwork-official { display: block; }
.brand-artwork-proposed { display: none; }

/* =====================================================================
   FULL MATERIAL — the official brand is not a palette swap over the
   metal-and-glass system; it is a DIFFERENT design system with a
   different core principle ("compliance should be fun" vs "compliance
   should be simple"). The official aesthetic, per the live client
   portal: flat material surfaces, solid color fills, white type on
   color, soft warm shadows, playful micro-motion (lift on hover, press
   on click). No metallic highlights, no glass, no engraving, no
   shimmer. The rules below override the metal mechanisms the token
   remap can't reach.
   ===================================================================== */

/* ------- No glass. The backdrop-blur is the proposed system's core
   metaphor; material surfaces are opaque and flat. One global kill —
   this IS the philosophy, not a style preference, so the heavy hand is
   correct here. ------- */
:root:not([data-brand="proposed"]) *,
:root:not([data-brand="proposed"]) *::before,
:root:not([data-brand="proposed"]) *::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ------- Buttons: solid material fills (the client portal's idiom).
   Resets the metal text-clip shimmer + outline frame, then paints each
   variant as a filled chip: -500 fill, white text, darker hover, lift
   on hover, press-scale on click. ------- */
:root:not([data-brand="proposed"]) .btn--primary,
:root:not([data-brand="proposed"]) .btn--secondary,
:root:not([data-brand="proposed"]) .btn--tertiary,
:root:not([data-brand="proposed"]) .btn--caution,
:root:not([data-brand="proposed"]) .btn--critical,
:root:not([data-brand="proposed"]) .btn--affirm {
  background-image: none;
  background-clip: border-box;
  -webkit-background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  text-shadow: none;
  color: #ffffff;
  transition:
    background-color var(--dur-quick) var(--ease-mechanical),
    border-color var(--dur-quick) var(--ease-mechanical),
    box-shadow var(--dur-quick) var(--ease-mechanical),
    transform var(--dur-quick) var(--ease-mechanical);
}

/* The metal frame corner-of-brightness has no material equivalent. */
:root:not([data-brand="proposed"]) .btn--primary::after,
:root:not([data-brand="proposed"]) .btn--secondary::after,
:root:not([data-brand="proposed"]) .btn--tertiary::after,
:root:not([data-brand="proposed"]) .btn--caution::after,
:root:not([data-brand="proposed"]) .btn--critical::after,
:root:not([data-brand="proposed"]) .btn--affirm::after {
  display: none;
}

/* Per-variant solid identity. Hover goes DARKER (the portal idiom —
   material fills deepen under the pointer; only outline metal
   brightens). */
:root:not([data-brand="proposed"]) .btn--primary {
  background-color: var(--gold-500);
  border-color: var(--gold-700);
}
:root:not([data-brand="proposed"]) .btn--primary:hover:not(:disabled),
:root:not([data-brand="proposed"]) .btn--primary:focus-visible:not(:disabled) {
  background-color: var(--gold-700);
  border-color: var(--gold-700);
  color: #ffffff;
}
:root:not([data-brand="proposed"]) .btn--secondary {
  background-color: var(--silver-500);
  border-color: var(--silver-700);
}
:root:not([data-brand="proposed"]) .btn--secondary:hover:not(:disabled),
:root:not([data-brand="proposed"]) .btn--secondary:focus-visible:not(:disabled) {
  background-color: var(--silver-700);
  border-color: var(--silver-700);
  color: #ffffff;
}
:root:not([data-brand="proposed"]) .btn--tertiary {
  background-color: var(--bronze-500);
  border-color: var(--bronze-700);
}
:root:not([data-brand="proposed"]) .btn--tertiary:hover:not(:disabled),
:root:not([data-brand="proposed"]) .btn--tertiary:focus-visible:not(:disabled) {
  background-color: var(--bronze-700);
  border-color: var(--bronze-700);
  color: #ffffff;
}
:root:not([data-brand="proposed"]) .btn--caution {
  background-color: var(--copper-500);
  border-color: var(--copper-700);
}
:root:not([data-brand="proposed"]) .btn--caution:hover:not(:disabled),
:root:not([data-brand="proposed"]) .btn--caution:focus-visible:not(:disabled) {
  background-color: var(--copper-700);
  border-color: var(--copper-700);
  color: #ffffff;
}
:root:not([data-brand="proposed"]) .btn--critical {
  background-color: var(--rust-500);
  border-color: var(--rust-700);
}
:root:not([data-brand="proposed"]) .btn--critical:hover:not(:disabled),
:root:not([data-brand="proposed"]) .btn--critical:focus-visible:not(:disabled) {
  background-color: var(--rust-700);
  border-color: var(--rust-700);
  color: #ffffff;
}
:root:not([data-brand="proposed"]) .btn--affirm {
  background-color: var(--patina-500);
  border-color: var(--patina-700);
}
:root:not([data-brand="proposed"]) .btn--affirm:hover:not(:disabled),
:root:not([data-brand="proposed"]) .btn--affirm:focus-visible:not(:disabled) {
  background-color: var(--patina-700);
  border-color: var(--patina-700);
  color: #ffffff;
}

/* Playful micro-motion — lift on hover, press on click. This is the
   "fun" register; the proposed brand's motion ADR (calibration, not
   bounce) governs the PROPOSED brand, not this one. */
:root:not([data-brand="proposed"]) .btn:hover:not(:disabled) {
  transform: translateY(-1px);
}
:root:not([data-brand="proposed"]) .btn--primary:hover:not(:disabled) {
  box-shadow: 0 4px 12px rgba(255, 156, 0, 0.25);
}
:root:not([data-brand="proposed"]) .btn:active:not(:disabled) {
  transform: scale(0.97);
  box-shadow: none;
}

/* Outline buttons (the app's `outline` prop — a secondary-action affordance
   with no ui equivalent): transparent fill, colored border + text at rest;
   fills to the solid variant on hover. */
:root:not([data-brand="proposed"]) .btn--outline {
  background-color: transparent;
  background-image: none;
  box-shadow: none;
}
:root:not([data-brand="proposed"]) .btn--primary.btn--outline { color: var(--gold-aa-500); border-color: var(--gold-500); }
:root:not([data-brand="proposed"]) .btn--secondary.btn--outline { color: var(--silver-700); border-color: var(--silver-500); }
:root:not([data-brand="proposed"]) .btn--tertiary.btn--outline { color: var(--bronze-700); border-color: var(--bronze-500); }
:root:not([data-brand="proposed"]) .btn--critical.btn--outline { color: var(--rust-500); border-color: var(--rust-500); }
:root:not([data-brand="proposed"]) .btn--outline:hover:not(:disabled),
:root:not([data-brand="proposed"]) .btn--outline:focus-visible:not(:disabled) {
  color: #ffffff;
}

/* Ghost: flat PRIMARY-colored text — the client's accent register
   (--fg-accent: gold-600 light / gold-400 dark), not the AA-darkened
   old gold. NOTE the deliberate tradeoff, mirrored from the official
   reference implementation: #e68a00 sits ~2.4:1 on the eggshell page —
   below AA for normal text. The client carries accent text at this
   value (typically semibold); the official brand owns that call. */
:root:not([data-brand="proposed"]) .btn--ghost {
  background-image: none;
  background-clip: border-box;
  -webkit-background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  text-shadow: none;
  color: #e68a00; /* client --fg-accent (gold-600) */
  font-weight: var(--weight-strong);
}
:root:not([data-brand="proposed"]) .btn--ghost:hover:not(:disabled),
:root:not([data-brand="proposed"]) .btn--ghost:focus-visible:not(:disabled) {
  color: var(--gold-700); /* deepen on hover, like the solid fills */
}
:root:not([data-brand="proposed"])[data-theme="dark"] .btn--ghost {
  color: var(--gold-300); /* client dark --fg-accent (gold-400 #ffab2b) */
}
:root:not([data-brand="proposed"])[data-theme="dark"] .btn--ghost:hover:not(:disabled),
:root:not([data-brand="proposed"])[data-theme="dark"] .btn--ghost:focus-visible:not(:disabled) {
  color: var(--gold-500); /* brighter on the dark plate */
}

/* ------- Engraved system voice: flat material has no incised text.
   The token already neutralizes the highlight; this clears any direct
   uses of the engraving recipe. ------- */
:root:not([data-brand="proposed"]) .engraved,
:root:not([data-brand="proposed"]) [class*="engrav"] {
  text-shadow: none;
}

/* ------- Cards: opaque material surfaces. The proposed card is
   translucent glass framed in tier-colored metal; the official card is
   a plain white sheet behind the warm neutral hairline (the client
   portal reserves gold for actions, active states, and focus — NEVER
   card borders; its cards all ride --border + a soft shadow). The
   tier ladder (primary/secondary/tertiary) therefore flattens to the
   same neutral frame. Severity variants keep their status border —
   that's severity signal, not brand primary, and dropping it would
   orphan the color-blind pairing (ADR-0017). ------- */
:root:not([data-brand="proposed"]) .card {
  background-color: var(--bg-surface);
  /* A defined edge: an ink a few steps off the mode's page background
     (ink-200 over the light eggshell; ink-700 over the dark plate below),
     not the near-invisible hairline. Elevation stays static (shadow-sm,
     no hover lift) — the border defines the card, not a floating shadow. */
  border-color: var(--ink-200);
  box-shadow: var(--shadow-xs);
}
:root:not([data-brand="proposed"])[data-theme="dark"] .card {
  border-color: var(--ink-700);
}
:root:not([data-brand="proposed"]) .card--caution { border-color: var(--copper-500); }
:root:not([data-brand="proposed"]) .card--critical { border-color: var(--rust-500); }
:root:not([data-brand="proposed"]) .card--sheet {
  background-color: var(--bg-surface);
  box-shadow: var(--shadow-xl);
}

/* ------- Content well: NOT a surface. The ContentWell renders a Card
   (variant primary), but in the official brand the page content sits
   directly on the shell background — the well is a flat layout region,
   not a sheet. Strip the card materiality (fill, border, shadow); the
   layout (.site-layout-main scroll/margin/grid-area + the well's z-index
   and padding) is untouched. (border-color, not border:none, to keep the
   box metrics — no 1px reflow.) The RAIL card stays a surface; only the
   content well flattens. Severity is irrelevant here (the well is always
   primary), so no status-border carve-out is needed. (0,2,0) over the
   base .content-well / .card defaults. */
:root:not([data-brand="proposed"]) .content-well {
  background-color: transparent;
  border-color: transparent;
  box-shadow: none;
}
/* Dark mode: the `[data-theme="dark"] .card` border (0,4,0) outspecifies the
   flatten above (0,3,0), so re-flatten at matching specificity. */
:root:not([data-brand="proposed"])[data-theme="dark"] .content-well {
  background-color: transparent;
  border-color: transparent;
  box-shadow: none;
}
:root:not([data-brand="proposed"]) .content-well::before {
  display: none;
}

/* ------- Overlay plane: FULL opacity. Material overlays occlude what
   they cover; the frosted translucency is the proposed system's read.
   Modal, CommandPalette, and Selector menus already ride .card--sheet
   (opaque above); these four surfaces carry their own translucent
   bodies and need the same treatment. Scrims (modal-overlay,
   command-palette-backdrop) stay translucent — they are dimming
   layers, not cards. ------- */
:root:not([data-brand="proposed"]) .chrome-popover,
:root:not([data-brand="proposed"]) .dp-popover,
:root:not([data-brand="proposed"]) .account-slot-menu,
:root:not([data-brand="proposed"]) .toast {
  background: var(--bg-surface);
}

/* ------- Switch: flat material toggle (the client portal idiom). The base
   Switch is metal-on-glass — a glinting metal-framed track + a domed metal
   knob with corner-of-brightness rims. The official brand flattens it to a
   solid pill with a plain white knob: kill both glints (track + knob ::after)
   and the metal-dome gradients, paint solid fills. OFF = ink track, ON = gold,
   knob = white. ------- */
:root:not([data-brand="proposed"]) .switch {
  border-color: transparent;
  background-color: var(--ink-300);
  box-shadow: none;
}
:root:not([data-brand="proposed"]) .switch::after,
:root:not([data-brand="proposed"]) .switch .switch-knob::after {
  display: none;
}
:root:not([data-brand="proposed"]) .switch:hover:not(:disabled):not(.switch--on) {
  border-color: transparent;
  background-color: var(--ink-400);
}
:root:not([data-brand="proposed"]) .switch-knob {
  background-image: none;
  background-color: #ffffff;
  box-shadow: var(--shadow-sm);
}
:root:not([data-brand="proposed"]) .switch--on {
  border-color: transparent;
  background-color: var(--gold-500);
}
:root:not([data-brand="proposed"]) .switch--on .switch-knob {
  background-image: none;
  background-color: #ffffff;
}

/* =====================================================================
   SHELL CHROME — the client portal's chrome idiom, not the universal
   surface's. The proposed chrome is gold-edged glass grounded on the
   splash; the official chrome is a plain white app bar over an eggshell
   side panel, separated by warm hairlines, with a gold left-accent nav.
   Reference: client/src/index.css (.appbar, .sidebar, .appbar-search).
   ===================================================================== */

/* App bar: tinted eggshell chrome behind a hairline — the calm frame around the
   white work surface (chrome/content inverted: page is the bright paper). */
:root:not([data-brand="proposed"]) .app-bar {
  /* `--app-bar-bg` is an optional consumer override (e.g. an environment-distinct
     tint in non-prod): when set it wins, otherwise the brand default holds. */
  background-color: var(--app-bar-bg, var(--bg-recessed));
  box-shadow: none;
}
:root:not([data-brand="proposed"]) .app-bar--edge {
  border-bottom: var(--space-px) solid var(--border-hairline);
}
:root:not([data-brand="proposed"]) .app-bar--bounded {
  border: var(--space-px) solid var(--border-hairline);
}

/* Search trigger: the client's search pill — eggshell field on the
   white bar, muted icon, border + soft shadow on hover (not gold). */
:root:not([data-brand="proposed"]) .command-palette-trigger {
  background-color: var(--bg-surface);
  border-color: var(--border-hairline);
}
:root:not([data-brand="proposed"]) .command-palette-trigger:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
  color: var(--fg-2);
}
:root:not([data-brand="proposed"]) .command-palette-trigger-icon {
  color: var(--fg-3);
}

/* Rail: the client sidebar's materiality — an eggshell panel behind a
   hairline, not a floating glass card. Geometry stays placemat: a
   flush full-height sidebar was tried (2026-06-10) and reverted — with
   the app bar designed as a full-width spine, no flush-rail
   configuration reads well against it. */
:root:not([data-brand="proposed"]) .site-layout-rail {
  background-color: var(--bg-recessed);
  border-color: var(--border-hairline);
  box-shadow: none;
}

/* Page surface: the work plane. Official inverts chrome/content — the page is
   the lighter plane, the chrome bands above carry the eggshell tint. Both sit on
   adjacent ink steps (page --bg-page = ink-25, chrome --bg-recessed = ink-50) so
   the contrast is a gentle one-step, not paper-white against grey. (0,2,0) beats
   the base .has-page-pattern and ties the dark base rule, winning by source order. */
:root:not([data-brand="proposed"]) .has-page-pattern {
  background-color: var(--bg-page);
}

/* Brighter LIGHT mode: content rides --ink-10 (the "raised page surface", lightest
   stop) and the chrome a faint --ink-20 frame just under it. Light-only (the raw
   ink stops aren't theme-aware); dark keeps its --bg-recessed / --bg-page planes. */
:root:not([data-brand="proposed"]):not([data-theme="dark"]) .app-bar {
  /* Consumer `--app-bar-bg` override wins here too (see the base .app-bar rule). */
  background-color: var(--app-bar-bg, var(--ink-20));
}
:root:not([data-brand="proposed"]):not([data-theme="dark"]) .site-layout-rail {
  background-color: var(--ink-20);
}
:root:not([data-brand="proposed"]):not([data-theme="dark"]) .has-page-pattern {
  background-color: var(--ink-10);
}

/* Nav links: the client's left-accent idiom. A 3px accent border
   carries state: transparent at rest, light gold on hover, solid gold
   when current — with the gold-tinted wash and a weight step. */
:root:not([data-brand="proposed"]) .reference-nav-link {
  border-left: 3px solid transparent;
  transition:
    color var(--dur-quick) var(--ease-mechanical),
    background var(--dur-quick) var(--ease-mechanical),
    border-color var(--dur-quick) var(--ease-mechanical);
}
:root:not([data-brand="proposed"]) .reference-nav-link:hover {
  background: rgba(255, 156, 0, 0.06);
  border-left-color: var(--gold-300);
  color: var(--fg-1);
}
:root:not([data-brand="proposed"]) .reference-nav-link.is-current {
  background: #fff7e6; /* the client's gold-50 active wash */
  border-left-color: var(--gold-500);
  color: var(--fg-1);
  font-weight: var(--weight-strong);
}

/* Workspace session-context triggers (org / impersonation): the gold
   active wash takes the client portal's values — gold-50 plate with
   gold-700 glyph (translucent gold + bright glyph in dark). Same
   grammar as the ambient pressed state and the nav active wash. */
:root:not([data-brand="proposed"]) .wsm-ctx.is-active {
  color: var(--gold-700);
  background: #fff7e6; /* the client's gold-50 active wash */
}
:root:not([data-brand="proposed"])[data-theme="dark"] .wsm-ctx.is-active {
  color: var(--gold-300);
  background: rgba(255, 156, 0, 0.12);
}

/* Section eyebrows: the client's product-header register — tiny,
   uppercase, tracked, semibold. */
:root:not([data-brand="proposed"]) .reference-nav-eyebrow {
  text-transform: uppercase;
  font-size: var(--text-overline);
  font-weight: var(--weight-strong);
  letter-spacing: var(--tracking-wider);
}

/* Ambient corner buttons (Preferences, Comms, RailToggle, Language):
   a plain GHOST ICON button — no border, no ring, no metallic
   corner-of-brightness sweep, no float. The glyph inherits a muted
   currentColor (--fg-2); at rest the body is fully transparent. Hover =
   a faint recessed fill (--bg-recessed) + a slightly stronger glyph; the
   open/pressed state takes the gold-50 active wash with gold-700 glyph —
   gold as active state, per the discipline. The focus-visible ring from
   the base .btn rule is preserved for a11y. Geometry (the 34px icon
   circle / icon padding) stays from the base .btn--ambient. */
:root:not([data-brand="proposed"]) .btn--ambient {
  color: var(--fg-3);
  border-color: transparent;
  box-shadow: none;
  transition:
    color var(--dur-quick) var(--ease-mechanical),
    background-color var(--dur-quick) var(--ease-mechanical),
    transform var(--dur-quick) var(--ease-mechanical);
}
:root:not([data-brand="proposed"]) .btn--ambient::after {
  display: none;
}
:root:not([data-brand="proposed"]) .btn--ambient:hover:not(:disabled),
:root:not([data-brand="proposed"]) .btn--ambient:focus-visible:not(:disabled) {
  color: var(--fg-2);
  background-color: var(--bg-recessed);
  border-color: transparent;
  box-shadow: none;
}
:root:not([data-brand="proposed"]) .btn--ambient[aria-pressed="true"]:not(:disabled) {
  color: var(--gold-700);
  background-color: #fff7e6; /* the client's gold-50 active wash */
  border-color: transparent;
}
:root:not([data-brand="proposed"])[data-theme="dark"] .btn--ambient {
  color: rgba(249, 249, 250, 0.6);
  border-color: transparent;
  background-color: transparent;
}
:root:not([data-brand="proposed"])[data-theme="dark"] .btn--ambient:hover:not(:disabled),
:root:not([data-brand="proposed"])[data-theme="dark"] .btn--ambient:focus-visible:not(:disabled) {
  color: #f0ebe2;
  background-color: rgba(255, 255, 255, 0.07);
  border-color: transparent;
}
:root:not([data-brand="proposed"])[data-theme="dark"] .btn--ambient[aria-pressed="true"]:not(:disabled) {
  color: var(--gold-300);
  background-color: rgba(255, 156, 0, 0.12); /* client dark gold-50 */
  border-color: transparent;
}

/* =====================================================================
   GOLD DISCIPLINE — container borders flattened (sweep)
   Under the official brand, gold is reserved for actions, active
   states, and focus; it never frames a CONTAINER. The proposed brand's
   gold container frames below flatten to the warm neutral hairline
   (fields step to --border-strong on hover, the search-pill idiom).
   Severity frames (rust/patina/copper) are untouched — severity
   signal, not brand primary. Gold focus borders/rings, active-state
   gold, and gold background washes (brand tint, not frame) all stay.
   --border-hairline and --border-strong retoken under dark mode, so no
   dark variants are needed. .card, .app-bar, .command-palette-trigger,
   and .site-layout-rail are already flattened in the sections above.
   ===================================================================== */

/* Input hover (ui/src/components/input.css): the proposed brand golds
   the field frame on hover; the official portal never golds a field
   before focus — hover steps to border-strong (the
   .command-palette-trigger idiom above; client inputs go gold only at
   :focus). Mirrors the base guards exactly so (0,6,0) beats the base
   (0,5,0) without touching the gold :focus-within state. */
:root:not([data-brand="proposed"])
  .input-wrap:hover:not(:focus-within):not(.input-wrap--disabled):not(.input-wrap--invalid) {
  border-color: var(--border-strong);
}

/* Selector field mirrors the Input frame (selector.css), so its hover must match:
   neutral border-strong, gold reserved for :focus. Without this the base gold-aa
   hover leaks through as a muddy gold on official-brand selectors. Mirrors the
   base selector guards so (0,8,0) beats the base (0,6,0). */
:root:not([data-brand="proposed"])
  .selector-field:hover:not(:focus):not(:focus-within):not(.is-disabled):not(.is-invalid) {
  border-color: var(--border-strong);
}

/* Inputs round at md (8) to match the Bootstrap form-controls + sit one step
   under cards (lg=10). Radius only — never border-color, which carries the
   focus (gold) and invalid (rust) states. */
:root:not([data-brand="proposed"]) .input-wrap {
  border-radius: var(--radius-md);
}

/* TextArea hover (ui/src/components/textarea.css): same field-hover
   idiom — border-strong, not gold. The gold focus border + focus ring
   stay, rust/patina validity frames untouched. */
:root:not([data-brand="proposed"])
  .textarea:hover:not(:focus):not(:disabled):not(.textarea--invalid):not(.textarea--valid) {
  border-color: var(--border-strong);
}

/* DataTable (ui/src/components/data-table.css): the proposed table is
   glass in a gold-tier frame; the official table is a plain content
   container on the hairline. The active sort caret, focus rings, and
   the gold resize-handle wash stay — active/focus/action signals, not
   container frames. */
:root:not([data-brand="proposed"]) .dt {
  border-color: var(--border-hairline);
}

/* Code & token plaques (ui/src/components/text.css): the 30% gold-mix
   plaque frame is a container border wearing brand primary → hairline.
   The faint gold wash and the gold token text stay (brand tint + text
   register, not frames); the engraving shadow is already neutralized
   by the transparent --engraving-shadow tokens above. */
:root:not([data-brand="proposed"]) .txt--code,
:root:not([data-brand="proposed"]) .txt--token {
  border-color: var(--border-hairline);
}

/* Promotion footer (ui/src/layouts/site-layout.css): the gold top rule
   becomes a hairline separation; the 6% gold wash background stays —
   tint, not frame. */
:root:not([data-brand="proposed"]) .site-layout-footer {
  border-top-color: var(--border-hairline);
}

/* Spec-reference component set (design/components.css — imported by
   the design site alongside this file; (0,3,0) beats its (0,1,0) base
   variants regardless of import order). The tier ladder's gold frames
   flatten; .halo-card--accent is the legacy alias for primary.
   Critical (rust) and tertiary (bronze) variants are untouched. */
:root:not([data-brand="proposed"]) .halo-card--primary,
:root:not([data-brand="proposed"]) .halo-card--accent,
:root:not([data-brand="proposed"]) .halo-modal--primary {
  border-color: var(--border-hairline);
}

/* ---------------------------------------------------------------------
   Official × dark — chrome mechanic that the token retoken can't reach.
   The gold active wash can't stay a light-mode tint — the client's dark
   block swaps gold-50 to a translucent gold.
   --------------------------------------------------------------------- */
:root:not([data-brand="proposed"])[data-theme="dark"] .reference-nav-link.is-current {
  background: rgba(255, 156, 0, 0.12);
}