:root {
  --cc-bg: #0b0e11;
  --cc-bg-deep: #080b0d;
  --cc-panel: #12171b;
  --cc-panel-raised: #171d21;
  --cc-line: #293139;
  --cc-line-strong: #3b474f;
  --cc-text: #edf1f3;
  --cc-muted: #8e99a2;
  --cc-subtle: #65717a;
  --cc-accent: #f14f45;
  --cc-accent-soft: #ff6257;
  --cc-success: #68c493;
  --cc-knowledge: #d6a85a;
  --cc-play: #d5a94e;
  --cc-danger: #c9534c;
  --cc-radius-sm: 4px;
  --cc-radius-md: 6px;
  --cc-radius-lg: 10px;
  --cc-space-1: 4px;
  --cc-space-2: 8px;
  --cc-space-3: 12px;
  --cc-space-4: 18px;
  --cc-space-5: 24px;
  --cc-space-6: 32px;
  --cc-font-display: 'Barlow Condensed', sans-serif;
  --cc-font-body: Inter, system-ui, sans-serif;
  --cc-font-reading: Georgia, serif;
  --cc-shadow-soft: 0 12px 30px rgba(0, 0, 0, .18);
  --cc-transition: 160ms ease;
}

/* Existing page-specific selectors now consume the shared semantic palette. */
body:has(.home-shell), body:has(.auth-shell) {
  --home-bg: var(--cc-bg);
  --home-panel: var(--cc-panel);
  --home-line: var(--cc-line);
  --home-text: var(--cc-text);
  --home-muted: var(--cc-muted);
  --home-red: var(--cc-accent);
  --home-mint: var(--cc-success);
  --a-bg: var(--cc-bg);
  --a-panel: var(--cc-panel);
  --a-line: var(--cc-line);
  --a-text: var(--cc-text);
  --a-muted: var(--cc-muted);
  --a-red: var(--cc-accent);
}

body:has(.task-shell), body:has(.habit-shell), body:has(.workspace-form) {
  --task-bg: var(--cc-bg);
  --task-panel: var(--cc-panel);
  --task-line: var(--cc-line);
  --task-text: var(--cc-text);
  --task-muted: var(--cc-muted);
}

