/* Scope themes — only inside .scope-frame (site header + page glow stay). */

.scope-frame{
  color-scheme: dark;
  color: var(--ink);
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}

/* ── Soft Dark (default / noapte) ───────────────────────────────── */
.scope-frame[data-scope-theme="soft-dark"],
.scope-frame:not([data-scope-theme]){
  --bg:#161f30;
  --surface:rgba(42,56,78,.95);
  --surface-2:rgba(50,66,90,.9);
  --ink:#f5f7fb;
  --ink-2:#dbe4f0;
  --muted:#a8b8cc;
  --line:rgba(148,163,184,.28);
  --line-2:rgba(148,163,184,.16);
  --line-strong:rgba(148,163,184,.38);
  --accent:#2dd4bf;
  --accent-2:#22d3ee;
  --accent-soft:rgba(45,212,191,.14);
  --warm:#f97316;
  --warm-2:#fb923c;
  --warm-3:#fdba74;
  --warm-deep:#ea580c;
  --warm-soft:rgba(249,115,22,.16);
  --warm-line:rgba(249,115,22,.36);
  --btn-main-grad:linear-gradient(135deg,var(--warm-deep) 0%,var(--warm) 48%,var(--warm-2) 100%);
  --btn-main-grad-hover:linear-gradient(135deg,var(--warm) 0%,var(--warm-2) 52%,var(--warm-3) 100%);
  --btn-main-ink:#fff;
  --rust:#f87171;
  --rust-soft:rgba(248,113,113,.14);
  --amber:#fbbf24;
  --amber-soft:rgba(251,191,36,.14);
  --toolbar-bg:rgba(18,26,42,.97);
  --rail-bg:#141c2c;
  --rail-well:#121a28;
  --main-bg:#3a506c;
  --main-bg-2:#2c4058;
  --rail-tint:rgba(249,115,22,.08);
  --rail-tint-2:rgba(249,115,22,.06);
  --rail-edge:rgba(249,115,22,.22);
  --nav-grp:var(--warm-2);
  background:var(--main-bg-2);
  border-color:var(--line-strong);
  color-scheme:dark;
}

