/* ============================================================
   Colour schemes — Settings → General → App Design
   :root[data-palette] is set by AppLayout (app.js). The default
   "teal" scheme has no block here: it is the token set in main.css.
   Each scheme overrides the colour tokens only (see main.css :root).
   Its dark block must re-set every token its light block sets, because
   both blocks out-rank main.css's :root[data-theme="dark"]. Surface and
   text greys are the default ones re-hued to the scheme (same lightness).
   Text colours (--cyan, --cyan-text, --lime) meet WCAG AA on the
   surfaces they sit on in both themes.
   ============================================================ */

/* Ocean — blue & amber */
:root[data-palette="ocean"] {
  /* surfaces tinted to the scheme hue (same lightness as default) */
  --bg-base: #f6f7f8; --bg-elevated: #eeeff1; --bg-hover: #e4e6e9;
  --border: #dde0e3; --border-hover: #c7cbd0; --glass-border: rgba(14, 21, 30, 0.08);
  --accent-rgb: 29, 95, 191;
  --fill-1: #2f74d6; --fill-2: #1d5fbf; --fill-3: #174c99; --fill-4: #10356b;
  --fill-rgb: 29, 95, 191;
  --accent2-rgb: 245, 158, 11; --accent2-light: #fbbf24;
  --cyan: #1d5fbf; --cyan-text: #174a94; --lime: #b4540a;
}
:root[data-palette="ocean"][data-theme="dark"] {
  /* surfaces tinted to the scheme hue (same lightness as default) */
  --bg-base: #0e1116; --bg-surface: #161a20; --bg-elevated: #1c2128;
  --bg-hover: #242a31; --border: #2c323b; --border-hover: #3a414b;
  --text-primary: #eaedf2; --text-secondary: #b9bfc6; --text-muted: #8f96a0;
  --glass-bg: rgba(28, 33, 40, 0.55); --glass-bg-strong: rgba(22, 26, 32, 0.82);
  --accent-rgb: 91, 156, 240;
  --cyan: #5b9cf0; --cyan-text: #8bb8f5; --lime: #f59e0b;
}

/* Violet — indigo & pink */
:root[data-palette="violet"] {
  /* surfaces tinted to the scheme hue (same lightness as default) */
  --bg-base: #f6f6f8; --bg-elevated: #efeef1; --bg-hover: #e5e4e9;
  --border: #dedde3; --border-hover: #c9c7d0; --glass-border: rgba(17, 14, 30, 0.08);
  --accent-rgb: 90, 62, 200;
  --fill-1: #6d52dc; --fill-2: #5a3ec8; --fill-3: #46309f; --fill-4: #2f2070;
  --fill-rgb: 90, 62, 200;
  --accent2-rgb: 236, 72, 153; --accent2-light: #f472b6;
  --cyan: #5a3ec8; --cyan-text: #452f9e; --lime: #be2673;
}
:root[data-palette="violet"][data-theme="dark"] {
  /* surfaces tinted to the scheme hue (same lightness as default) */
  --bg-base: #100e16; --bg-surface: #181620; --bg-elevated: #1e1c28;
  --bg-hover: #272431; --border: #2f2c3b; --border-hover: #3d3a4b;
  --text-primary: #eceaf2; --text-secondary: #bcb9c6; --text-muted: #928fa0;
  --glass-bg: rgba(30, 28, 40, 0.55); --glass-bg-strong: rgba(24, 22, 32, 0.82);
  --accent-rgb: 155, 135, 245;
  --cyan: #9b87f5; --cyan-text: #b9aaf8; --lime: #f472b6;
}

/* Forest — green & gold */
:root[data-palette="forest"] {
  /* surfaces tinted to the scheme hue (same lightness as default) */
  --bg-base: #f6f8f7; --bg-elevated: #eef1ef; --bg-hover: #e4e9e6;
  --border: #dde3e0; --border-hover: #c7d0cb; --glass-border: rgba(14, 30, 21, 0.08);
  --accent-rgb: 46, 125, 79;
  --fill-1: #3a9461; --fill-2: #2e7d4f; --fill-3: #23613d; --fill-4: #17432a;
  --fill-rgb: 46, 125, 79;
  --accent2-rgb: 234, 179, 8; --accent2-light: #facc15;
  --cyan: #2e7d4f; --cyan-text: #225e3b; --lime: #a16207;
}
:root[data-palette="forest"][data-theme="dark"] {
  /* surfaces tinted to the scheme hue (same lightness as default) */
  --bg-base: #0e1611; --bg-surface: #16201a; --bg-elevated: #1c2821;
  --bg-hover: #243129; --border: #2c3b32; --border-hover: #3a4b41;
  --text-primary: #eaf2ed; --text-secondary: #b9c6be; --text-muted: #8fa096;
  --glass-bg: rgba(28, 40, 33, 0.55); --glass-bg-strong: rgba(22, 32, 26, 0.82);
  --accent-rgb: 76, 194, 131;
  --cyan: #4cc283; --cyan-text: #7ad6a3; --lime: #eab308;
}

