/* Shared visual system. One neutral application shell; accents change emphasis,
   never the meaning of status colors or the structure of a screen. The body is
   the sole token owner so shell-mounted and standalone React surfaces cannot
   drift into different themes. */

body,
body[data-accent="graphite"] {
  color-scheme: light;
  --bg: #f3f5f6;
  --card: #ffffff;
  --ink: #25272a;
  --inkSoft: #484d52;
  --muted: #62676d;
  --faint: #686e74;
  --fainter: #686e74;
  --line: #e3e6e8;
  --lineSoft: #f0f2f3;
  --lineInner: #eceff1;
  --ghostLine: #cfd4d7;
  --inputLine: #d7dbde;
  --primary: #363b43;
  --primaryDeep: #25272a;
  --primaryInk: #ffffff;
  --primarySoft: #eceef0;
  --avatarInk: #303235;
  --panel: #f8f9fa;
  --panelLine: #e1e4e6;
  --gridHead: #f7f8f9;
  --track: #e6e9eb;
  --green: #0f704d;
  --greenSoft: #e8f7ef;
  --gold: #ad7100;
  --goldInk: #805200;
  --goldSoft: #fff4d8;
  --danger: #b43f4c;
  --dangerSoft: #ffedf0;
  --neutralPill: #eef0f2;
  --arrow: #9ba2a8;
  --anchor: #f8f9fa;
  --anchorInk: #25272a;
  --anchorMuted: #62676d;
  --border: #e3e6e8;
  --text: #25272a;
  --warn: #ad7100;
  --warnSoft: #fff4d8;
  --neutral: #737980;
  --blue: #383a3d;
  --navy: #383a3d;
  --navy2: #25272a;
  --navy3: #eceef0;
  --serif: "Source Serif 4", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}

body[data-accent="teal"] {
  --primary: #16766d;
  --primaryDeep: #0f615a;
  --primaryInk: #ffffff;
  --primarySoft: #e5f4f0;
  --avatarInk: #125f58;
  --blue: #16766d;
  --navy: #16766d;
  --navy2: #0f615a;
  --navy3: #e5f4f0;
}

body[data-accent="sky"] {
  --primary: #356cca;
  --primaryDeep: #2859ad;
  --primaryInk: #ffffff;
  --primarySoft: #e8effc;
  --avatarInk: #2e5da9;
  --blue: #356cca;
  --navy: #356cca;
  --navy2: #2859ad;
  --navy3: #e8effc;
}

/* The application frame stays quiet and light under every accent. */
body[data-accent] .topbar {
  background: var(--card);
  border-bottom-color: var(--line);
  box-shadow: none;
}

body[data-accent] .topbarLogoName,
body[data-accent] .topbarRoleLabel,
body[data-accent] .hamburgerBtn {
  color: var(--ink);
}

body[data-accent] .topbarLogoSub,
body[data-accent] .profileRow {
  color: var(--muted);
}

body[data-accent] .topbarLogoMark { background: transparent; }
body[data-accent] .topbarPill { background: var(--primarySoft); color: var(--primaryDeep); }
body[data-accent] .topbarAvatar { background: var(--primarySoft); color: var(--avatarInk); }
body[data-accent] .profileDropdown {
  background: var(--card);
  border-color: var(--line);
  color: var(--ink);
}

body[data-accent].topNavMode .topbarNav button { color: var(--muted); }
body[data-accent].topNavMode .topbarNav button:hover {
  background: var(--lineSoft);
  color: var(--ink);
}
body[data-accent].topNavMode .topbarNav button.active {
  background: var(--primarySoft);
  color: var(--primaryDeep);
}

body[data-accent].isClientPortalMounted { background: var(--bg); }
body[data-accent].isClientPortalMounted .topbar {
  background: var(--card);
  border-bottom-color: var(--line);
}
body[data-accent].isClientPortalMounted .topbarAvatar {
  background: var(--primarySoft);
  color: var(--avatarInk);
}