/*
 * Themes + skins — docs/ux/I18N_THEMES.md §4 · docs/ux/TOKEN_CATALOG.md §3 (SR-079)
 * Theme: dark | light · Skin: hub | slate | forest
 * Anti-cliché: NO purple→indigo SaaS, NO cream+serif+terracotta, NO magenta accents.
 * Base dark-hub tokens live in app.css :root; this file overrides theme/skin.
 */

/* —— Explicit hub skin (navy / electric blue / teal) —— */
html[data-skin="hub"][data-theme="dark"],
html[data-skin="hub"]:not([data-theme]),
html:not([data-skin])[data-theme="dark"] {
  --bg: #060b16;
  --bg-elevated: #0c1424;
  --panel: #101a2c;
  --panel-2: #162338;
  --accent: #4da3ff;
  --accent-2: #22d3ee;
  --focus: rgba(77, 163, 255, 0.45);
  --logo-fg: #061018;
  --on-accent: #041018;
  --accent-muted: #9cc8ff;
  --info-fg: #b8d9ff;
  --warn-fg: #fde68a;
  --danger-fg: #fecaca;
  --success-fg: #a7f3d0;
  --info-bg: rgba(77, 163, 255, 0.1);
  --info-border: rgba(77, 163, 255, 0.3);
}

html[data-skin="hub"][data-theme="light"] {
  --bg: #e8eef6;
  --bg-elevated: #f4f7fb;
  --panel: #ffffff;
  --panel-2: #eef3f9;
  --accent: #1d6fd4;
  --accent-2: #0d9488;
  --focus: rgba(29, 111, 212, 0.4);
  --logo-fg: #061018;
  --on-accent: #041018;
  --accent-muted: #1e4a86;
  --info-fg: #1e3a5f;
  --warn-fg: #92400e;
  --danger-fg: #991b1b;
  --success-fg: #065f46;
}

/* —— Light theme (cool paper, electric blue) —— */
html[data-theme="light"] {
  --bg: #e8eef6;
  --bg-elevated: #f4f7fb;
  --panel: #ffffff;
  --panel-2: #eef3f9;
  --text: #0f172a;
  --muted: #5b6b82;
  --accent: #1d6fd4;
  --accent-2: #0d9488;
  --border: rgba(15, 23, 42, 0.1);
  --border-strong: rgba(15, 23, 42, 0.18);
  --success: #059669;
  --warn: #b45309;
  --danger: #dc2626;
  --danger-bg: rgba(220, 38, 38, 0.08);
  --danger-border: rgba(220, 38, 38, 0.28);
  --info-bg: rgba(29, 111, 212, 0.08);
  --info-border: rgba(29, 111, 212, 0.28);
  --success-bg: rgba(5, 150, 105, 0.08);
  --success-border: rgba(5, 150, 105, 0.28);
  --focus: rgba(29, 111, 212, 0.4);
  --shadow: 0 12px 36px rgba(15, 23, 42, 0.12);
  --logo-fg: #061018;
  --on-accent: #041018;
  --accent-muted: #1e4a86;
  --info-fg: #1e3a5f;
  --warn-fg: #92400e;
  --danger-fg: #991b1b;
  --success-fg: #065f46;
  --warn-bg: rgba(180, 83, 9, 0.1);
  --warn-border: rgba(180, 83, 9, 0.35);
  --raw-bg: #eef3f9;
}

/* Level 0 mesh in light theme — same three-layer recipe as dark (app.css §1),
 * only the alphas drop so the paper surface stays above 4.5:1 for body text. */
html[data-theme="light"] body {
  background:
    radial-gradient(ellipse 70% 46% at 12% -12%, rgba(29, 111, 212, 0.12), transparent 70%),
    radial-gradient(ellipse 54% 38% at 92% -4%, rgba(13, 148, 136, 0.1), transparent 68%),
    radial-gradient(ellipse 60% 40% at 50% 108%, rgba(29, 111, 212, 0.06), transparent 72%),
    var(--bg);
  background-attachment: fixed;
}

html[data-theme="light"] .session-banner,
html[data-theme="light"] .warn-box {
  color: #92400e;
  background: rgba(180, 83, 9, 0.1);
  border-color: rgba(180, 83, 9, 0.35);
}

html[data-theme="light"] .invite-only {
  color: #1e3a5f;
  background: rgba(29, 111, 212, 0.08);
  border-color: rgba(29, 111, 212, 0.28);
}

/* —— Skin: slate (cooler gray panels, muted blue — not purple) —— */
html[data-skin="slate"][data-theme="dark"] {
  --bg: #0a0d12;
  --bg-elevated: #12161d;
  --panel: #161b24;
  --panel-2: #1e2530;
  --accent: #6b9fd4;
  --accent-2: #5ec4b4;
  --focus: rgba(107, 159, 212, 0.45);
  --info-bg: rgba(107, 159, 212, 0.1);
  --info-border: rgba(107, 159, 212, 0.3);
}

html[data-skin="slate"][data-theme="light"] {
  --bg: #e4e8ee;
  --bg-elevated: #f0f2f5;
  --panel: #fafbfc;
  --panel-2: #e8ecf1;
  --accent: #3d6fa8;
  --accent-2: #2a9a8c;
  --focus: rgba(61, 111, 168, 0.4);
}

/* —— Skin: forest (teal-leaning, blue secondary — not purple) —— */
html[data-skin="forest"][data-theme="dark"] {
  --bg: #071210;
  --bg-elevated: #0c1a16;
  --panel: #10241e;
  --panel-2: #16352c;
  --accent: #2dd4bf;
  --accent-2: #4da3ff;
  --focus: rgba(45, 212, 191, 0.45);
  --info-bg: rgba(45, 212, 191, 0.1);
  --info-border: rgba(45, 212, 191, 0.3);
}

html[data-skin="forest"][data-theme="light"] {
  --bg: #e6f2ef;
  --bg-elevated: #f2f9f6;
  --panel: #ffffff;
  --panel-2: #e0efe9;
  --accent: #0f766e;
  --accent-2: #1d6fd4;
  --focus: rgba(15, 118, 110, 0.4);
}

/* Settings form */
.settings-grid {
  display: grid;
  gap: var(--space-4);
  max-width: 28rem;
}

.settings-grid fieldset {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
}

.settings-grid legend {
  padding: 0 6px;
  font-weight: 600;
  font-size: 0.9rem;
}

.settings-grid select.input {
  width: 100%;
  margin: 6px 0 0;
}

/* Choice rows are horizontal: the control sits next to its caption. The global
 * `label { flex-direction: column }` rule would otherwise stack them. */
.settings-grid label.choice {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  margin: 6px 0;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text);
  cursor: pointer;
  font-weight: 400;
  transition:
    background-color var(--dur-1) var(--ease-standard),
    border-color var(--dur-1) var(--ease-standard);
}
.settings-grid label.choice:hover {
  background: color-mix(in srgb, var(--panel-2) 70%, transparent);
  border-color: var(--border);
}
.settings-grid label.choice:has(input:checked) {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  font-weight: 600;
}
.settings-grid label.choice:focus-within {
  border-color: var(--accent);
}

.settings-grid fieldset {
  background: var(--panel);
  box-shadow: var(--elev-1);
}
.settings-grid legend {
  letter-spacing: 0.01em;
  color: var(--muted);
  text-transform: uppercase;
  font-size: var(--text-small);
}

.settings-grid .hint {
  margin: 6px 0 0;
}

.settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: var(--space-3);
}

#settings-toast[hidden] {
  display: none !important;
}