/* Shared workbench palette. Pages opt in with body.work-ui; layout stays local. */
:root {
  --work-bg: #131519;
  --work-surface: #1a1d22;
  --work-surface-2: #22262e;
  --work-border: #383f4b;
  --work-text: #e6e8ed;
  --work-muted: #a5adba;
  --work-accent: #3f61cf;
  --work-accent-hover: #4d70dd;
  --work-accent-soft: #243359;
  --work-on-accent: #fff;
  --work-success: #8ed0b1;
  --work-warning: #e0bc78;
  --work-danger: #f3a0a7;
  --work-shadow: 0 12px 32px rgb(0 0 0 / 22%);
  --work-radius: 6px;
  --work-font: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

:root[data-work-theme="light"] {
  --work-bg: #f3f4f7;
  --work-surface: #fff;
  --work-surface-2: #eaedf2;
  --work-border: #cbd0da;
  --work-text: #202631;
  --work-muted: #586376;
  --work-accent: #3458c4;
  --work-accent-hover: #2848a8;
  --work-accent-soft: #e5ebff;
  --work-on-accent: #fff;
  --work-success: #23724e;
  --work-warning: #855913;
  --work-danger: #b52e3e;
  --work-shadow: 0 12px 32px rgb(25 35 55 / 10%);
}

body.work-ui {
  color-scheme: dark;
  color: var(--work-text);
  background: var(--work-bg);
  font-family: var(--work-font);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

:root[data-work-theme="light"] body.work-ui { color-scheme: light; }

body.work-ui *,
body.work-ui *::before,
body.work-ui *::after { box-sizing: border-box; }

body.work-ui ::selection {
  color: var(--work-on-accent);
  background: var(--work-accent);
}

body.work-ui :is(button, input, textarea, select) { font: inherit; }

body.work-ui button {
  color: var(--work-text);
  background: var(--work-surface-2);
  border: 1px solid var(--work-border);
  border-radius: 6px;
  cursor: pointer;
  line-height: 1.35;
}

body.work-ui button:hover:not(:disabled) { border-color: var(--work-muted); }

body.work-ui button:disabled {
  cursor: not-allowed;
  opacity: .6;
}

body.work-ui :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), textarea, select) {
  color: var(--work-text);
  background-color: var(--work-bg);
  border: 1px solid var(--work-border);
  border-radius: 6px;
}

body.work-ui :is(input, textarea)::placeholder {
  color: var(--work-muted);
  opacity: 1;
}

body.work-ui :is(input[type="checkbox"], input[type="radio"], input[type="range"]) {
  accent-color: var(--work-accent);
}

body.work-ui :is(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--work-muted);
  outline-offset: 3px;
}

body.work-ui .work-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 34px;
  padding: 7px 12px;
  color: var(--work-text);
  background: var(--work-surface-2);
  border: 1px solid var(--work-border);
  border-radius: 6px;
  font: inherit;
  font-weight: 500;
  line-height: 1.35;
  text-decoration: none;
  cursor: pointer;
}

body.work-ui :is(.work-button-primary, [data-work-theme-toggle][aria-pressed="true"]) {
  color: var(--work-on-accent);
  background: var(--work-accent);
  border-color: var(--work-accent);
}

body.work-ui .work-button-primary:hover:not(:disabled) {
  color: var(--work-on-accent);
  background: var(--work-accent-hover);
  border-color: var(--work-accent-hover);
}

body.work-ui .work-button-danger { color: var(--work-danger); }

body.work-ui .work-surface {
  color: var(--work-text);
  background: var(--work-surface);
  border: 1px solid var(--work-border);
  border-radius: var(--work-radius);
}

body.work-ui .work-muted { color: var(--work-muted); }

body.work-ui .work-mono {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}

body.work-ui .work-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Keep motion preferences predictable even on pages with existing animation. */
@media (prefers-reduced-motion: reduce) {
  body.work-ui,
  body.work-ui *,
  body.work-ui *::before,
  body.work-ui *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}