/* Central appearance contract. Components consume roles, never palette literals. */
:root {
  --app-bg:#000000; --app-bg-secondary:#08090a;
  --surface:#0c0e10; --surface-secondary:#14171a; --surface-elevated:#1c2024; --surface-hover:#262c32;
  --text-primary:#f4f5f6; --text-secondary:#c1c5cb; --text-muted:#a0a7b0; --text-disabled:#737b85;
  --border-soft:#30363d; --border-default:#4c5662; --border-strong:#778391;
  --success:#30d884; --success-soft:#092b1a; --warning:#ffca38; --warning-soft:#302308;
  --danger:#ff526b; --danger-soft:#350d17; --info:#50b5ff; --info-soft:#0b263c;
  --shadow-color:rgba(0,0,0,.2); --overlay:rgba(0,0,0,.65);
  --media-bg:#101214; --media-text:#fff; --media-muted:#d9dfe4; --media-scrim:rgba(0,0,0,.65);
  --primary:#ff3656; --primary-strong:#ed0036; --primary-hover:#d60030; --primary-active:#bb002b;
  --primary-soft:#320813; --secondary:#ff657b; --tertiary:#ffad33; --complement:#46c9e8;
  --text-on-accent:#fff; --primary-rgb:237,0,54;
  --icon-filter:brightness(0) invert(.84); --icon-active-filter:brightness(0) invert(.95);
  --chart-grid:var(--border-soft); --chart-label:var(--text-secondary);
  --shadow-sm:0 2px 8px var(--shadow-color); --shadow-md:0 8px 24px var(--shadow-color);
}
:root[data-theme="light"] {
  --primary-rgb:215,25,53;
  --app-bg:#f6f7f8; --app-bg-secondary:#eef0f2;
  --surface:#fcfcfd; --surface-secondary:#f2f3f5; --surface-elevated:#ffffff; --surface-hover:#e8ebee;
  --text-primary:#181b20; --text-secondary:#505863; --text-muted:#626b77; --text-disabled:#7a8490;
  --border-soft:#e0e4e8; --border-default:#a4adb8; --border-strong:#687584;
  --success:#17653e; --success-soft:#e2f3e9; --warning:#795000; --warning-soft:#fff0cf;
  --danger:#b51f36; --danger-soft:#fbe6ea; --info:#225e9d; --info-soft:#e4effb;
  --shadow-color:rgba(24,27,32,.07); --overlay:rgba(16,18,20,.46);
  --primary:#b5142f; --primary-strong:#cc1732; --primary-hover:#b5142f; --primary-active:#9d1027;
  --primary-soft:#fbe8ec; --secondary:#8c1d32; --tertiary:#a93c4b; --complement:#546a7a;
  --icon-filter:brightness(0) invert(.32); --icon-active-filter:brightness(0) invert(.12);
}
:root[data-palette="pastel"] {
  --primary:#b6a6f0; --primary-strong:#b6a6f0; --primary-hover:#c5b8f6; --primary-active:#a593e2;
  --primary-soft:#30293f; --secondary:#e2a6b9; --tertiary:#94c4d5; --complement:#a2c7b2;
  --text-on-accent:#221a36; --primary-rgb:182,166,240;
}
:root[data-theme="light"][data-palette="pastel"] {
  --app-bg:#f8f7fa; --app-bg-secondary:#f0eef4; --surface:#fdfcfe; --surface-secondary:#f6f4f9;
  --primary:#66509f; --primary-strong:#7660b5; --primary-hover:#65509f; --primary-active:#57448c;
  --primary-soft:#eee8fa; --secondary:#97566e; --tertiary:#386f83; --complement:#486f58;
  --text-on-accent:#fff; --primary-rgb:118,96,181;
}
:root[data-palette="vibrant"] {
  --primary:#91b1ff; --primary-strong:#365fd0; --primary-hover:#2c50ba; --primary-active:#25449f;
  --primary-soft:#222f4b; --secondary:#b8a0fa; --tertiary:#68c6df; --complement:#ed9dc8;
  --text-on-accent:#fff; --primary-rgb:54,95,208;
}
:root[data-theme="light"][data-palette="vibrant"] {
  --primary:#2e59be; --primary-strong:#315fd0; --primary-hover:#284fb4; --primary-active:#21429a;
  --primary-soft:#e8eefe; --secondary:#6c48c7; --tertiary:#176f88; --complement:#a42e72;
  --primary-rgb:49,95,208;
}
/* Legacy aliases make every existing consumer share the semantic contract. */
:root {
  --secondary-soft:color-mix(in srgb,var(--secondary) 12%,var(--surface));
  --tertiary-soft:color-mix(in srgb,var(--tertiary) 12%,var(--surface));
  --surface-selected:var(--primary-soft); --nav-bg:var(--surface); --nav-border:var(--border-soft);
  --nav-text:var(--text-muted); --nav-text-active:var(--primary); --nav-active-bg:var(--primary-soft);
  --header-bg:var(--surface); --header-text:var(--text-primary);
  --button-primary-bg:var(--primary-strong); --button-primary-text:var(--text-on-accent);
  --button-secondary-bg:var(--surface-secondary); --button-secondary-text:var(--primary);
  --button-disabled-bg:var(--surface-hover); --button-disabled-text:var(--text-disabled);
  --input-bg:var(--surface); --input-border:var(--border-default); --input-focus:var(--primary); --input-placeholder:var(--text-muted);
  --icon-primary:var(--text-primary); --icon-secondary:var(--primary); --icon-muted:var(--text-muted);
  --chart-1:var(--primary); --chart-2:var(--secondary); --chart-3:var(--tertiary); --chart-4:var(--complement);
  --bg:var(--app-bg); --panel:var(--surface); --panel-2:var(--surface-secondary); --panel-3:var(--surface-elevated);
  --text:var(--text-primary); --muted:var(--text-muted); --subtle:var(--text-muted);
  --border:var(--border-soft); --line:var(--border-soft); --red:var(--primary); --red-strong:var(--primary-strong);
  --green:var(--success); --yellow:var(--warning); --cyan:var(--tertiary); --surface-shadow:var(--shadow-sm);
}
html.theme-changing :where(body,main,section,article,header,footer,nav,aside,button,input,select,textarea,dialog,label) { transition:background-color .18s ease,border-color .18s ease,color .18s ease; }
@media(prefers-reduced-motion:reduce) { html.theme-changing * { transition:none; } }
.appearance-settings fieldset { border:0; min-width:0; margin:0 0 28px; padding:0; }
.appearance-settings legend { padding:0; margin-bottom:14px; color:var(--text-primary); font-size:16px; font-weight:700; }
.appearance-modes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.appearance-modes label { display:block; position:relative; cursor:pointer; min-width:0; }
.appearance-modes input { position:absolute; opacity:0; width:1px; height:1px; }
.appearance-modes span { display:flex; align-items:center; justify-content:center; min-height:48px; padding:8px; border:1px solid var(--border-default); border-radius:6px; color:var(--text-secondary); background:var(--surface); }
.appearance-modes input:checked+span { background:var(--primary-soft); color:var(--primary); border-color:var(--primary); box-shadow:inset 0 -2px var(--primary); font-weight:700; }
.appearance-modes input:focus-visible+span { outline:2px solid var(--primary); outline-offset:3px; }
.appearance-palettes { display:grid; gap:10px; }
.appearance-palette { display:flex!important; flex-direction:row!important; align-items:center; gap:16px!important; min-height:64px; padding:12px 14px; border:1px solid var(--border-soft); border-radius:8px; cursor:pointer; background:var(--surface); }
.appearance-palette:has(:checked) { border-color:var(--primary); background:var(--primary-soft); }
.appearance-palette input { order:3; margin-left:auto; width:20px!important; height:20px!important; accent-color:var(--primary-strong); }
.appearance-swatches { display:flex; gap:5px; }
.appearance-swatches i { width:18px; height:18px; border-radius:50%; background:var(--swatch-1); }
.appearance-swatches i:nth-child(2) { background:var(--swatch-2); }
.appearance-swatches i:nth-child(3) { background:var(--swatch-3); }
[data-palette-preview="ratlab"] { --swatch-1:#d71935; --swatch-2:#8c1d32; --swatch-3:#e85d68; }
[data-palette-preview="pastel"] { --swatch-1:#8f7ae5; --swatch-2:#d98fa6; --swatch-3:#78afc7; }
[data-palette-preview="vibrant"] { --swatch-1:#3d73f1; --swatch-2:#7957e8; --swatch-3:#27a9c8; }