/* Approved XC palette. Shared by the platform and the standalone welcome page. */
:root {
  color-scheme: light;
  --xc-canvas: #ffffff;
  --xc-surface: #fff;
  --xc-ink: #222321;
  --xc-text: #454842;
  --xc-muted: #686b65;
  --xc-silver: #d7d8d5;
  --xc-line: #d7d8d5;
  --xc-field: #898c84;
  --xc-wash: #eeefe9;
  --xc-copper: #a8603d;
  --xc-copper-text: #874b30;
  --xc-copper-wash: #f2e8e0;
  --xc-hover: #363832;
  --ink: var(--xc-ink);
  --muted: var(--xc-muted);
  --paper: var(--xc-canvas);
  --canvas: var(--xc-canvas);
  --white: var(--xc-surface);
  --line: var(--xc-line);
  --field-line: var(--xc-field);
  --brand: var(--xc-ink);
  --brand-dark: var(--xc-hover);
  --button: var(--xc-ink);
  --accent: var(--xc-copper);
  --link: var(--xc-ink);
  --tint: var(--xc-wash);
  --wash: var(--xc-wash);
  --opc: var(--xc-ink);
  --opc-tint: var(--xc-wash);
  --lime: var(--xc-surface);
  --glass: var(--xc-canvas);
  --shadow: 0 5px 24px rgb(34 35 33 / 5%);
  --warn: #775000;
  --warning-surface: #fff4d7;
  --error: #b42318;
  --error-surface: #fff0ed;
}
html, body { background: var(--xc-canvas); color: var(--xc-ink); }
::selection { background: var(--xc-copper-wash); color: var(--xc-ink); }
.discover-page { --ink: var(--xc-ink); --blue: var(--xc-ink); }
.channel-page {
  --channel-ink: var(--xc-ink);
  --channel-muted: var(--xc-muted);
  --channel-blue: var(--xc-ink);
  --channel-line: var(--xc-line);
  --channel-wash: var(--xc-wash);
}
.co-studio, .channel-page.co-studio {
  --co-ink: var(--xc-ink);
  --co-gray: var(--xc-muted);
  --co-muted: var(--xc-muted);
  --co-wash: var(--xc-wash);
  --co-accent: var(--xc-copper);
}