/* Sunset — rose & orange */
:root[data-palette="sunset"] {
  /* surfaces tinted to the scheme hue (same lightness as default) */
  --bg-base: #f8f6f7; --bg-elevated: #f1eeef; --bg-hover: #e9e4e5;
  --border: #e3dddf; --border-hover: #d0c7c9; --glass-border: rgba(29, 15, 18, 0.08);
  --accent-rgb: 192, 54, 90;
  --fill-1: #d4486c; --fill-2: #c0365a; --fill-3: #972a47; --fill-4: #6b1d32;
  --fill-rgb: 192, 54, 90;
  --accent2-rgb: 249, 115, 22; --accent2-light: #fb923c;
  --cyan: #c0365a; --cyan-text: #962a46; --lime: #c2410c;
}
:root[data-palette="sunset"][data-theme="dark"] {
  /* surfaces tinted to the scheme hue (same lightness as default) */
  --bg-base: #160e10; --bg-surface: #201619; --bg-elevated: #271d1f;
  --bg-hover: #302528; --border: #3a2d30; --border-hover: #4a3b3f;
  --text-primary: #f2eaec; --text-secondary: #c5babd; --text-muted: #9f9094;
  --glass-bg: rgba(39, 29, 31, 0.55); --glass-bg-strong: rgba(32, 22, 25, 0.82);
  --accent-rgb: 240, 112, 143;
  --cyan: #f0708f; --cyan-text: #f59ab0; --lime: #fb923c;
}

/* Graphite — slate & orange */
:root[data-palette="graphite"] {
  /* surfaces tinted to the scheme hue (same lightness as default) */
  --bg-base: #f6f7f8; --bg-elevated: #eeeff1; --bg-hover: #e5e6e8;
  --border: #dee0e2; --border-hover: #c8cbcf; --glass-border: rgba(16, 21, 28, 0.08);
  --accent-rgb: 51, 65, 85;
  --fill-1: #475569; --fill-2: #334155; --fill-3: #1e293b; --fill-4: #0f172a;
  --fill-rgb: 51, 65, 85;
  --accent2-rgb: 234, 88, 12; --accent2-light: #fb923c;
  --cyan: #334155; --cyan-text: #1e293b; --lime: #c2410c;
}
:root[data-palette="graphite"][data-theme="dark"] {
  /* surfaces tinted to the scheme hue (same lightness as default) */
  --bg-base: #0f1115; --bg-surface: #171a1f; --bg-elevated: #1e2126;
  --bg-hover: #262a2f; --border: #2e3339; --border-hover: #3c4149;
  --text-primary: #ebeef1; --text-secondary: #bbbfc4; --text-muted: #91969e;
  --glass-bg: rgba(30, 33, 38, 0.55); --glass-bg-strong: rgba(23, 26, 31, 0.82);
  --accent-rgb: 148, 163, 184;
  --cyan: #94a3b8; --cyan-text: #cbd5e1; --lime: #fb923c;
}

/* ── Settings → App Design: scheme picker ───────────────── */
.palette-choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}

.palette-choice {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  text-align: left;
  background: var(--bg-surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  color: inherit;
  font-family: var(--font-body);
  cursor: pointer;
  transition: var(--transition);
}

.palette-choice:hover { border-color: var(--border-hover); }

.palette-choice.selected {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px var(--cyan-dim);
}

.palette-swatches {
  display: flex;
  height: 34px;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.palette-swatches span { flex: 1; }
.palette-swatches span:first-child { flex: 2; }

.palette-choice-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.palette-choice-name small {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
}

.palette-choice .layout-choice-badge { visibility: hidden; }
.palette-choice.selected .layout-choice-badge { visibility: visible; }