/* Reference palette: cool gray, near-black, and vivid orange. Pages and 3D viewers share these color roles. */
:root {
  --bg: #e4e6eb;
  --hero-bg: #e4e6eb;
  --surface: #e4e6eb;
  --surface-hover: #d9dce2;
  --surface-alt: #d1d4da;
  --sunk: #c7cbd1;
  --field-bg: #f2f3f5;
  --ink: #1a1b1d;
  --ink-2: #3b3d42;
  --ink-3: #4a4d53;
  --line: #b7bbc2;
  --line-2: #1a1b1d;
  --control-line: #1a1b1d;
  --accent: #e7652f;
  --accent-hover: #f07945;
  --accent-ink: #8b3518;
  --accent-wash: #f1d4c7;
  --on-accent: #1a1b1d;
  --accent-border: var(--ink);
  --control-accent: var(--accent-ink);
  --on-danger: #fff5f5;
  --focus: #1a1b1d;
  --focus-ring: #1a1b1d30;
  --night: #1a1b1d;
  --night-2: #242528;
  --night-text: #d2d4d9;
  --scrim: #1a1b1d6b;   /* behind a drawer or a dialog: the ink at 42% */
  --shadow: #1a1b1d20; --stage-dot: #1a1b1d17; --night-dot: #f3f4f61a;   /* a raised panel's shadow; the dot grids of the 3D views and the dark band */
  --on-night: #f3f4f6;
  --accent-light: #e7652f;
  --ok: #216547; --ok-bg: #d4e6dc;
  --warn: #815014; --warn-bg: #eadcc5; --warn-mark: #ac731f;
  --bad: #9c3434; --bad-bg: #efdbd8; --bad-hover: #7d2727;
  --data-steel: #686d76; --data-neutral: #a0a5ad;
  --model-line: #3b3d42;
  --model-accent: var(--accent);
  --model-cut: #e98c5f;
  --model-silver: #b2b5bc;
  --model-dark: #40434a;
  --model-pale: #d9dce2;
  --model-grid: #7b8089;
  --stage-center: #dee1e6;
  --stage-edge: #bcc2ca;
  --stage-bg: radial-gradient(ellipse at 50% 42%, var(--stage-center), var(--stage-edge));
  --drawing-paper: #eceef1;
  --drawing-line: #1a1b1d;
  --drawing-guide: #7b8089;
  --drawing-fill: #cbd0d8;
  /* --blue is the old name of the link and small-text accent: the dark orange, which reads on every surface
     (the light orange, --accent, is 2.7:1 on the page gray: a fill, never text) */
  --blue: var(--accent-ink); --blue-wash: var(--accent-wash);
  --orange: var(--accent); --orange-ink: var(--accent-ink); --orange-wash: var(--accent-wash);
  --slate: var(--data-neutral);
  color-scheme: light;
}
body { background: var(--bg); color: var(--ink); }
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.mast, .mast .user-menu, .nav.is-open { background: var(--surface); }
.hero { background-color: var(--hero-bg); }
.brand-ai { color: var(--ink-3); }
/* the home page's explanation (website 1.10.0): accent marks for the next steps, the review line and the example's origin */
.hero-note, .pkg-formats, .real-note p { color: var(--ink-2); }
.pkg-card { background: var(--field-bg); border-color: var(--line-2); color: var(--ink); }
.pkg-head, .pkg-brief, .pkg-checks { border-color: var(--line); }
.pkg-head, .pkg-label { color: var(--ink-3); }
.pkg-checks::before { background: var(--ok); }
.origin, .review-callout, .real-note { border-color: var(--accent); }
.origin, .compat, .real-note { background: var(--surface-alt); }
.review-callout { background: var(--accent-wash); color: var(--ink); }
.ex-step .k { color: var(--accent-ink); }
.ex-brief { background: var(--field-bg); border-color: var(--line-2); }
.ticks li::before { border-color: var(--accent-ink); }
.ex-files a:hover { background: var(--surface-hover); }
.ex-files a span { color: var(--ink-3); }
.nav a:hover, .acct .link:hover, .menu-toggle:hover { background: var(--accent-wash); color: var(--accent-ink); }
.eyebrow::before, .signal-dot, .mast .avatar { background: var(--accent); }
.hero h1 .period, .brand-mark > span, .prompt > svg { color: var(--accent); }
.how .k { color: var(--accent-ink); }

