/* Accent colors (Settings → Color) and background palettes (Settings → Background).
   Each pair has a light and a dark variant; the base values live in styles.css. */

:root[data-accent="blue"]   { --accent: #2F6FB5; --accent-ink: #1F5A99; --accent-soft: #E3EEFB; }
:root[data-accent="purple"] { --accent: #6B5BC7; --accent-ink: #4F43A3; --accent-soft: #ECE9FA; }
:root[data-accent="rose"]   { --accent: #C2456F; --accent-ink: #9E3359; --accent-soft: #FBE7EE; }
:root[data-accent="orange"] { --accent: #D2691E; --accent-ink: #A85216; --accent-soft: #FBEADF; }
:root[data-accent="teal"]   { --accent: #1E8E8E; --accent-ink: #146E6E; --accent-soft: #DFF3F3; }
:root[data-accent="navy"]   { --accent: #334E8C; --accent-ink: #283E70; --accent-soft: #E4E9F6; }
:root[data-theme="dark"][data-accent="blue"]   { --accent: #6FA8E8; --accent-ink: #A9CBF2; --accent-soft: #163152; }
:root[data-theme="dark"][data-accent="purple"] { --accent: #A79BEA; --accent-ink: #C9C1F4; --accent-soft: #2A2356; }
:root[data-theme="dark"][data-accent="rose"]   { --accent: #E58BAA; --accent-ink: #F2B6CA; --accent-soft: #4A1E2E; }
:root[data-theme="dark"][data-accent="orange"] { --accent: #F0A066; --accent-ink: #F7C499; --accent-soft: #4A2A14; }
:root[data-theme="dark"][data-accent="teal"]   { --accent: #5FC9C9; --accent-ink: #9FE0E0; --accent-soft: #113A3A; }
:root[data-theme="dark"][data-accent="navy"]   { --accent: #8FA6E0; --accent-ink: #B9C8EE; --accent-soft: #1E2A4A; }

:root[data-palette="cool"]  { --bg: #F3F5F7; --card: #FFFFFF; --card-sub: #E8ECF0; --text: #1B1F24; --text-mid: #3F4852; --text-low: #66707B; --line: #D5DBE2; }
:root[data-palette="paper"] { --bg: #FFFFFF; --card: #FFFFFF; --card-sub: #F2F2F2; --text: #000000; --text-mid: #222222; --text-low: #444444; --line: #BBBBBB; }
:root[data-palette="sand"]  { --bg: #EFE6D6; --card: #FBF6EC; --card-sub: #E6DAC4; --text: #2A2318; --text-mid: #4F4536; --text-low: #6F6552; --line: #D2C5AC; }
:root[data-palette="mist"]  { --bg: #EEF1EE; --card: #FAFBFA; --card-sub: #E1E6E1; --text: #1E241F; --text-mid: #434C45; --text-low: #66706A; --line: #CED6CF; }
:root[data-theme="dark"][data-palette="cool"]  { --bg: #121417; --card: #1B1F24; --card-sub: #252B32; --text: #F3F5F7; --text-mid: #C9D0D8; --text-low: #9AA4AF; --line: #353C45; }
:root[data-theme="dark"][data-palette="paper"] { --bg: #000000; --card: #121212; --card-sub: #1E1E1E; --text: #FFFFFF; --text-mid: #E6E6E6; --text-low: #BDBDBD; --line: #444444; }
:root[data-theme="dark"][data-palette="sand"]  { --bg: #1A150E; --card: #251F15; --card-sub: #30281C; --text: #F3EBDD; --text-mid: #D6CBB6; --text-low: #ADA28C; --line: #3F3628; }
:root[data-theme="dark"][data-palette="mist"]  { --bg: #111412; --card: #1A1F1B; --card-sub: #242A26; --text: #EEF1EE; --text-mid: #C6CDC7; --text-low: #98A29B; --line: #333B35; }

/* Settings controls */
.swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.swatch { width: 60px; height: 60px; border-radius: 50%; border: 3px solid transparent; padding: 0; background: var(--sw); position: relative; }
.swatch[aria-checked="true"] { border-color: var(--text); }
.swatch[aria-checked="true"]::after { content: "\2713"; color: #fff; font-size: 28px; font-weight: 700; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.palettes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.palette { border: 3px solid var(--line); border-radius: 14px; padding: 8px 6px; background: var(--pb); color: var(--pt); font-size: 17px; font-weight: 600; text-align: center; min-height: 64px; }
.palette[aria-checked="true"] { border-color: var(--accent); }
.palette .chip { display: block; height: 14px; border-radius: 6px; background: var(--pc); margin-bottom: 6px; }