/* One neutral palette for the whole website and every embedded UI widget.
   Three surfaces + two text tones per theme. Semantic status colors and
   editorial artwork are separate. Never mix extra neutral fills locally. */
:root,
[data-theme="light"] {
  --ui-canvas: #ffffff;
  --ui-surface: #f8f9fa;
  --ui-active: #eef0f2;
  --ui-muted: #666a73;
  --ui-ink: #141417;
}

[data-theme="dark"] {
  --ui-canvas: #0b0e13;
  --ui-surface: #12161d;
  --ui-active: #20262f;
  --ui-muted: #a7a7b0;
  --ui-ink: #f4f4f5;
}

/* Adapt the generated design-system vocabulary to the same opaque values.
   Opaque hover/selection surfaces look identical on a panel, card or canvas. */
:root,
[data-theme] {
  --bg: var(--ui-surface);
  --list: var(--ui-surface);
  --s1: var(--ui-canvas);
  --s2: var(--ui-surface);
  --s3: var(--ui-active);
  --ink: var(--ui-ink);
  --ink-muted: var(--ui-muted);
  --ink-faint: var(--ui-muted);
  --slate: var(--ui-muted);
  --btn: var(--ui-ink);
  --btn-ink: var(--ui-canvas);
  --line: var(--ui-active);
  --line-2: var(--ui-active);
  --hl: var(--ui-surface);
  --hl-2: var(--ui-active);
  --hl-wash: var(--ui-surface);
  --active-shade: var(--ui-active);
  --active-shade-raised: var(--ui-active);
  --nested-shade: var(--ui-active);
  --surface-base: var(--bg);
  --surface-raised: var(--s1);
  --surface-inset: var(--s2);
  --surface-hover: var(--ui-active);
  --surface-hover-raised: var(--ui-active);
  --background: var(--bg);
  --foreground: var(--ui-ink);
  --card: var(--s1);
  --card-foreground: var(--ui-ink);
  --popover: var(--s1);
  --popover-foreground: var(--ui-ink);
  --muted: var(--ui-surface);
  --muted-foreground: var(--ui-muted);
  --secondary: var(--ui-surface);
  --secondary-foreground: var(--ui-ink);
  --accent: var(--ui-active);
  --accent-foreground: var(--ui-ink);
  --primary: var(--ui-ink);
  --primary-foreground: var(--ui-canvas);
  --border: var(--ui-active);
  --border-soft: var(--ui-active);
  --border-strong: var(--ui-active);
  --ui-line: var(--ui-active);
  --ui-line-strong: var(--ui-active);
  --input: var(--ui-active);
  --ring: var(--ui-ink);
  --marketing-bg: var(--ui-canvas);
  --marketing-card-bg: var(--ui-surface);
  --marketing-card-hover-bg: var(--ui-active);
  --marketing-hero-ink: var(--ui-ink);
  --marketing-hero-muted: var(--ui-muted);
  --widget-inset-bg: var(--s2);
  --prompt-bg: var(--s1);
  --prompt-border: var(--ui-active);
}

[data-theme="dark"] {
  --bg: var(--ui-canvas);
  --s1: var(--ui-surface);
  --s2: var(--ui-active);
}

/* Page chrome and section bands share the canvas, without translucent tint. */
body :is(.nav, .mnav, .band-tint),
body .careers-page #how-we-work,
body.careers-page #how-we-work {
  background: var(--marketing-bg);
}
body :is(.nav, .mnav) { backdrop-filter: none; -webkit-backdrop-filter: none }

/* Cards, summaries and callouts use one surface on every route. */
body :is(
  .card, .workflow-template-card, .tier, .pricing-includes > *,
  .blog-featured, .blog-card, .article-toc, .article-summary, .article-stat,
  .article-note, .quote, .studio-download-card, .studio-download-os-card
),
body .careers-page #what-we-built .section-head,
body.careers-page #what-we-built .section-head,
body .careers-page .bene-group,
body.careers-page .bene-group,
body .careers-page .perk-panel,
body.careers-page .perk-panel {
  background: var(--marketing-card-bg);
}

/* Terminal, code, command, chat and search wells use the same inset surface. */
body :is(.mk-chat, .mk-chat.flat) { --chat-inset: var(--widget-inset-bg) }
body :is(
  .mk-cmd, .mk-code pre, .mk-term, .pane-code,
  .product-command, .product-code-lines, .product-code-view,
  .product-code-view pre, .product-mini-command, .pc-caps-search,
  .studio-card-terminal-body
) {
  background: var(--widget-inset-bg);
}

/* Selection is one fill. Borderless controls retain their native semantics
   and :focus-visible outline; structural window edges remain separate. */
