/* DTC Lab · Xinmidi warm brand accents + Klein blue.
   Reference: WayToGlobal/assets/img/m-logo-nav.png and site brand tokens.
   This theme changes UI only; source image assets are not modified or recoloured. */
:root {
  --brand-orange: #F0782D;
  --brand-red: #E23E2B;
  --brand-yellow: #FFB45B;
  --brand-deep-red: #A31621;
  --klein: #002FA7;
  --klein-hover: #002383;
  --blue-tint: #EDF1FF;
  --blue-line: #CCD6F4;
  --orange-tint: #FFF0E3;
  --orange-ink: #954315;
  --yellow-tint: #FFF2D8;
  --yellow-ink: #7B4914;
  --ink: #17130E;
  --text: #48443E;
  --muted: #6B665F;
  --line: #DEDAD3;
  --line-strong: #C6C1B9;
  --paper: #FAF7F2;
  --surface: #FFFFFF;
  --soft: #F1EDE6;
  --lime: var(--brand-orange);
  --forest: #10265A;
}
body { background: var(--paper); }
.header { background: #fffffffa; border-bottom-color: var(--line); }
.logo { color: var(--ink); }
.logo-box { color: var(--klein); border-color: var(--klein); }
.logo-box>span { color: var(--brand-red); }
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible { outline-color: var(--klein); }
::selection { color: var(--klein); background: #DCE5FF; }

/* Primary actions and navigation. */
.dark { background: var(--klein); color: #fff; }
.dark:hover { background: var(--klein-hover); }
.light { background: var(--surface); border-color: var(--line-strong); color: var(--klein); }
.light:hover { background: var(--blue-tint); border-color: var(--blue-line); }
.nav-link,.quiet-button,.type-tab,.directory-views button,.works-filters button { color: var(--muted); }
.nav-link:hover,.nav-link.active,.type-tab.active,.directory-views button.active,.works-filters button.active,.section-nav .active { color: var(--klein); }
.nav-link.active:after,.type-tab.active:after { background: var(--klein); }
.directory-views button.active,.works-filters button.active { border-bottom-color: var(--klein); }
.section-nav { color: var(--muted); }
.eyebrow,.article-kicker { color: var(--klein); }
.signal { background: var(--brand-red); }
.save-button,.post-bottom .save-button { color: var(--muted); }
.save-button[aria-pressed=true],.post-bottom .save-button[aria-pressed=true] { color: var(--klein); }
.save-button[aria-pressed=true] svg { fill: var(--blue-tint); }

/* Reading text: warm neutral rather than the previous green-grey. */
.post-description,.card-description,.work-copy>p,.creator-notes p,.visual-detail-info p,.article-body,.article-lede,.modal-intro,.about-copy p,.article-aside p,.field,.share-box p,.editor-intro p,.creator-intro,.creator-subsection p,.qr-panel p { color: var(--text); }
.article-body strong { color: var(--ink); }
.saved-count,.intro-note,.community-layout .content-status,.feed-summary,.post-meta,.post-author,.post-bottom time,.card-meta,.byline,.work-author,.work-author>span:last-child,.work-availability,.creator-credit-note,.creator-profile-copy>p,.creator-profile-copy>p>span,.creator-profile-actions a,.creator-entry p,.creator-detail-byline>a,.creator-detail-byline>a>span:last-child,.creator-figure figcaption,.notes-heading>span,.creator-notes .quiet-copy,.creator-tools>span:first-child,.creator-side-heading>div>span,.creator-detail-aside>p,.visual-card-meta,.visual-card-author,.visual-card-author>span,.works-filters span,.works-result,.works-note,.visual-detail-meta,.visual-stage figcaption,.video-fallback,.breadcrumb,.article-state,.article-date,.article-author,.source-list small,.footer>div>p,.footer-links,.footer-links>span,.footer-note,.sidebar-about p,.topic-list button,.topic-list button span,.sidebar-section h2>span,.resource-link span,.editor-label,.local-state,.editor-sidebar h2,.editor-item small,.editor-form-heading>span,.editor-form .field small,.optional,.editor-footnote,.existing-article-note,.creator-details summary span,.empty p,.saved-notice small { color: var(--muted); }
.post-source,.post-author[href],.resource-link,.resource-link:hover,.sidebar-about button,.work-card-bottom>a,.work-author:hover,.creator-profile-actions button,.creator-directory-link,.source-action,.creator-archive-link,.more-creator a,.article-body a,.creator-detail-byline>a:hover,.visual-detail-meta a,.video-fallback a,.editor-actions>a,.saved-notice button,.work-availability .available { color: var(--klein); }

/* Small warm colour blocks echo the M mark; blue denotes interaction. */
.post-kind,.card-meta .kind { color: var(--orange-ink); background: var(--orange-tint); }
.post-kind.research { color: var(--orange-ink); background: var(--orange-tint); }
.post-kind.workflow { color: var(--klein); background: var(--blue-tint); }
.post-kind.work { color: var(--yellow-ink); background: var(--yellow-tint); }
.share-box { background: var(--orange-tint); border-color: #F0D1B8; }
.share-symbol,.creator-entry-symbol { color: var(--ink); background: var(--brand-orange); }
.share-box h2 { color: var(--ink); }
.topic-list button.active,.topic-chip.active,.directory-filters button.active { color: var(--klein); background: var(--blue-tint); border-color: var(--blue-line); }
.topic-list button:hover { background: #F3F1EC; }
.directory-filters button,.prompt-filter { color: var(--muted); }
.prompt-filter input { accent-color: var(--klein); }
.creator-initial,.author-mark { color: var(--orange-ink); background: var(--orange-tint); border-color: #EBCDB5; }
.creator-entry { background: var(--orange-tint); border-color: #F0D1B8; }
.creator-selection,.saved-notice { background: var(--blue-tint); color: var(--klein); }
.creator-selection button { color: var(--klein); }

/* Image frames are neutral; no filters or colour overlays on artwork. */
.post-image,.work-preview,.creator-profile-images,.creator-main-image,.visual-preview,.visual-stage img,.card-cover,.content-card.text-card { background: var(--soft); }
.visual-preview.is-video,.visual-stage>video,.visual-placeholder { background: #0D1D44; }
.work-medium,.post-image-label,.cover-badge,.visual-label { background: #17130EBD; color: #fff; }
.work-open,.visual-expand,.cover-arrow { background: #fffffff0; color: var(--klein); }
.play-mark { background: #002FA7D9; color: #fff; border-color: #ffffffba; }
.visual-watch,.film-action,.image-original>span,.creator-main-image>span { background: #002FA7E8; color: #fff; }
.media-unavailable { color: var(--muted); background: var(--soft); }

/* Notes, forms and empty states. */
.prompt-box,.article-body pre,.article-body th,.directory-search,.works-search { background: #F0F3FD; border-color: var(--blue-line); }
.prompt-box pre,.article-body pre { color: #263A70; }
.prompt-box button { color: var(--klein); border-color: var(--blue-line); background: #fff; }
.tool-name { color: var(--text); border-color: var(--line); background: var(--surface); }
.article-body blockquote { color: var(--text); background: var(--orange-tint); border-left-color: var(--brand-orange); }
.work-availability>span+span,.article-state { border-color: var(--line); }
.creator-detail-aside,.creator-profile-card,.empty,.creator-details,.editor-form,.modal { border-color: var(--line); }
.directory-search svg,.works-search svg,.inline-search,.empty>span,.work-process summary>span { color: var(--muted); }
.directory-search input,.works-search input,.inline-search input { color: var(--ink); }
input::placeholder,textarea::placeholder { color: var(--muted); opacity: 1; }
.field input,.field textarea,.field select { background: var(--surface); border-color: var(--line-strong); }
#mobile-topic { background: var(--surface); border-color: var(--line-strong); color: var(--text); }
.local-state { background: var(--surface); border-color: var(--line); }
.editor-form { background: var(--surface); }
.editor-item,.editor-form-heading,.creator-details[open] summary,.creator-subsection { border-color: var(--line); }
.editor-item.active { background: var(--blue-tint); }
.editor-item:hover { background: var(--soft); }
.editor-message { color: var(--klein); }
.editor-message.error { color: var(--brand-deep-red); }
.creator-fields .existing-media-note { border-color: #F0D1B8; background: var(--orange-tint); color: var(--orange-ink); }
.prompt-unshared textarea { background: #F7F6F3 !important; }
.modal { background: var(--surface); box-shadow: 0 20px 90px #17130E26; }
.modal::backdrop { background: #151C3485; }
.toast { background: var(--klein); color: #fff; }
@media(min-width:601px) { .directory-search,.works-search { background: transparent; } }
.creator-details.visual-work-mode { border-color: #F0D1B8; }
.creator-details.visual-work-mode summary { background: var(--orange-tint); }

.result-count { color: var(--muted); }
@media(max-width:600px) { .community-layout .inline-search { background: var(--surface); } }