/* Shared visual tokens and controls. Color carries action or status meaning. */
:root {
  --paper: #f5f6f8;
  --surface: #ffffff;
  --surface-subtle: #f8fafb;
  --ink: #24303e;
  --muted: #626f7e;
  --line: #e1e6ec;
  --accent: #176b60;
  --accent-hover: #10564d;
  --accent-soft: #eaf4f1;
  --review: #365f9a;
  --review-soft: #edf3fc;
  --orange: #946014;
  --orange-light: #fff6e5;
  --red: #ad3e41;
  --red-light: #fdf0f0;
  --green: var(--accent);
  --green-light: var(--accent-soft);
  --lime: #ffffff;
  --radius: 8px;
  font-family: "Segoe UI", Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink);
  background: var(--paper);
}

body { font-size: 14px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: var(--accent); }
a:hover { color: var(--accent-hover); }
h1, h2, h3, h4 { color: var(--ink); letter-spacing: -.025em; }
h1 { font-weight: 650; }
h2, h3 { font-weight: 600; }
.muted, .small.muted, .locale { color: var(--muted); }
code, kbd { background: #f0f3f6; color: #566273; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: #d6eae4; color: #173f38; }

/* Primary actions stay distinct from quiet, reversible controls. */
.button, .button-secondary, .button-quiet, .button-danger {
  min-height: 36px;
  padding: 7px 13px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}
.button { color: white; background: var(--accent); border-color: var(--accent); }
.button:hover { color: white; background: var(--accent-hover); border-color: var(--accent-hover); }
.button-secondary { color: #3e4b5c; background: white; border-color: #d3dbe4; }
.button-secondary:hover { color: var(--ink); background: #f3f6f8; border-color: #b9c6d2; }
.button-quiet { color: var(--muted); background: transparent; }
.button-quiet:hover { color: var(--ink); background: #edf1f5; }
.button-danger { color: var(--red); background: var(--red-light); border-color: #efcfd0; }
.button-danger:hover { background: #f9e2e3; color: #8f2b2e; }
.button.small, .button-secondary.small, .button-quiet.small, .button-danger.small {
  min-height: 30px;
  padding: 5px 9px;
  font-size: 12px;
}
.button-row { gap: 8px; }
button:disabled { opacity: .5; cursor: not-allowed; }
button.button:disabled { color: #748190; background: #edf1f4; border-color: #dbe2e8; opacity: 1; }

/* Neutral fields, with a clear focus treatment. */
.input, textarea, select, input[type=text], input[type=email], input[type=password],
input[type=number], input[type=search], input[type=url] {
  color: var(--ink);
  background: white;
  border-color: #cfd8e2;
  border-radius: 6px;
  font-size: 14px;
  padding: 8px 10px;
}
.input:focus, textarea:focus, select:focus, input:focus {
  border-color: var(--accent);
  outline: 2px solid #dceee8;
  outline-offset: 1px;
}
input::placeholder, textarea::placeholder { color: #86919f; }
.field { margin-bottom: 18px; }
.field label, .field-label { color: #425063; font-size: 12px; margin-bottom: 6px; }
.field .hint { color: var(--muted); font-size: 12px; margin-top: 6px; }
.field-grid { gap: 0 20px; }
.file-input { border-color: #c6d2dc; background: var(--surface-subtle); padding: 14px; }
.file-input::file-selector-button { color: #425063; border-color: #cfd8e2; background: white; padding: 6px 10px; }

/* Status is explicit in text; restrained color makes scanning faster. */
.badge {
  background: #f0f3f6;
  color: #5c6878;
  border-radius: 4px;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
}
.badge.active, .badge.current, .badge.reviewed, .badge.merged {
  background: var(--accent-soft);
  color: var(--accent);
}
.badge.missing, .badge.archived, .badge.draft, .badge.superseded, .badge.closed {
  background: #f0f3f6;
  color: #5f6c7c;
}
.badge.outdated, .badge.stale, .badge.conflict, .badge.retry {
  background: var(--orange-light);
  color: var(--orange);
}
.badge.review, .badge.reviewable, .badge.ready, .badge.frozen, .badge.queued, .badge.running, .badge.pr_open {
  background: var(--review-soft);
  color: var(--review);
}
.badge.suspended, .badge.deleting, .badge.failed, .badge.error, .badge.invalid {
  background: var(--red-light);
  color: var(--red);
}
.alert { color: var(--accent); background: var(--accent-soft); border: 1px solid #d4e8e1; border-left: 3px solid var(--accent); border-radius: 6px; }
.alert.info, .info-bar { color: #516174; background: #f0f4f8; border-color: #dce4ed; }
.alert.warning { color: #7e541b; background: var(--orange-light); border-color: #eddbb7; border-left-color: #be8b32; }
.alert.error { color: var(--red); background: var(--red-light); border-color: #efcfd0; border-left-color: var(--red); }
.alert a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.progress { height: 4px; background: #edf1f4; color: #54998d; }
.progress::-webkit-progress-bar { background: #edf1f4; }
.progress::-webkit-progress-value { background: #54998d; }
.progress::-moz-progress-bar { background: #54998d; }

/* Calm tables and consistent surfaces throughout administration. */
.panel, .table-wrap, .entry-list, .project-row, .empty-state { background: white; border-color: var(--line); border-radius: var(--radius); }
.panel { padding: 20px; }
.panel h2 { font-size: 17px; }
.panel-heading { padding-bottom: 12px; margin-bottom: 14px; }
th { color: #667383; background: var(--surface-subtle); font-size: 11px; font-weight: 600; padding: 11px 16px; }
td { padding: 14px 16px; color: #3a4758; }
td .subtext { color: var(--muted); font-size: 12px; }
tbody tr:hover td, .language-table tr:hover th[scope=row] { background: #fafcfd; }
.table-entry-key { color: #617080; }
.timeline-text, .memory-target, .memory-match .similar-target { background: var(--surface-subtle); border-color: var(--line); }
.timeline { border-color: var(--line); }
.timeline-item:before { background: #aab6c2; }
.danger-zone { background: #fffafa; border-color: #efd7d9; }
.danger-zone h3 { color: var(--red); }
.danger-zone p { color: #795c60; }
.form-layout aside .panel { background: var(--surface-subtle); color: var(--muted); }
.form-layout aside h3, .summary-card strong { color: var(--ink); }