/* A single primary action style; quieter controls retain visible boundaries. */
.btn-signal, #lab-assemble, .auth-form .btn[type="submit"], .reset-card .btn[type="submit"] { background: var(--accent); border-color: var(--accent-border); color: var(--on-accent); }
.btn-signal:hover, #lab-assemble:hover, .auth-form .btn[type="submit"]:hover, .reset-card .btn[type="submit"]:hover { background: var(--accent-hover); border-color: var(--accent-border); color: var(--on-accent); filter: none; box-shadow: none; }
.btn-ink { background: var(--night); color: var(--on-night); }
.btn-ink:hover { background: var(--night-2); color: var(--on-night); }
.btn-line, .btn-ghost, .copy-btn, #lab-download { background: transparent; color: var(--ink); border-color: var(--control-line); }
.btn-line:hover, .btn-ghost:hover, .copy-btn:hover, #lab-download:hover { background: var(--surface-hover); color: var(--accent-ink); border-color: var(--accent-border); }
button:disabled, .btn[aria-disabled="true"] { cursor: not-allowed; }
.skip-link { background: var(--night); color: var(--on-night); }
input, select, textarea { accent-color: var(--control-accent); }
.field input[type], .field select, .field textarea, .input, .dim-row input, .dim-row select { background: var(--field-bg); color: var(--ink); border-color: var(--control-line); }
input::placeholder, textarea::placeholder { color: var(--ink-3); opacity: 1; }
.field input:focus, .field select:focus, .field textarea:focus, .input:focus, .dim-row input:focus, .dim-row select:focus { border-color: var(--focus); box-shadow: 0 0 0 3px var(--focus-ring); }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--bad); }
.check input, .menu-check input, .fmt-picks input { accent-color: var(--control-accent); }

/* The gearbox and study gallery share one studio background and control palette. */
.showcase { background: var(--surface-alt); color: var(--ink); }
.showcase .demo-title .eyebrow, .showcase .demo-title p, .showcase .demo-number,
.showcase .stats dt, .showcase .formats .mono-label, .showcase .formats-note { color: var(--ink-3); }
.showcase .stats dd, .showcase .formats li { color: var(--ink); }
.ex-head, .ex-foot, .dw-bar, .dw-tabs { background: var(--surface); }
.vp, #hero-ex .vp, .lab-stage, .geometry-lab.is-assembly .lab-stage, .lab-card-image { background: var(--stage-bg); }
#hero-ex .parts, .parts, .lab-info { background: var(--surface); }
.seg, .hud-btn, .lab-tools button, .lab-view-presets button { background: var(--surface); color: var(--ink); border-color: var(--control-line); }
.seg button { color: var(--ink-2); }
.seg button:hover, .hud-btn:hover, .lab-tools button:hover, .lab-view-presets button:hover { background: var(--accent-wash); color: var(--accent-ink); }
.seg button[aria-pressed="true"], .hud-btn[aria-pressed="true"], .lab-tools button[aria-pressed="true"],
.lab-view-presets button[aria-pressed="true"], .lab-filters button[aria-pressed="true"],
.dw-tabs button[aria-selected="true"], .auth-tabs button[aria-selected="true"], .tabs [role="tab"][aria-selected="true"] {
  background: var(--accent); border-color: var(--accent-border); color: var(--on-accent); box-shadow: inset 0 0 0 1px var(--accent-border);
}
.env-lbl { background: var(--surface); border-color: var(--accent-border); color: var(--accent-ink); }
.vp-cap, .vp-tip { background: var(--night); color: var(--on-night); }
.vp-tip span { color: var(--night-text); }
.bln { background: var(--surface); border-color: var(--accent-border); color: var(--accent-ink); }
.bln:hover, .bln.on { background: var(--accent); color: var(--on-accent); }
.dw-tabs button[aria-selected="true"] small { opacity: 1; }
.bom button:hover { background: var(--surface-hover); }
.bom button[aria-pressed="true"], .rail-list button[aria-current="true"] { background: var(--accent-wash); box-shadow: inset 3px 0 var(--accent); }
.bom button[aria-pressed="true"] .no { background: var(--accent); color: var(--on-accent); }
.geometry-lab { background: var(--bg); }
.lab-filters, .lab-explorer { border-color: var(--line-2); }
.lab-filters button { color: var(--ink-2); border-color: var(--line); }
.lab-filters button:hover { background: var(--surface-hover); color: var(--accent-ink); }
.lab-filters button[aria-pressed="true"]:hover { background: var(--accent-hover); color: var(--on-accent); }
.lab-category, .lab-part-count, .lab-explosion-label output, .lab-assembly-parts li::marker { color: var(--accent-ink); }
.lab-topline, .lab-hint, .lab-card-index { color: var(--ink-2); }
.lab-brief > span, .lab-disclaimer, .lab-source-note, .lab-explosion-label, .lab-explosion-ends, .lab-assembly-parts, .lab-card-tag { color: var(--ink-3); }
.lab-card { background: var(--surface); }
.lab-card:hover { background: var(--surface-hover); }
.lab-card[aria-pressed="true"] { background: var(--accent-wash); box-shadow: inset 0 -4px var(--accent); }
.lab-card:hover .lab-card-label, #lab-reference { color: var(--accent-ink); }
.lab-card-image::after { color: var(--ink-2); }

