/* Device-local presets. Neutral roles follow Radix Gray/Slate conventions;
   the supplied brand accent is constant, readable text uses a separate role. */
:root { --accent:#8C62FF; --accent-text:#6840c5; --accent-soft:#f1eaff; --on-accent:#fff; }
:root[data-theme="dark"] { --accent:#8C62FF; --accent-text:#c4acff; --accent-soft:#302443; --on-accent:#fff; }
:root[data-appearance="pearl"] {
  --bg:#f0f2f5; --surface:#fcfdff; --surface-raised:#f7f9fc; --surface-hover:#e9edf3;
  --line:#dce1e8; --line-strong:#bec7d3; --text:#202938; --muted:#536174; --faint:#68778b;
}
:root[data-appearance="sand"] {
  --bg:#f4f2ed; --surface:#fffdf8; --surface-raised:#f9f7f1; --surface-hover:#eeeae1;
  --line:#e1dcd1; --line-strong:#c9c1b3; --text:#302d27; --muted:#686157; --faint:#7b7366;
}
:root[data-appearance="black"] {
  --bg:#000; --surface:#101012; --surface-raised:#19191c; --surface-hover:#242427;
  --line:#303034; --line-strong:#47474e; --text:#f1f1f3; --muted:#bcbcc4; --faint:#a0a0aa;
}
:root[data-appearance="slate"] {
  --bg:#111113; --surface:#18191b; --surface-raised:#212225; --surface-hover:#272a2d;
  --line:#363a3f; --line-strong:#484e54; --text:#edeef0; --muted:#b0b4ba; --faint:#9ba1aa;
}
.workspace-brand__mark,.app-navigation__mark { background:transparent; border:0; }
.workspace-brand__mark img,.app-navigation__mark img { width:100%; height:100%; }
.button--primary,.icon-button--accent,.workspace-product .priority { color:var(--on-accent); }
.workspace-product .priority { background:var(--accent); }
.button--primary,.icon-button--accent { border-color:var(--accent); background:var(--accent); }
.appearance-settings { min-width:0; }
[data-manager-page="settings"] .appearance-settings { margin-bottom:16px; }
.appearance-options { border:0; margin:0; padding:0; display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:12px; max-width:1000px; }
.appearance-options legend { padding:0; margin-bottom:16px; font-size:1.15rem; font-weight:600; color:var(--text); }
.appearance-choice { position:relative; display:grid; gap:10px; cursor:pointer; min-width:0; }
.appearance-choice input { position:absolute; width:1px; height:1px; min-height:0; opacity:0; margin:0; }
.appearance-sample { --sample-bg:#f3f3f5; --sample-surface:#fff; --sample-line:#dedee3; --sample-text:#606067; display:flex; align-items:center; height:76px; padding:10px 10px 10px 26px; border:1px solid var(--line-strong); border-radius:8px; background:var(--sample-bg); transition:border-color 150ms ease; }
.appearance-sample[data-palette="dark"] { --sample-bg:#171719; --sample-surface:#1f1f22; --sample-line:#37373d; --sample-text:#b9b9c0; }
.appearance-sample[data-palette="black"] { --sample-bg:#000; --sample-surface:#101012; --sample-line:#303034; --sample-text:#bcbcc4; }
.appearance-sample[data-palette="slate"] { --sample-bg:#111113; --sample-surface:#18191b; --sample-line:#363a3f; --sample-text:#b0b4ba; }
.appearance-sample[data-palette="pearl"] { --sample-bg:#f0f2f5; --sample-surface:#fcfdff; --sample-line:#dce1e8; }
.appearance-sample[data-palette="sand"] { --sample-bg:#f4f2ed; --sample-surface:#fffdf8; --sample-line:#e1dcd1; }
.appearance-sample[data-palette="system"] { background:linear-gradient(90deg,#f3f3f5 50%,#171719 50%); }
.appearance-sample__pane { display:block; width:100%; height:52px; padding:10px; border:1px solid var(--sample-line); border-radius:4px; background:var(--sample-surface); }
.appearance-sample__line { display:block; width:65%; height:4px; border-radius:2px; background:#8C62FF; box-shadow:0 10px var(--sample-line),0 20px var(--sample-line); }
.appearance-choice input:checked+.appearance-sample { border-color:var(--accent); }
.appearance-choice input:focus-visible+.appearance-sample { outline:2px solid var(--accent); outline-offset:3px; }
.appearance-choice__caption { font-size:.9231rem; color:var(--muted); text-align:center; }
.appearance-choice input:checked~.appearance-choice__caption { color:var(--accent-text); font-weight:600; }
@media(min-width:621px) and (max-width:900px) { .appearance-options { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media(max-width:620px) { .appearance-options { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(prefers-reduced-motion:reduce) { .appearance-sample { transition:none; } }