body :is(
  [role="tab"], .mk-tab, .mk-tabs .tab, .mk-client, .pc-pill,
  .studio-shared-session .title.is-active, .studio-session-action.is-active,
  .studio-shared-chat .mk-msg.you, .mk-chat-steps,
  .mk-sugg, .mk-code pre, .mk-cmd, .mk-copy, .product-command, .product-code-lines,
  .product-code-view pre, .product-mini-command, .pc-caps-search,
  .studio-card-studio-toolbar b, .studio-card-intent, .studio-download-command,
  .dev-sequence-tabs > span
) {
  border: 0;
  box-shadow: none;
}
body :is(
  .studio-shared-session .title.is-active,
  .studio-shared-chat .mk-msg.you,
  .studio-session-action.is-active,
  .pc-pill[aria-selected="true"],
  .dev-sequence-tabs > span.is-active
) { background: var(--ui-active) }
body .mk-tab:is([aria-selected="true"], [aria-current="true"]) {
  background: var(--ui-active);
}
body :is(.client-glider, .mk-tabs .glider) {
  background: var(--ui-active);
  border: 0;
  box-shadow: none;
}
/* Shared Studio chrome keeps project names inset as the pane narrows. */
body .studio-shared-session .title.is-active {
  width: fit-content;
  min-width: 0;
  max-width: min(13rem, 100%);
  flex: 0 1 auto;
  padding-inline: var(--sp3);
  overflow: hidden;
}
body .studio-shared-session .title.is-active > b {
  display: block;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body .studio-shared-session > :is(.studio-pane-menu, .studio-new-agent, .studio-session-actions) {
  flex: 0 0 auto;
}
body [data-studio-preset="home-hero"] .mk-rail-head {
  gap: var(--sp2);
}
body [data-studio-preset="home-hero"] .studio-hero-brand {
  flex: 0 1 auto;
  gap: var(--sp2);
  overflow: hidden;
}
body [data-studio-preset="home-hero"] .studio-hero-brand .logotype {
  display: block;
  width: auto;
  height: 14px;
  max-width: 100%;
}
body [data-studio-preset="home-hero"] .studio-hero-brand > strong {
  min-width: 0;
  overflow: hidden;
  font-size: var(--type-label);
  line-height: 1.2;
  text-overflow: ellipsis;
}
body .mk-client[data-pane="studio"] .slot img {
  display: block;
  width: 12px;
  height: 14px;
  object-fit: contain;
}
body :is(.mk-code-body, .mk-term, .pane-code, .product-code-view, .product-command, .product-code-lines) .mk-copy {
  border: 0;
  background: var(--s1);
  box-shadow: none;
}
body :is(.mk-code-body, .mk-term, .pane-code, .product-code-view, .product-command, .product-code-lines) .mk-copy:is(:hover, :focus-visible),
body .mk-copy:active {
  background: var(--ui-active);
}
/* AI input remains a distinct white well inside the soft gray chat panel.
   Reuse this contract in full-size, compact, and related-product mockups. */
body .mk-chat .mk-chat-composer,
body .studio-shared-chat .mk-chat-composer {
  background: var(--prompt-bg);
  border: 1px solid var(--prompt-border);
  box-shadow: none;
}
body .mk-chat-composer:focus-within {
  outline: 2px solid var(--ui-ink);
  outline-offset: 2px;
}

/* The isolated download route uses the same UI, including its terminal. */
body .studio-download-shell {
  --mock-bg: var(--widget-inset-bg);
  --mock-ink: var(--ui-ink);
  --studio-visual: var(--ui-surface);
}
body .studio-download-card { border-color: var(--ui-active) }
body .studio-card-intent { background: var(--s1) }
body .studio-card-studio-toolbar > div { background: var(--widget-inset-bg) }
body .studio-card-studio-toolbar b[data-active="true"] { background: var(--ui-active) }
body .studio-card-terminal-body { color: var(--ui-ink) }
body .studio-card-terminal-body > code b,
body .studio-card-terminal-body > p,
body .studio-card-terminal-body > strong { color: var(--ui-muted) }

/* Article controls share the widget palette; illustrations stay artwork. */
body .article-body a { background: var(--ui-surface) }
body .article-body a:is(:hover, :focus-visible) { background: var(--ui-active) }
body .article-lightbox-bar { background: var(--s1); border-color: var(--ui-active) }
[data-theme] body .article-author-avatar--mark { background: var(--ui-ink) }

/* Two text tones, including the inverse footer, instead of several alpha
   variants of white that produce unrelated grays. */
body .footer {
  --footer-bg: var(--ui-ink);
  --footer-ink: var(--ui-canvas);
  --footer-muted: var(--ui-active);
  background: var(--footer-bg);
  color: var(--footer-ink);
}
[data-theme="dark"] body .footer {
  --footer-bg: var(--ui-surface);
  --footer-ink: var(--ui-ink);
  --footer-muted: var(--ui-muted);
}
body .footer :is(.foot-brand p, .foot-col h3, .foot-col a, .foot-base, .foot-socials a) {
  color: var(--footer-muted);
}
body .footer :is(.foot-col a, .foot-socials a):is(:hover, :focus-visible) {
  color: var(--footer-ink);
}
body .foot-base { border-color: var(--ui-muted) }

/* The hero's Test, Run, and Deploy actions are one unfilled control family. */
body .hero-v2 .studio-shared-session .studio-session-action {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-muted);
  box-shadow: none;
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
body .hero-v2 .studio-shared-session .studio-session-action:is(:hover, :focus-visible, .is-active) {
  border-color: var(--ink-muted);
  background: transparent;
  color: var(--ink);
  box-shadow: none;
}
body .hero-v2 .studio-shared-session .studio-session-action:focus-visible {
  outline: 2px solid var(--ink-muted);
  outline-offset: 2px;
}

/* Stacked Studio panes put the conversation below its canvas, steps, or code. */
body .studio-shared-shell[data-studio-stacked] > .pane-cli {
  border-top: 1px solid var(--line);
  border-right: 0;
  border-bottom: 0;
}
body .studio-shared-shell[data-studio-stacked] > .pane-studio {
  box-shadow: none;
}