/* ── Daylight — luminos, gri rece ───────────────────────────────── */
.scope-frame[data-scope-theme="daylight"]{
  --bg:#e8eef5;
  --surface:#ffffff;
  --surface-2:#f3f6fa;
  --ink:#152033;
  --ink-2:#334155;
  --muted:#64748b;
  --line:rgba(15,23,42,.12);
  --line-2:rgba(15,23,42,.07);
  --line-strong:rgba(15,23,42,.18);
  --accent:#0d9488;
  --accent-2:#14b8a6;
  --accent-soft:rgba(13,148,136,.12);
  --warm:#ea580c;
  --warm-2:#f97316;
  --warm-3:#fb923c;
  --warm-deep:#c2410c;
  --warm-soft:rgba(234,88,12,.1);
  --warm-line:rgba(234,88,12,.28);
  --btn-main-grad:linear-gradient(135deg,#9a3412 0%,#c2410c 45%,#ea580c 100%);
  --btn-main-grad-hover:linear-gradient(135deg,#c2410c 0%,#ea580c 55%,#f97316 100%);
  --btn-main-ink:#fff;
  --rust:#dc2626;
  --rust-soft:rgba(220,38,38,.1);
  --amber:#d97706;
  --amber-soft:rgba(217,119,6,.12);
  --toolbar-bg:rgba(255,255,255,.92);
  --rail-bg:#eef2f7;
  --rail-well:#e8edf4;
  --main-bg:#f8fafc;
  --main-bg-2:#f1f5f9;
  --rail-tint:rgba(13,148,136,.08);
  --rail-tint-2:rgba(13,148,136,.05);
  --rail-edge:rgba(13,148,136,.22);
  --nav-grp:#0f766e;
  background:var(--main-bg-2);
  border-color:var(--line-strong);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9),
    0 18px 40px -28px rgba(15,23,42,.28);
  color-scheme:light;
}
.scope-frame[data-scope-theme="daylight"] .row.done .tick{color:#fff}
.scope-frame[data-scope-theme="daylight"] .chip.code{
  background:rgba(13,148,136,.12);color:#0f766e;border-color:rgba(13,148,136,.28);
}

/* ── Mist — deschis, gri-albăstrui moale ────────────────────────── */
.scope-frame[data-scope-theme="mist"]{
  --bg:#e4ebf3;
  --surface:#fbfcfe;
  --surface-2:#eef3f8;
  --ink:#1a2740;
  --ink-2:#3d4f6a;
  --muted:#6b7c94;
  --line:rgba(30,58,95,.12);
  --line-2:rgba(30,58,95,.07);
  --line-strong:rgba(30,58,95,.2);
  --accent:#2563eb;
  --accent-2:#3b82f6;
  --accent-soft:rgba(37,99,235,.1);
  --warm:#ea580c;
  --warm-2:#f97316;
  --warm-3:#fb923c;
  --warm-deep:#c2410c;
  --warm-soft:rgba(234,88,12,.1);
  --warm-line:rgba(234,88,12,.26);
  --btn-main-grad:linear-gradient(135deg,#9a3412 0%,#c2410c 45%,#ea580c 100%);
  --btn-main-grad-hover:linear-gradient(135deg,#c2410c 0%,#ea580c 55%,#f97316 100%);
  --btn-main-ink:#fff;
  --rust:#dc2626;
  --rust-soft:rgba(220,38,38,.1);
  --amber:#d97706;
  --amber-soft:rgba(217,119,6,.12);
  --toolbar-bg:rgba(251,252,254,.94);
  --rail-bg:#e8eef6;
  --rail-well:#e2eaf3;
  --main-bg:#f4f7fb;
  --main-bg-2:#ebf0f6;
  --rail-tint:rgba(37,99,235,.08);
  --rail-tint-2:rgba(37,99,235,.04);
  --rail-edge:rgba(37,99,235,.22);
  --nav-grp:#1d4ed8;
  background:
    linear-gradient(180deg, rgba(37,99,235,.04), transparent 30%),
    var(--main-bg-2);
  border-color:var(--line-strong);
  box-shadow:
    0 1px 0 rgba(255,255,255,.95),
    0 18px 40px -28px rgba(30,58,95,.22);
  color-scheme:light;
}
.scope-frame[data-scope-theme="mist"] .row.done .tick{color:#fff}
.scope-frame[data-scope-theme="mist"] .chip.code{
  background:rgba(37,99,235,.1);color:#1d4ed8;border-color:rgba(37,99,235,.25);
}

/* ── Glacier — foarte deschis, accent cer/ice ───────────────────── */
.scope-frame[data-scope-theme="glacier"]{
  --bg:#eef7f8;
  --surface:#ffffff;
  --surface-2:#f0f9fa;
  --ink:#0f2a32;
  --ink-2:#2d4a54;
  --muted:#5f7b84;
  --line:rgba(14,116,144,.14);
  --line-2:rgba(14,116,144,.08);
  --line-strong:rgba(14,116,144,.22);
  --accent:#0891b2;
  --accent-2:#22d3ee;
  --accent-soft:rgba(8,145,178,.12);
  --warm:#ea580c;
  --warm-2:#f97316;
  --warm-3:#fb923c;
  --warm-deep:#c2410c;
  --warm-soft:rgba(234,88,12,.1);
  --warm-line:rgba(234,88,12,.26);
  --btn-main-grad:linear-gradient(135deg,#155e75 0%,#0e7490 45%,#0891b2 100%);
  --btn-main-grad-hover:linear-gradient(135deg,#0e7490 0%,#0891b2 55%,#06b6d4 100%);
  --btn-main-ink:#fff;
  --rust:#dc2626;
  --rust-soft:rgba(220,38,38,.1);
  --amber:#d97706;
  --amber-soft:rgba(217,119,6,.12);
  --toolbar-bg:rgba(255,255,255,.95);
  --rail-bg:#e8f4f6;
  --rail-well:#e2f0f3;
  --main-bg:#f7fcfd;
  --main-bg-2:#eef8fa;
  --rail-tint:rgba(8,145,178,.1);
  --rail-tint-2:rgba(34,211,238,.06);
  --rail-edge:rgba(8,145,178,.25);
  --nav-grp:#0e7490;
  background:
    linear-gradient(135deg, rgba(34,211,238,.06), transparent 42%),
    var(--main-bg-2);
  border-color:var(--line-strong);
  box-shadow:
    0 1px 0 rgba(255,255,255,1),
    0 18px 40px -28px rgba(14,116,144,.2);
  color-scheme:light;
}
.scope-frame[data-scope-theme="glacier"] .row.done .tick{color:#fff}
.scope-frame[data-scope-theme="glacier"] .chip.code{
  background:rgba(8,145,178,.12);color:#0e7490;border-color:rgba(8,145,178,.28);
}

/* ── Noms — aerisit, coral Foodnoms + mentă ─────────────────────── */
.scope-frame[data-scope-theme="noms"]{
  --bg:#f3f1ef;
  --surface:#ffffff;
  --surface-2:#f7f5f3;
  --ink:#141414;
  --ink-2:#3a3a3c;
  --muted:#8e8e93;
  --line:rgba(20,20,20,.08);
  --line-2:rgba(20,20,20,.045);
  --line-strong:rgba(20,20,20,.14);
  --accent:#1faa7a;
  --accent-2:#34d399;
  --accent-soft:rgba(31,170,122,.12);
  --warm:#ff5232;
  --warm-2:#ff6b4a;
  --warm-3:#ff8a70;
  --warm-deep:#e03d1f;
  --warm-soft:rgba(255,82,50,.1);
  --warm-line:rgba(255,82,50,.28);
  --btn-main-grad:linear-gradient(135deg,#e03d1f 0%,#ff5232 48%,#ff6b4a 100%);
  --btn-main-grad-hover:linear-gradient(135deg,#ff5232 0%,#ff6b4a 55%,#ff8a70 100%);
  --btn-main-ink:#fff;
  --rust:#ff3b30;
  --rust-soft:rgba(255,59,48,.1);
  --amber:#ff9f0a;
  --amber-soft:rgba(255,159,10,.12);
  --toolbar-bg:rgba(255,255,255,.94);
  --rail-bg:#faf8f6;
  --rail-well:#f5f2ef;
  --main-bg:#fcfbfa;
  --main-bg-2:#f6f4f1;
  --rail-tint:rgba(255,82,50,.07);
  --rail-tint-2:rgba(31,170,122,.05);
  --rail-edge:rgba(255,82,50,.2);
  --nav-grp:#ff5232;
  background:
    radial-gradient(900px 320px at 88% -10%, rgba(255,82,50,.06), transparent 55%),
    radial-gradient(700px 280px at 8% 0%, rgba(31,170,122,.05), transparent 50%),
    var(--main-bg-2);
  border-color:var(--line-strong);
  box-shadow:
    0 1px 0 rgba(255,255,255,1),
    0 22px 48px -30px rgba(20,20,20,.18);
  color-scheme:light;
}
.scope-frame[data-scope-theme="noms"] .row.done .tick{color:#fff}
.scope-frame[data-scope-theme="noms"] .chip.code{
  background:rgba(31,170,122,.12);color:#0f766e;border-color:rgba(31,170,122,.28);
}

/* ── Cupru — slate cald (închis) ────────────────────────────────── */
.scope-frame[data-scope-theme="copper"]{
  --bg:#171410;
  --surface:rgba(42,36,30,.95);
  --surface-2:rgba(52,44,36,.92);
  --ink:#faf6f1;
  --ink-2:#e8dfd4;
  --muted:#b0a294;
  --line:rgba(196,168,130,.26);
  --line-2:rgba(196,168,130,.14);
  --line-strong:rgba(196,168,130,.38);
  --accent:#84a98c;
  --accent-2:#a7c4a0;
  --accent-soft:rgba(132,169,140,.14);
  --warm:#d97706;
  --warm-2:#f59e0b;
  --warm-3:#fbbf24;
  --warm-deep:#b45309;
  --warm-soft:rgba(217,119,6,.14);
  --warm-line:rgba(217,119,6,.36);
  --btn-main-grad:linear-gradient(135deg,#92400e 0%,#d97706 48%,#f59e0b 100%);
  --btn-main-grad-hover:linear-gradient(135deg,#d97706 0%,#f59e0b 52%,#fbbf24 100%);
  --btn-main-ink:#fff;
  --rust:#e11d48;
  --rust-soft:rgba(225,29,72,.12);
  --amber:#fbbf24;
  --amber-soft:rgba(251,191,36,.14);
  --toolbar-bg:rgba(20,16,12,.97);
  --rail-bg:#12100c;
  --rail-well:#100e0a;
  --main-bg:#2e2820;
  --main-bg-2:#221e18;
  --rail-tint:rgba(217,119,6,.1);
  --rail-tint-2:rgba(132,169,140,.06);
  --rail-edge:rgba(217,119,6,.28);
  --nav-grp:#f59e0b;
  background:
    linear-gradient(135deg, rgba(217,119,6,.05), transparent 40%),
    var(--main-bg-2);
  border-color:var(--line-strong);
  box-shadow:
    0 1px 0 rgba(251,191,36,.06),
    0 18px 40px -28px rgba(0,0,0,.75);
  color-scheme:dark;
}

/* Rail tint follows theme tokens */
.scope-frame[data-scope-theme] .rail,
.scope-frame:not([data-scope-theme]) .rail{
  background:
    linear-gradient(90deg, var(--rail-tint), transparent 42%),
    radial-gradient(120% 80% at 0% 0%, var(--rail-tint-2), transparent 55%),
    var(--rail-well);
  border-right-color: var(--rail-edge);
}
.scope-frame[data-scope-theme] .nav-grp,
.scope-frame:not([data-scope-theme]) .nav-grp{
  color: var(--nav-grp);
  border-top-color: var(--rail-edge);
  background: linear-gradient(180deg, var(--rail-tint), transparent 78%);
}
.scope-frame[data-scope-theme] .nav-i.on,
.scope-frame:not([data-scope-theme]) .nav-i.on{
  background: var(--warm-soft);
  border-color: var(--warm-line);
}
.scope-frame[data-scope-theme] .rail .sep,
.scope-frame:not([data-scope-theme]) .rail .sep{
  background: linear-gradient(90deg, var(--warm-line), var(--line), transparent);
}

/* Gear theme picker (compact, after search) */
.theme-gear-wrap{
  position:relative;flex:none;z-index:45;
}
.theme-gear-btn{
  width:34px;height:34px;padding:0;
}
.theme-gear-btn .icon-settings{font-size:var(--text-sm);line-height:1}
.theme-gear-btn[aria-expanded="true"]{
  border-color:var(--accent);background:var(--accent-soft);color:var(--accent);
}
.theme-menu{
  position:absolute;top:calc(100% + 8px);right:0;
  min-width:200px;padding:8px;
  background:var(--surface);border:1px solid var(--line-strong);
  border-radius:12px;
  box-shadow:0 16px 36px -18px rgba(0,0,0,.45);
}
.theme-menu-h{
  font-family:"JetBrains Mono",monospace;font-size:var(--text-micro);letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);padding:4px 8px 8px;
}
.theme-menu button{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  width:100%;text-align:left;border:0;background:transparent;
  color:var(--ink);border-radius:8px;padding:8px 10px;font:inherit;font-size:var(--text-sm);
  cursor:pointer;
}
.theme-menu button:hover{background:var(--surface-2)}
.theme-menu button.on{
  background:var(--accent-soft);color:var(--accent);
}
.theme-menu-label{font-weight:650}
.theme-menu-hint{font-size:var(--text-xs);color:var(--muted);font-weight:500}
.theme-menu button.on .theme-menu-hint{color:inherit;opacity:.8}
@media(max-width:720px){
  .theme-menu{right:auto;left:0}
}