/* proco. Universal UI system — preview only
   Shared design tokens and component geometry across public, workspace, billing and admin screens.
   Theme mode changes surfaces and text, never the brand identity. */
:root {
  color-scheme: light;
  --proco-brand: #285b45;
  --proco-primary: #176B57;
  --proco-primary-hover: #125644;
  --proco-primary-pressed: #0f493b;
  --proco-page: #f7f8f4;
  --proco-surface: #ffffff;
  --proco-surface-soft: #f1f4ef;
  --proco-text: #202a24;
  --proco-muted: #68756d;
  --proco-border: #dfe5de;
  --proco-focus: #7eb6a2;
  --proco-radius-sm: 8px;
  --proco-radius-md: 12px;
  --proco-radius-lg: 16px;
  --proco-shadow: 0 2px 10px rgb(24 45 33 / 5%);
  --proco-control-height: 42px;
}
:root[data-theme="dark"], :root[data-mode="dark"], html[data-theme="dark"], html[data-mode="dark"], body[data-theme="dark"], body[data-mode="dark"],
.dark, .dark-mode, [data-color-mode="dark"] {
  color-scheme: dark;
  --proco-page: #111914;
  --proco-surface: #1a241d;
  --proco-surface-soft: #222e26;
  --proco-text: #edf2ed;
  --proco-muted: #a5b2a8;
  --proco-border: #344239;
  --proco-focus: #8bc6ad;
  --proco-shadow: 0 2px 12px rgb(0 0 0 / 18%);
}
html { color: var(--proco-text); }
body { background-color: var(--proco-page); color: var(--proco-text); }
button, input, select, textarea { font: inherit; }
button, .btn, a.btn, input, select, textarea, .panel, .stat, .card, .modalbox,
.theme-option, .quick button, .mini, .topicon, .nav, .pill {
  border-radius: var(--proco-radius-sm);
}
:where(button, .btn, a.btn, input, select, textarea, .theme-option, .mini, .topicon):focus-visible {
  outline: 3px solid var(--proco-focus);
  outline-offset: 2px;
}
:where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  min-height: var(--proco-control-height);
  background: var(--proco-surface);
  color: var(--proco-text);
  border: 1px solid var(--proco-border);
}
:where(input, select, textarea)::placeholder { color: var(--proco-muted); opacity: .85; }
:where(.btn.primary, .btn:not(.secondary):not(.outline):not(.danger), button.btn-primary,
  .primary-button, .button-primary, .action-primary, .btn-primary) {
  background: var(--proco-primary);
  color: #fff;
  border-color: var(--proco-primary);
  font-weight: 700;
  transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
:where(.btn.primary, .btn:not(.secondary):not(.outline):not(.danger), button.btn-primary,
  .primary-button, .button-primary, .action-primary, .btn-primary):hover {
  background: var(--proco-primary-hover);
  border-color: var(--proco-primary-hover);
}
:where(.btn.primary, .btn:not(.secondary):not(.outline):not(.danger), button.btn-primary,
  .primary-button, .button-primary, .action-primary, .btn-primary):active {
  background: var(--proco-primary-pressed);
  transform: translateY(0);
}
:where(.panel, .stat, .card, .summary, .modalbox, .theme-option) {
  background-color: var(--proco-surface);
  color: var(--proco-text);
  border-color: var(--proco-border);
  box-shadow: var(--proco-shadow);
}
:where(h1, h2, h3, h4, label, th, td, strong, b) { color: inherit; }
:where(p, small, .fine, .muted, .eyebrow, .copy small, .stat label) { color: var(--proco-muted); }
:where(hr, .rule) { border-color: var(--proco-border); }
:where(table th) { background: var(--proco-surface-soft); color: var(--proco-muted); }
:where(table td, th) { border-color: var(--proco-border); }
:where(.secondary, .btn.secondary, .btn.outline, .mini, .quick button) {
  background: var(--proco-surface-soft);
  color: var(--proco-text);
  border-color: var(--proco-border);
}
:where(.side, .mobile) { background: var(--proco-brand); }
:where(.nav.active, .nav:hover) { background-color: rgb(255 255 255 / 13%); }
:where(.notice, .profile > div, .actionicon, .healthbar) { background-color: var(--proco-surface-soft); }
:where(.pill.neutral) { background: var(--proco-surface-soft); color: var(--proco-muted); }
:where(.link) { color: var(--proco-primary); }
:where(.shade) { background: rgb(6 16 10 / 68%); }
:where(.modalbox) { border: 1px solid var(--proco-border); }
:where(.ring:before) { background: var(--proco-surface); }
:where(.topicon) { background: var(--proco-surface); color: var(--proco-muted); border-color: var(--proco-border); }
:where(.demo) { background: #e8f3eb; color: #285b45; border-color: #d2e5d7; }
:where(.welcome) { background: linear-gradient(115deg, #285b45, #176B57); color: #fff; }
:where(.welcome h2, .welcome p) { color: #fff; }
:where(.welcome p) { color: #e1eee5; }
:where(.logo-mark) { background: var(--proco-brand); }
:where(a) { text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}