/* Quiet surfaces and restrained depth; original imagery keeps its own colors. */
.site-header, .welcome-header { background: var(--glass); border-bottom-color: var(--xc-line); }
.site-footer, .welcome-footer { background: var(--xc-canvas); }
.fn-workspace-nav, .fn-editor-index { background: var(--xc-canvas); }
.v2-article { background: transparent; }
.discover-article, .channel-card { background: var(--xc-surface); border-radius: 14px; }
.discover-featured, .channel-page .co-feature,
.channel-grid > .channel-card:only-child { background: linear-gradient(115deg, #eeefe9, #f7f6f2 65%, #f2e8e0); }
.discover-featured .discover-cover, .channel-placeholder, .discover-noimage {
  background: linear-gradient(145deg, var(--xc-wash), var(--xc-canvas));
}
.discover-article:hover, .channel-card:hover { border-color: var(--xc-field); box-shadow: 0 8px 24px rgb(34 35 33 / 6%); }
.discover-intro h1 span { color: var(--xc-muted); }
.discover-intro .eyebrow, .channel-eyebrow { color: var(--xc-copper-text); }
.discover-page .discover-kicker > span:first-child, .channel-page .channel-kicker > span:first-child {
  color: var(--xc-text); background: var(--xc-wash);
}
.discover-insight .discover-kicker > span:first-child,
.channel-policy .channel-kicker > span:first-child { color: var(--xc-copper-text); background: var(--xc-copper-wash); }
.discover-reason > span, .discover-read span, .channel-read > span { color: var(--xc-copper); }
.discover-reason strong { color: var(--xc-text); }
.discover-read { color: var(--xc-ink) !important; }
.discover-article h3 a:hover, .discover-article h2 a:hover, .channel-card h3 a:hover,
.channel-footer a:hover, .interest-reading-list > a:hover strong { color: var(--xc-copper-text); }
.discovery-detail .v2-callout { background: var(--xc-copper-wash); border-color: var(--xc-copper); color: var(--xc-text); }

/* Primary actions are graphite; secondary actions sit on a silver surface. */
body[data-page] .button, body[data-page] button.button, .co-button { border-radius: 10px; }
body[data-page] .button { background: var(--xc-wash); border-color: var(--xc-line); color: var(--xc-ink); }
body[data-page] .button:hover { background: #e5e6df; color: var(--xc-ink); filter: none; }
body[data-page] .button.primary, body[data-page] .button.dark,
.discover-intro .discovery-search .button, .channel-page .co-button-dark {
  background: var(--xc-ink); border-color: var(--xc-ink); color: var(--xc-surface);
}
body[data-page] .button.primary:hover, body[data-page] .button.dark:hover,
.discover-intro .discovery-search .button:hover, .channel-page .co-button-dark:hover,
.welcome-header .button:hover, .hero .button:hover, .closing-section .button:hover {
  background: var(--xc-hover); border-color: var(--xc-hover); color: var(--xc-surface);
  box-shadow: 0 4px 10px rgb(34 35 33 / 12%);
}
body .button:disabled, body .button[aria-disabled=true], body .co-button:disabled {
  background: var(--xc-wash); border-color: var(--xc-line); color: var(--xc-muted);
  box-shadow: none; transform: none; filter: none; opacity: .7; cursor: not-allowed;
}
body input::placeholder, body textarea::placeholder { color: var(--xc-muted); opacity: 1; }
body input[type=checkbox], body input[type=radio], body progress { accent-color: var(--xc-ink); }
body input:focus, body textarea:focus, body select:focus,
body :is(a,button,input,textarea,select,summary,[tabindex]):focus-visible {
  outline: 2px solid var(--xc-copper); outline-offset: 3px;
}
body input:focus, body textarea:focus, body select:focus { border-color: var(--xc-copper); }
.discover-intro .discovery-search:focus-within, .channel-search:focus-within,
.search-bar:focus-within { border-color: var(--xc-copper); box-shadow: 0 0 0 3px rgb(168 96 61 / 10%); }
body .discovery-search input:focus, body .channel-search input:focus, body .search-bar input:focus { outline: none; }
body [aria-invalid=true], body [aria-invalid=true]:focus { border-color: var(--error); }
body [aria-invalid=true]:focus { outline-color: var(--error); }
.form-message:not(:empty) { color: var(--xc-text); background: var(--xc-wash); }
.form-message.success:not(:empty) { color: #32644b; background: #edf4ef; }
.form-message.error:not(:empty) { color: var(--error); background: var(--error-surface); }
.channel-status.error { color: var(--error); background: var(--error-surface); }
.spinner { border-top-color: var(--xc-copper); }

/* Thin copper indicators carry selection without flooding the interface. */
.site-header .desktop-nav > a[aria-current=page]:after,
.desktop-links a:after, .desktop-links .nav-opc:after { background: var(--xc-copper); }
.site-header .desktop-nav > a { position: relative; }
.site-header .desktop-nav > a[aria-current=page]:after { content: ""; position: absolute; }
.discover-tabs, .channel-tabs { padding-bottom: 0; border-color: var(--xc-line); }
.discover-tabs a, .channel-tabs a { border-radius: 0; border-bottom: 2px solid transparent; }
.discover-tabs a:hover, .channel-tabs a:hover { color: var(--xc-ink); background: var(--xc-wash); }
.discover-tabs a[aria-current], .channel-tabs a[aria-current] {
  color: var(--xc-ink); background: transparent; border-bottom-color: var(--xc-copper);
}
body .content-tabs a[aria-current], body .discovery-categories a[aria-current],
body[data-page="/market"] .fn-browse-controls .content-tabs a[aria-current],
.channel-page .co-work-tabs button[aria-selected=true] {
  color: var(--xc-ink); background: transparent; border-bottom-color: var(--xc-copper);
}
.mobile-bottom-nav a[aria-current], .mobile-nav a[aria-current] {
  color: var(--xc-ink); background: var(--xc-wash); box-shadow: inset 0 -2px var(--xc-copper);
}
.admin-sidebar nav .selected { color: var(--xc-ink); background: var(--xc-wash); box-shadow: inset 3px 0 var(--xc-copper); }
.channel-page .co-project-picker > a[aria-current] { background: var(--xc-surface); border-color: var(--xc-copper); }
.channel-page .co-project-picker > a[aria-current] :is(strong,span,small) { color: var(--xc-ink); }
.co-paper-diagram i:last-child { background: var(--xc-copper); }

/* Welcome: retain the approved deck, wheel and moving interest indicator. */
.sheet-opc { --card-paper: #e2e2e4; }
.sheet-explore { --card-paper: #343436; --xc-ink: #f5f5f5; --xc-text: #d1d1d4; --xc-line: #626266; --ink: var(--xc-ink); color: var(--xc-ink); }
.nav-opc span, .nav-resource span.opc-nav-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 32px; padding-inline: 16px; border: 1px solid var(--xc-line);
  border-radius: 8px; background: linear-gradient(#f7f6f2, #e8e9e3);
  color: var(--xc-ink); font-size: 14px; font-weight: 600; letter-spacing: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "Microsoft YaHei", sans-serif;
  line-height: 1.3; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 85%), inset 0 -1px 0 rgb(34 35 33 / 18%), 0 1px 2px rgb(34 35 33 / 10%);
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.nav-opc:hover span, .nav-resource:hover .opc-nav-badge {
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 90%), inset 0 -1px 0 rgb(34 35 33 / 18%), 0 2px 4px rgb(34 35 33 / 13%);
}
.nav-opc:hover span, .nav-opc[aria-current=location] span,
.nav-resource:hover .opc-nav-badge, .nav-resource[aria-current=page] .opc-nav-badge {
  background: var(--xc-wash); border-color: var(--xc-field);
}
.site-header .desktop-nav { align-self: stretch; align-items: stretch; }
.site-header .desktop-nav > a { display: flex; align-items: center; justify-content: center; }
.site-header .desktop-nav > a.nav-resource { padding-block: 4px; gap: 2px; }
.site-header .desktop-nav > a[aria-current=page]:after { bottom: 0; }
.interest-tab-indicator { border-color: var(--xc-line); box-shadow: inset 3px 0 var(--xc-copper), 0 9px 22px -18px rgb(34 35 33 / 20%); }
.experience-tabs button[aria-selected=true] .interest-tab-icon { color: var(--xc-copper-text); background: var(--xc-copper-wash); border-color: #dac4b7; }
.cover-notes, .cover-project { background: var(--xc-wash); }
.note-report b:last-child { background: var(--xc-copper); }
.cover-conversation { background: var(--xc-copper-wash); }
.conversation-question { color: var(--xc-copper); border-color: #dac4b7; }
.conversation-reply { background: #e6d8cc; border-color: #cbb4a3; }
.conversation-reply span, .cover-conversation .cover-caption { color: var(--xc-copper-text); }
.community-wheel:focus-visible { outline: none; }
.community-wheel:focus-visible .community-card.is-current,
.idea-sheet:focus-visible .sheet-face { outline: 2px solid var(--xc-copper); outline-offset: 5px; }
@media(max-width:600px) {
  .experience-tabs button[aria-selected=true] { color: var(--xc-ink); background: var(--xc-surface); border-color: var(--xc-line); box-shadow: inset 0 -2px var(--xc-copper); }
  .discover-tabs a, .channel-tabs a { padding-bottom: 13px; }
}
@media(prefers-reduced-motion:reduce) {
  body[data-page] .button:hover, .co-button:hover { transform: none; }
}

/* Shared selection feedback for discovery and all channel navigation. */
.discover-tabs a,.channel-tabs a,.square-order a{position:relative}
.discover-tabs a[aria-current],.channel-tabs a[aria-current],body .square-order a[aria-current]{border-bottom-color:transparent}
.discover-tabs a[aria-current]:after,.channel-tabs a[aria-current]:after,.square-order a[aria-current]:after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--xc-copper);transform-origin:center;animation:xc-selection .24s cubic-bezier(.22,.8,.24,1)}
body[data-page] .button:active{transform:translateY(1px) scale(.98)}
@keyframes xc-selection{from{transform:scaleX(.35);opacity:.4}to{transform:scaleX(1);opacity:1}}
@media(prefers-reduced-motion:reduce){.discover-tabs a[aria-current]:after,.channel-tabs a[aria-current]:after,.square-order a[aria-current]:after{animation:none}body[data-page] .button:active{transform:none}}