/* Content surfaces keep their hierarchy without introducing additional hues. */
#how, .foot, .auth-side { background: var(--surface-alt); }
.tile, .decided > div, #tile-asm, #tile-math { background: var(--surface); }
.tile .big { color: var(--ink); }
.how .vig, .auth-side .art { background: var(--surface); border-color: var(--line); }
.calc { background: var(--field-bg); }
.calc .hl { background: var(--accent-wash); }
.calc .hl b, .diff .new { color: var(--accent-ink); }
.rev-ask { background: var(--night); color: var(--on-night); }
.rev-reply { background: var(--accent-wash); color: var(--ink); }
.rev-reply span { color: var(--accent-ink); }
.bars .bt i { background: var(--data-steel); }
.complex-drawing svg { background: var(--drawing-paper); border-color: var(--line); }
.thumb, .dw-view { background: var(--field-bg); }
.mail-note { border-color: var(--line); }

/* Status colors remain reserved for status, with readable text on tinted backgrounds. */
.st.pass { color: var(--ok); background: var(--ok-bg); }
.st.warn { color: var(--warn); background: var(--warn-bg); }
.st.fail { color: var(--bad); background: var(--bad-bg); }
.btn-danger { color: var(--on-danger); background: var(--bad); }
.btn-danger:hover { color: var(--on-danger); background: var(--bad-hover); }
.btn-danger-line { color: var(--bad); background: var(--bad-bg); border-color: var(--bad); }
.toast { background: var(--night); color: var(--on-night); }
.toast i { background: var(--night-text); }
.toast.ok i { background: var(--ok-bg); }
.toast.warn i { background: var(--warn-bg); }

.cta { background: var(--night-2); color: var(--on-night); }
.cta h2, .cta p, .cta .cta-mail, .cta .cta-mail a, .cta .copy-btn { color: var(--on-night); }
.cta h2 > span { color: var(--accent-light); }
.cta .next-list { color: var(--night-text); }
.cta .next-list li::before { background: var(--accent-light); }
.cta .review-line { border-color: var(--accent-light); color: var(--on-night); }
.cta .btn-signal { background: var(--accent-light); border-color: var(--accent-light); color: var(--on-accent); }
.cta .btn-signal:hover { background: var(--on-night); border-color: var(--on-night); color: var(--accent-ink); }
.cta .btn-line, .cta .copy-btn { background: transparent; border-color: var(--night-text); color: var(--on-night); }
.cta .btn-line:hover, .cta .copy-btn:hover { background: var(--night); border-color: var(--on-night); }
.foot .foot-mail a, .foot a, .foot .footer-wordmark { color: var(--ink); }
.foot .brand-ai, .foot .footer-wordmark > span { color: var(--ink-3); }
.mast .avatar { color: var(--on-accent); }
.preview-banner { background: var(--surface-alt); color: var(--ink-2); border-bottom: 1px solid var(--line); }
.preview-banner > b { color: var(--accent-ink); }

/* Strong structural outlines and dark controls preserve the reference contrast. */
#lab-explode, .timeline input[type="range"] { accent-color: var(--control-accent); }
.bom .no { border-color: var(--accent-border); }

/* Customer question suggestions use the readable accent text role. */
.link-btn { color: var(--accent-ink); }