/* LeaderLink theme tokens — light is the long-standing palette (values are
   byte-identical to the old hard-coded colours), dark overrides them.
   Preference: <html data-theme="light|dark">, or none = follow the system
   (theme.js sets it before first paint). Sign artwork previews, proofs and
   thumbnails never use these tokens — they show printed output. */
:root {
  color-scheme: light;
  --bg:             #F7F7FB;   /* page */
  --surface:        #ffffff;   /* cards, panels, inputs */
  --surface-2:      #f3f4f6;   /* subtle fills, table heads, hover rows */
  --border:         #e5e7eb;
  --border-strong:  #d1d5db;
  --text:           #14132A;
  --text-2:         #374151;
  --text-muted:     #6b7280;
  --text-faint:     #9ca3af;
  --accent:         #6C5CE7;
  --accent-hover:   #4A3BC4;
  --accent-soft:    #F1EFFE;   /* brand tint fills */
  --accent-border:  #c7d2fe;
  --accent-text:    #4f46e5;
  --ok-soft:        #dcfce7;
  --ok-text:        #166534;
  --warn-soft:      #fef3c7;
  --warn-text:      #92400e;
  --danger-soft:    #fee2e2;
  --danger-text:    #b91c1c;
  --shadow:         0 1px 8px rgba(0,0,0,.08);
  --overlay:        rgba(20,19,42,.45);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:             #0f1117;
  --surface:        #181b25;
  --surface-2:      #222634;
  --border:         #2d3142;
  --border-strong:  #3d4257;
  --text:           #e8e9f0;
  --text-2:         #c6c9d6;
  --text-muted:     #9a9db0;
  --text-faint:     #7c8095;
  --accent:         #7f70f2;
  --accent-hover:   #9a8ef6;
  --accent-soft:    #27254a;
  --accent-border:  #4e4a8f;
  --accent-text:    #b4abff;
  --ok-soft:        #16301f;
  --ok-text:        #7fe0a3;
  --warn-soft:      #3a2a0c;
  --warn-text:      #f3c56b;
  --danger-soft:    #3b1c1c;
  --danger-text:    #ff8a8a;
  --shadow:         0 1px 8px rgba(0,0,0,.45);
  --overlay:        rgba(0,0,0,.6);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg:             #0f1117;
    --surface:        #181b25;
    --surface-2:      #222634;
    --border:         #2d3142;
    --border-strong:  #3d4257;
    --text:           #e8e9f0;
    --text-2:         #c6c9d6;
    --text-muted:     #9a9db0;
    --text-faint:     #7c8095;
    --accent:         #7f70f2;
    --accent-hover:   #9a8ef6;
    --accent-soft:    #27254a;
    --accent-border:  #4e4a8f;
    --accent-text:    #b4abff;
    --ok-soft:        #16301f;
    --ok-text:        #7fe0a3;
    --warn-soft:      #3a2a0c;
    --warn-text:      #f3c56b;
    --danger-soft:    #3b1c1c;
    --danger-text:    #ff8a8a;
    --shadow:         0 1px 8px rgba(0,0,0,.45);
    --overlay:        rgba(0,0,0,.6);
  }
}

/* Bare form controls (no page class) take the browser's default chrome;
   in dark mode give them the panel palette so they match styled ones.
   Light mode is left exactly as before. */
/* zero specificity via :where() — any page rule, however light, wins */
:where(:root[data-theme="dark"]) :where(input:not([type=checkbox], [type=radio], [type=range], [type=file]), select, textarea) {
  background-color: var(--surface-2); color: var(--text); border: 1px solid var(--border-strong);
}
@media (prefers-color-scheme: dark) {
  :where(:root:not([data-theme="light"])) :where(input:not([type=checkbox], [type=radio], [type=range], [type=file]), select, textarea) {
    background-color: var(--surface-2); color: var(--text); border: 1px solid var(--border-strong);
  }
}

/* Theme switch (System / Light / Dark) — injected by theme.js */
.ll-theme {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 2px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border);
  font: 500 12px/1 "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.ll-theme.ll-theme--on-dark { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); }
.ll-theme button {
  appearance: none; border: 0; background: transparent; color: var(--text-muted);
  width: 26px; height: 22px; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.ll-theme.ll-theme--on-dark button { color: #9a9db0; }
.ll-theme button svg { width: 14px; height: 14px; display: block; }
.ll-theme button:hover { color: var(--text); }
.ll-theme.ll-theme--on-dark button:hover { color: #fff; }
.ll-theme button[aria-pressed="true"] { background: var(--surface); color: var(--accent); box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.ll-theme.ll-theme--on-dark button[aria-pressed="true"] { background: rgba(255,255,255,.14); color: #fff; }
.ll-theme--corner { position: fixed; right: 14px; bottom: 14px; z-index: 50; box-shadow: var(--shadow); }