.site-wayfinder-trail {
  align-items: center;
  color: var(--cc-muted);
  display: flex;
  font: 700 9px/1 var(--cc-font-body);
  gap: var(--cc-space-2);
  letter-spacing: 1.3px;
  margin: 0 auto 0;
  max-width: 1320px;
  padding: var(--cc-space-2) 5vw;
  text-transform: uppercase;
}
.site-wayfinder-trail a { color: var(--cc-play); text-decoration: none; }
.site-wayfinder-trail a:hover { color: var(--cc-accent-soft); }
.wayfinder-context { align-items: baseline; display: flex; gap: var(--cc-space-2); padding: var(--cc-space-5) 2vw 0; position: relative; z-index: 2; }
.wayfinder-context span { color: var(--cc-subtle); font: 700 8px/1 var(--cc-font-body); letter-spacing: 1.6px; }
.wayfinder-context strong { color: var(--cc-play); font: 700 10px/1 var(--cc-font-body); letter-spacing: 1.8px; }
.wayfinder-mode-label { color: var(--cc-play); display: block; font: 700 9px/1 var(--cc-font-body); letter-spacing: 1.8px; margin-bottom: var(--cc-space-3); text-transform: uppercase; }
body:has(.universe-shell) .site-wayfinder-trail { background: var(--night); max-width: none; }
body:has(.wayfinder-shell) .site-wayfinder-trail,
body:has(.game-table) .site-wayfinder-trail { background: var(--night); color: #b8b8b0; max-width: none; }

body:has(.ws-shell) {
  --w-bg: var(--cc-bg);
  --w-side: var(--cc-bg-deep);
  --w-panel: var(--cc-panel);
  --w-line: var(--cc-line);
  --w-text: var(--cc-text);
  --w-muted: var(--cc-muted);
  --w-accent: var(--cc-knowledge);
}

body:has(.dota-shell), body:has(.dota-dashboard) {
  --bg: var(--cc-bg-deep);
  --panel: var(--cc-panel);
  --line: var(--cc-line);
  --ink: var(--cc-text);
  --muted: var(--cc-muted);
  --red: var(--cc-accent);
  --green: var(--cc-success);
  --amber: var(--cc-knowledge);
}

/* Wayfinder keeps its parchment/rust expression, while its outer night surface
   and spacing remain anchored to the command-center contract. */
body:has(.wayfinder-shell), body:has(.game-table) {
  --night: var(--cc-bg-deep);
  --rust: #b84f32;
  --gold: var(--cc-play);
}

/* Shared shell primitives use the same semantic roles on every surface. */
.site-header {
  background: var(--cc-bg) !important;
  border-color: var(--cc-line) !important;
}
.site-header a:focus-visible,
.site-header button:focus-visible,
.site-header input:focus-visible,
.site-header select:focus-visible {
  outline: 2px solid var(--cc-accent-soft);
  outline-offset: 3px;
}
body:has(.task-shell), body:has(.habit-shell), body:has(.workspace-form) {
  background: var(--cc-bg);
  color: var(--cc-text);
}
body:has(.task-shell) > header,
body:has(.habit-shell) > header,
body:has(.workspace-form) > header {
  background: var(--cc-bg) !important;
  border-color: var(--cc-line) !important;
}

/* Cross-surface interaction contract. Wayfinder canvas controls retain their
   own visual language; these rules cover the command-center shell surfaces. */
:root {
  --cc-control-height: 44px;
  --cc-focus: var(--cc-accent-soft);
  --cc-danger-soft: #ff8b83;
  --cc-success-soft: #86e0ba;
}

body:not(:has(.wayfinder-shell)):not(:has(.game-table)) :where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--cc-focus);
  outline-offset: 3px;
}

body:has(.wayfinder-shell) :where(a, button, input, select, textarea, summary):focus-visible,
body:has(.game-table) :where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--cc-play);
  outline-offset: 3px;
}

html, body { max-width: 100%; }
img, svg, video, canvas { max-width: 100%; }
main, main > div, .task-content, .ws-main, .life-shell, .wayfinder-shell, .game-table { min-width: 0; }

body:not(:has(.wayfinder-shell)):not(:has(.game-table)) :where(input, select, textarea):not([type="checkbox"]):not([type="radio"]) {
  min-height: var(--cc-control-height);
  border-radius: var(--cc-radius-sm);
}

body:not(:has(.wayfinder-shell)):not(:has(.game-table)) :where(button, .btn, [role="button"]) {
  min-height: var(--cc-control-height);
}

body:not(:has(.wayfinder-shell)):not(:has(.game-table)) {
  background: var(--cc-bg);
  color: var(--cc-text);
  font-family: var(--cc-font-body);
}

body:not(:has(.wayfinder-shell)):not(:has(.game-table)) :where(a, button, .btn, [role="button"]) {
  transition: background-color var(--cc-transition), border-color var(--cc-transition), color var(--cc-transition), transform var(--cc-transition);
}

body:not(:has(.wayfinder-shell)):not(:has(.game-table)) :where(a, button, .btn, [role="button"]):focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cc-focus) 28%, transparent);
  outline: 2px solid var(--cc-focus);
  outline-offset: 2px;
}

body:not(:has(.wayfinder-shell)):not(:has(.game-table)) :where(button, .btn, [role="button"]):not(:disabled):hover {
  transform: translateY(-1px);
}

body:not(:has(.wayfinder-shell)):not(:has(.game-table)) :where(input, select, textarea) {
  background: var(--cc-panel);
  border: 1px solid var(--cc-line-strong);
  color: var(--cc-text);
}

body:not(:has(.wayfinder-shell)):not(:has(.game-table)) :where(input, select, textarea)::placeholder {
  color: var(--cc-subtle);
}

