:root, :root[data-theme="blue"] { --accent: #1876ff; --theme-strong: #0763de; }
:root[data-theme="violet"] { --accent: #7356c9; --theme-strong: #5940a8; }
:root[data-theme="green"] { --accent: #087b68; --theme-strong: #056453; }
:root[data-theme="rose"] { --accent: #bf4771; --theme-strong: #a33158; }
:root[data-theme="graphite"] { --accent: #475569; --theme-strong: #334155; }
:root {
  --theme-soft: color-mix(in srgb, var(--accent) 8%, white);
  --theme-faint: color-mix(in srgb, var(--accent) 3%, white);
  --theme-line: color-mix(in srgb, var(--accent) 22%, white);
}
.settings-appearance { margin-top: 26px; }
.settings-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.settings-section-heading .settings-section-title { margin: 0; }
.settings-section-heading .text-button { color: var(--theme-strong); font-size: 11px; }
.theme-fieldset { border: 0; padding: 0; margin: 18px 0 0; min-width: 0; }
.theme-colors { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.theme-option { position: relative; display: flex; flex-direction: column; align-items: center; gap: 9px; margin: 0; padding: 12px 3px; border-radius: 12px; cursor: pointer; border: 1px solid transparent; color: var(--muted); }
.theme-option:hover { background: var(--soft); }
.theme-option:has(input:checked) { border-color: var(--theme-line); background: var(--theme-faint); color: var(--ink); }
.theme-option input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.theme-option:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
.theme-swatch { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--swatch-color); box-shadow: inset 0 0 0 1px #0000000a; pointer-events: none; }
.theme-option input:checked + .theme-swatch::after { content: ''; width: 9px; height: 5px; border: solid white; border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg); }
.theme-swatch-blue { --swatch-color: #1876ff; }
.theme-swatch-violet { --swatch-color: #7356c9; }
.theme-swatch-green { --swatch-color: #087b68; }
.theme-swatch-rose { --swatch-color: #bf4771; }
.theme-swatch-graphite { --swatch-color: #475569; }
.theme-label { font-size: 11px; white-space: nowrap; }
.theme-status { color: var(--quiet); font-size: 11px; margin-top: 15px; line-height: 1.8; }

/* One accent palette for navigation, controls and the workspace surfaces. */
body { background: var(--theme-faint); }
main { background: radial-gradient(ellipse at 65% 0%, #fff 20%, var(--theme-faint) 75%); }
.sidebar { background: linear-gradient(115deg, #fff 25%, var(--theme-faint) 100%); }
button:focus-visible, a:focus-visible, summary:focus-visible, .settings-legal-link:focus-visible, #legal-dialog button:focus-visible { outline-color: var(--accent); }
input:focus, textarea:focus { border-color: var(--theme-line); box-shadow: 0 0 0 3px var(--theme-soft); }
.nav-item:hover { background: var(--theme-faint); }
.nav-item.active { color: var(--theme-strong); background: var(--theme-soft); }
.nav-item.active::before { background: var(--accent); }
.nav-item.active .icon { color: var(--accent); }
.nav-item.active .home-icon { fill: var(--accent); stroke: var(--accent); }
.top-avatar { background: linear-gradient(140deg, color-mix(in srgb, var(--accent) 55%, white), var(--accent) 80%); }
.studio-hero h1 em, .studio-hero h1 > span { color: var(--accent); }
.panel-heading .blue-file { fill: color-mix(in srgb, var(--accent) 65%, white); background: var(--accent); }
.panel-heading .blue-user { fill: color-mix(in srgb, var(--accent) 55%, white); stroke: var(--accent); }
.keyword-chip { background: var(--theme-soft); color: color-mix(in srgb, var(--theme-strong) 70%, #202123); }
.keyword-chip button, .greeting-actions .copy-action { color: var(--theme-strong); }
.recommend-keywords .icon, .quiet-button:hover, .panel-heading h2 > .recent-icon { color: var(--accent); }
.keyword-tip { background: var(--theme-soft); }
.keyword-tip strong { color: var(--theme-strong); }
.jd-editor:focus-within { border-color: var(--theme-line); box-shadow: 0 0 0 2px var(--theme-faint); }
.jd-panel.drag-active { border-color: var(--accent); background: var(--theme-faint); }
.add-keyword:hover { background: var(--theme-faint); }
.add-keyword { border-color: var(--theme-line); }
.pill-options button.selected { border-color: var(--accent); background: var(--theme-faint); color: var(--theme-strong); }
.pill-options button:hover { background: var(--theme-soft); }
.generate-button { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 65%, white), var(--accent) 48%, var(--theme-strong)); box-shadow: 0 7px 13px color-mix(in srgb, var(--accent) 15%, transparent), inset 0 1px 1px #ffffff80; }
.generate-button:hover { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 80%, white), var(--theme-strong)); box-shadow: 0 9px 17px color-mix(in srgb, var(--accent) 22%, transparent); }
.primary-button { background: var(--accent); border-color: var(--accent); }
.primary-button:hover { background: var(--theme-strong); border-color: var(--theme-strong); }
.greeting-text:not([readonly]) { background: var(--theme-faint); outline-color: var(--theme-line); }
.greeting-actions button:hover { background: var(--theme-faint); border-color: var(--theme-line); }
.recommendations-heading h2 .icon { fill: color-mix(in srgb, var(--accent) 70%, white); color: var(--accent); }
.greeting-card.recommended { border-color: var(--accent); box-shadow: 0 0 0 1px var(--theme-soft); }
.greeting-number { color: var(--theme-strong); background: var(--theme-soft); }
.recommended .greeting-card-heading h3 { color: var(--theme-strong); }
.panel-heading .recent-icon, .template-card > .icon { color: var(--accent); }
.recent-item:hover { border-color: var(--theme-line); background: var(--theme-faint); }
.recent-item-icon, .green-pill { color: var(--theme-strong); background: var(--theme-soft); }
.notification-item.unread, .selected-template { background: var(--theme-faint); }
.selected-template { color: var(--theme-strong); }
.plan-card:not(.is-recommended) .plan-price strong, .plans-benefits-intro h2 .icon, .plans-information h2 .icon, .plans-instructions .text-button { color: var(--theme-strong); }
.plan-card:not(.is-recommended) .plan-icon, .plan-benefit > span, .assurance-icon { color: var(--accent); background: var(--theme-soft); }
.plan-card:not(.is-recommended) .plan-feature-list li > span { background: var(--theme-soft); color: var(--theme-strong); }
.plan-card:not(.is-recommended) .plan-buy { border-color: var(--accent); color: var(--theme-strong); background: var(--theme-faint); }
.plan-card:not(.is-recommended) .plan-buy:hover { background: var(--theme-soft); }

/* The decorative image shares the selected hue; the brand logo keeps its colors. */
:root[data-theme="violet"] .hero-art { filter: hue-rotate(35deg); }
:root[data-theme="green"] .hero-art { filter: hue-rotate(-65deg); }
:root[data-theme="rose"] .hero-art { filter: hue-rotate(110deg); }
:root[data-theme="graphite"] .hero-art { filter: grayscale(1); opacity: .4; }
@media (max-width: 370px) { .theme-colors { grid-template-columns: repeat(3, minmax(0, 1fr)); } }