body:not(:has(.wayfinder-shell)):not(:has(.game-table)) :where(input, select, textarea):hover {
  border-color: var(--cc-muted);
}

body:not(:has(.wayfinder-shell)):not(:has(.game-table)) :where(label, legend) {
  color: var(--cc-text);
}

body:not(:has(.wayfinder-shell)):not(:has(.game-table)) :where(.card, .panel, .life-panel, .ws-card, .auth-panel form, .form-card) {
  border-radius: var(--cc-radius-lg);
}

body:not(:has(.wayfinder-shell)):not(:has(.game-table)) :where(.btn-primary, .home-btn.primary, .auth-submit, .ws-primary, .cc-primary-action) {
  background: var(--cc-accent);
  border-color: var(--cc-accent);
  color: #fff;
}

body:not(:has(.wayfinder-shell)):not(:has(.game-table)) :where(.btn-primary, .home-btn.primary, .auth-submit, .ws-primary, .cc-primary-action):hover {
  background: var(--cc-accent-soft);
  border-color: var(--cc-accent-soft);
  color: #fff;
}

body:not(:has(.wayfinder-shell)):not(:has(.game-table)) :where(.form-control, .form-select):focus {
  background: var(--cc-panel-raised);
  border-color: var(--cc-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cc-focus) 22%, transparent);
  color: var(--cc-text);
}

:where(button, .btn, [role="button"]):disabled,
:where(input, select, textarea):disabled {
  cursor: not-allowed;
  opacity: .58;
}

.site-messages {
  margin: 0 auto var(--cc-space-5);
  max-width: 1320px;
}
.site-messages .alert {
  background: var(--cc-panel-raised);
  border: 1px solid var(--cc-line);
  border-radius: var(--cc-radius-sm);
  color: var(--cc-text);
}
.site-messages .alert-danger,
form .errorlist,
.invalid-feedback { color: var(--cc-danger-soft); }
form .errorlist { list-style: none; margin: var(--cc-space-2) 0 0; padding: 0; }

:where(.task-empty, .ws-zero, .empty, .ws-table-empty, .ws-kanban-empty, .ws-embed-missing) {
  background: color-mix(in srgb, var(--cc-panel) 72%, transparent);
  border: 1px dashed var(--cc-line-strong);
  border-radius: var(--cc-radius-sm);
  color: var(--cc-muted);
}

:where(.cc-empty, .cc-status, .cc-error, .cc-success) {
  border: 1px solid var(--cc-line);
  border-radius: var(--cc-radius-sm);
  color: var(--cc-muted);
  padding: var(--cc-space-4);
}
.cc-error { border-color: var(--cc-danger); color: var(--cc-danger-soft); }
.cc-success { border-color: var(--cc-success); color: var(--cc-success-soft); }
:where(.cc-primary-action, .cc-secondary-action, .cc-danger-action) {
  align-items: center;
  border-radius: var(--cc-radius-sm);
  display: inline-flex;
  justify-content: center;
  min-height: var(--cc-control-height);
  padding: .7rem 1rem;
  text-decoration: none;
  white-space: nowrap;
}
.cc-primary-action { background: var(--cc-accent); color: #fff; }
.cc-secondary-action { background: var(--cc-panel-raised); border: 1px solid var(--cc-line-strong); color: var(--cc-text); }
.cc-danger-action { background: transparent; border: 1px solid var(--cc-danger); color: var(--cc-danger-soft); }

:where(.delete-link, .danger-button, .btn-danger) {
  border-radius: var(--cc-radius-sm);
  display: inline-block;
  min-height: var(--cc-control-height);
  padding: .7rem 1rem;
}

@media (max-width: 700px) {
  .site-wayfinder-trail { padding-inline: 18px; }
  .site-messages { margin-inline: 18px; }
  body:has(.task-shell) .task-content { padding-inline: 18px; }
  body:has(.ws-shell) .ws-main { padding-inline: 18px; }
  .wayfinder-context { padding-inline: 18px; }
  :where(.cc-primary-action, .cc-secondary-action, .cc-danger-action) { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}