/**
 * Theme Studio — shared visual system for login + app shell
 * Themes: aurora | cinema | tide | ember | sage | phosphor
 * Attribute: html[data-studio-theme="…"]  (alias: data-login-theme)
 */
:root,
html[data-studio-theme="aurora"],
html[data-login-theme="aurora"] {
  --studio-theme: aurora;
  --studio-font: "Vazirmatn", Tahoma, sans-serif;
  --studio-ease: cubic-bezier(.22, 1, .36, 1);

  --studio-ink: #0f172a;
  --studio-muted: #64748b;
  --studio-line: rgba(15, 23, 42, .1);
  --studio-surface: #f8fafc;
  --studio-elevated: #ffffff;
  --studio-glass: rgba(248, 250, 252, .82);
  --studio-glass-border: rgba(15, 23, 42, .08);

  --studio-accent: #0f766e;
  --studio-accent-2: #134e4a;
  --studio-accent-soft: rgba(15, 118, 110, .12);
  --studio-glow: rgba(45, 212, 191, .35);
  --studio-on-accent: #ecfdf5;

  --studio-rail-1: #0f172a;
  --studio-rail-2: #1e293b;
  --studio-rail-3: #134e4a;
  --studio-sidebar-1: #0b1220;
  --studio-sidebar-2: #111827;
  --studio-sidebar-3: #0f172a;
  --studio-sidebar-ink: #f8fafc;
  --studio-sidebar-muted: rgba(226, 232, 240, .55);
  --studio-sidebar-link: rgba(226, 232, 240, .82);
  --studio-menu-active: rgba(15, 118, 110, .35);
  --studio-menu-active-soft: rgba(15, 118, 110, .08);
  --studio-search-focus: rgba(45, 212, 191, .45);
  --studio-status-bg: rgba(15, 118, 110, .28);
  --studio-status-ink: #99f6e4;

  --studio-stage-1: #0b1c24;
  --studio-stage-2: #115e59;
  --studio-stage-3: #0f172a;
  --studio-orb-a: rgba(45, 212, 191, .45);
  --studio-orb-b: rgba(56, 189, 248, .28);
  --studio-orb-c: rgba(15, 23, 42, .5);
  --studio-page-orb-a: rgba(15, 118, 110, .1);
  --studio-page-orb-b: rgba(30, 41, 59, .07);

  --studio-field-bg: rgba(255, 255, 255, .55);
  --studio-field-ink: #0f172a;
  --studio-card-surface: rgba(255, 255, 255, .72);
  --studio-card-surface-2: rgba(255, 255, 255, .45);
  --studio-brand-ink: #fff;
  --studio-brand-muted: rgba(255, 255, 255, .72);
  --studio-grain: .06;
  --studio-danger: #b91c1c;
  --studio-danger-bg: rgba(185, 28, 28, .1);
  --studio-ok: #15803d;
  --studio-shadow: 0 10px 30px -18px rgba(15, 23, 42, .35);
  --studio-card-shadow: 0 30px 80px -28px rgba(2, 8, 23, .55);

  /* App shell aliases */
  --app-ink: var(--studio-ink);
  --app-muted: var(--studio-muted);
  --app-line: var(--studio-line);
  --app-teal: var(--studio-accent);
  --app-teal-soft: var(--studio-accent-soft);
  --app-surface: var(--studio-surface);
  --app-surface-elevated: var(--studio-elevated);
  --app-glass: var(--studio-glass);
  --app-glass-border: var(--studio-glass-border);
  --app-shadow: var(--studio-shadow);
  --app-font: var(--studio-font);
  --app-ease: var(--studio-ease);

  /* Login aliases */
  --ls-ink: var(--studio-ink);
  --ls-muted: var(--studio-muted);
  --ls-line: rgba(15, 23, 42, .12);
  --ls-surface: var(--studio-card-surface);
  --ls-surface-2: var(--studio-card-surface-2);
  --ls-accent: var(--studio-accent);
  --ls-accent-2: var(--studio-accent-2);
  --ls-accent-soft: rgba(15, 118, 110, .18);
  --ls-glow: var(--studio-glow);
  --ls-danger: var(--studio-danger);
  --ls-danger-bg: var(--studio-danger-bg);
  --ls-ok: var(--studio-ok);
  --ls-stage-1: var(--studio-stage-1);
  --ls-stage-2: var(--studio-stage-2);
  --ls-stage-3: var(--studio-stage-3);
  --ls-orb-a: var(--studio-orb-a);
  --ls-orb-b: var(--studio-orb-b);
  --ls-orb-c: var(--studio-orb-c);
  --ls-grain: var(--studio-grain);
  --ls-card-shadow: var(--studio-card-shadow);
  --ls-field-bg: var(--studio-field-bg);
  --ls-field-ink: var(--studio-field-ink);
  --ls-brand-ink: var(--studio-brand-ink);
  --ls-brand-muted: var(--studio-brand-muted);
  --ls-font: var(--studio-font);
  --ls-ease: var(--studio-ease);
}

html[data-studio-theme="cinema"],
html[data-login-theme="cinema"] {
  --studio-theme: cinema;
  --studio-ink: #f8fafc;
  --studio-muted: rgba(248, 250, 252, .62);
  --studio-line: rgba(251, 191, 36, .18);
  --studio-surface: #0c0a09;
  --studio-elevated: #18181b;
  --studio-glass: rgba(24, 24, 27, .78);
  --studio-glass-border: rgba(251, 191, 36, .14);

  --studio-accent: #eab308;
  --studio-accent-2: #a16207;
  --studio-accent-soft: rgba(234, 179, 8, .16);
  --studio-glow: rgba(250, 204, 21, .28);
  --studio-on-accent: #1c1917;

  --studio-rail-1: #050505;
  --studio-rail-2: #1c1917;
  --studio-rail-3: #713f12;
  --studio-sidebar-1: #09090b;
  --studio-sidebar-2: #18181b;
  --studio-sidebar-3: #0a0a0a;
  --studio-sidebar-ink: #fefce8;
  --studio-sidebar-muted: rgba(254, 252, 232, .55);
  --studio-sidebar-link: rgba(250, 250, 249, .82);
  --studio-menu-active: rgba(234, 179, 8, .28);
  --studio-menu-active-soft: rgba(234, 179, 8, .08);
  --studio-search-focus: rgba(234, 179, 8, .45);
  --studio-status-bg: rgba(234, 179, 8, .2);
  --studio-status-ink: #fde68a;

  --studio-stage-1: #050505;
  --studio-stage-2: #1c1917;
  --studio-stage-3: #0a0a0a;
  --studio-orb-a: rgba(234, 179, 8, .22);
  --studio-orb-b: rgba(120, 53, 15, .35);
  --studio-orb-c: rgba(255, 255, 255, .05);
  --studio-page-orb-a: rgba(234, 179, 8, .08);
  --studio-page-orb-b: rgba(120, 53, 15, .12);

  --studio-field-bg: rgba(255, 255, 255, .06);
  --studio-field-ink: #f8fafc;
  --studio-card-surface: rgba(12, 12, 14, .62);
  --studio-card-surface-2: rgba(24, 24, 27, .45);
  --studio-brand-ink: #fefce8;
  --studio-brand-muted: rgba(254, 252, 232, .65);
  --studio-shadow: 0 10px 30px -18px rgba(0, 0, 0, .7);
  --studio-card-shadow: 0 40px 100px -30px rgba(0, 0, 0, .85);

  --ls-line: rgba(251, 191, 36, .22);
  --ls-accent-soft: rgba(234, 179, 8, .16);
}

html[data-studio-theme="tide"],
html[data-login-theme="tide"] {
  --studio-theme: tide;
  --studio-ink: #ecfeff;
  --studio-muted: rgba(207, 250, 254, .7);
  --studio-line: rgba(103, 232, 249, .18);
  --studio-surface: #020617;
  --studio-elevated: #0c4a6e;
  --studio-glass: rgba(8, 47, 73, .72);
  --studio-glass-border: rgba(103, 232, 249, .16);

  --studio-accent: #22d3ee;
  --studio-accent-2: #0891b2;
  --studio-accent-soft: rgba(34, 211, 238, .16);
  --studio-glow: rgba(34, 211, 238, .4);
  --studio-on-accent: #082f49;

  --studio-rail-1: #020617;
  --studio-rail-2: #0c4a6e;
  --studio-rail-3: #155e75;
  --studio-sidebar-1: #020617;
  --studio-sidebar-2: #082f49;
  --studio-sidebar-3: #0c4a6e;
  --studio-sidebar-ink: #ecfeff;
  --studio-sidebar-muted: rgba(207, 250, 254, .55);
  --studio-sidebar-link: rgba(207, 250, 254, .85);
  --studio-menu-active: rgba(34, 211, 238, .28);
  --studio-menu-active-soft: rgba(34, 211, 238, .08);
  --studio-search-focus: rgba(34, 211, 238, .5);
  --studio-status-bg: rgba(8, 145, 178, .35);
  --studio-status-ink: #a5f3fc;

  --studio-stage-1: #020617;
  --studio-stage-2: #0c4a6e;
  --studio-stage-3: #082f49;
  --studio-orb-a: rgba(34, 211, 238, .4);
  --studio-orb-b: rgba(59, 130, 246, .35);
  --studio-orb-c: rgba(14, 165, 233, .2);
  --studio-page-orb-a: rgba(34, 211, 238, .1);
  --studio-page-orb-b: rgba(59, 130, 246, .1);

  --studio-field-bg: rgba(255, 255, 255, .08);
  --studio-field-ink: #ecfeff;
  --studio-card-surface: rgba(8, 47, 73, .55);
  --studio-card-surface-2: rgba(12, 74, 110, .4);
  --studio-brand-ink: #ecfeff;
  --studio-brand-muted: rgba(207, 250, 254, .7);
  --studio-shadow: 0 10px 30px -18px rgba(2, 6, 23, .65);

  --ls-line: rgba(103, 232, 249, .22);
  --ls-accent-soft: rgba(34, 211, 238, .18);
}

html[data-studio-theme="ember"],
html[data-login-theme="ember"] {
  --studio-theme: ember;
  --studio-ink: #fff7ed;
  --studio-muted: rgba(255, 237, 213, .68);
  --studio-line: rgba(251, 146, 60, .2);
  --studio-surface: #0c0a09;
  --studio-elevated: #1c1917;
  --studio-glass: rgba(28, 16, 12, .78);
  --studio-glass-border: rgba(251, 146, 60, .16);

  --studio-accent: #f97316;
  --studio-accent-2: #c2410c;
  --studio-accent-soft: rgba(249, 115, 22, .16);
  --studio-glow: rgba(251, 146, 60, .38);
  --studio-on-accent: #1c1917;

  --studio-rail-1: #0c0a09;
  --studio-rail-2: #7c2d12;
  --studio-rail-3: #9a3412;
  --studio-sidebar-1: #0c0a09;
  --studio-sidebar-2: #1c1917;
  --studio-sidebar-3: #431407;
  --studio-sidebar-ink: #fff7ed;
  --studio-sidebar-muted: rgba(255, 237, 213, .55);
  --studio-sidebar-link: rgba(255, 247, 237, .85);
  --studio-menu-active: rgba(249, 115, 22, .3);
  --studio-menu-active-soft: rgba(249, 115, 22, .08);
  --studio-search-focus: rgba(249, 115, 22, .5);
  --studio-status-bg: rgba(194, 65, 12, .35);
  --studio-status-ink: #fed7aa;

  --studio-stage-1: #0c0a09;
  --studio-stage-2: #7c2d12;
  --studio-stage-3: #1c1917;
  --studio-orb-a: rgba(249, 115, 22, .4);
  --studio-orb-b: rgba(220, 38, 38, .25);
  --studio-orb-c: rgba(120, 53, 15, .45);
  --studio-page-orb-a: rgba(249, 115, 22, .1);
  --studio-page-orb-b: rgba(127, 29, 29, .12);

  --studio-field-bg: rgba(255, 255, 255, .07);
  --studio-field-ink: #fff7ed;
  --studio-card-surface: rgba(28, 16, 12, .66);
  --studio-card-surface-2: rgba(67, 20, 7, .42);
  --studio-brand-ink: #fff7ed;
  --studio-brand-muted: rgba(255, 237, 213, .7);

  --ls-line: rgba(251, 146, 60, .28);
  --ls-accent-soft: rgba(249, 115, 22, .2);
}

html[data-studio-theme="sage"],
html[data-login-theme="sage"] {
  --studio-theme: sage;
  --studio-ink: #14532d;
  --studio-muted: #3f6212;
  --studio-line: rgba(21, 128, 61, .16);
  --studio-surface: #f0fdf4;
  --studio-elevated: #ffffff;
  --studio-glass: rgba(240, 253, 244, .86);
  --studio-glass-border: rgba(21, 128, 61, .12);

  --studio-accent: #15803d;
  --studio-accent-2: #166534;
  --studio-accent-soft: rgba(21, 128, 61, .14);
  --studio-glow: rgba(74, 222, 128, .35);
  --studio-on-accent: #f0fdf4;

  --studio-rail-1: #052e16;
  --studio-rail-2: #14532d;
  --studio-rail-3: #3f6212;
  --studio-sidebar-1: #052e16;
  --studio-sidebar-2: #14532d;
  --studio-sidebar-3: #166534;
  --studio-sidebar-ink: #f0fdf4;
  --studio-sidebar-muted: rgba(220, 252, 231, .65);
  --studio-sidebar-link: rgba(240, 253, 244, .88);
  --studio-menu-active: rgba(74, 222, 128, .28);
  --studio-menu-active-soft: rgba(74, 222, 128, .08);
  --studio-search-focus: rgba(74, 222, 128, .5);
  --studio-status-bg: rgba(21, 128, 61, .35);
  --studio-status-ink: #bbf7d0;

  --studio-stage-1: #052e16;
  --studio-stage-2: #3f6212;
  --studio-stage-3: #14532d;
  --studio-orb-a: rgba(134, 239, 172, .45);
  --studio-orb-b: rgba(190, 242, 100, .28);
  --studio-orb-c: rgba(21, 128, 61, .35);
  --studio-page-orb-a: rgba(21, 128, 61, .1);
  --studio-page-orb-b: rgba(63, 98, 18, .08);

  --studio-field-bg: rgba(255, 255, 255, .7);
  --studio-field-ink: #14532d;
  --studio-card-surface: rgba(240, 253, 244, .78);
  --studio-card-surface-2: rgba(220, 252, 231, .55);
  --studio-brand-ink: #f0fdf4;
  --studio-brand-muted: rgba(240, 253, 244, .78);
  --studio-shadow: 0 10px 30px -18px rgba(20, 83, 45, .35);
  --studio-card-shadow: 0 28px 70px -24px rgba(20, 83, 45, .45);

  --ls-line: rgba(21, 128, 61, .18);
  --ls-accent-soft: rgba(21, 128, 61, .16);
}

html[data-studio-theme="phosphor"],
html[data-login-theme="phosphor"] {
  --studio-theme: phosphor;
  --studio-ink: #d1fae5;
  --studio-muted: rgba(167, 243, 208, .7);
  --studio-line: rgba(52, 211, 153, .22);
  --studio-surface: #020617;
  --studio-elevated: #064e3b;
  --studio-glass: rgba(6, 18, 14, .8);
  --studio-glass-border: rgba(52, 211, 153, .16);

  --studio-accent: #34d399;
  --studio-accent-2: #059669;
  --studio-accent-soft: rgba(52, 211, 153, .14);
  --studio-glow: rgba(52, 211, 153, .45);
  --studio-on-accent: #022c22;

  --studio-rail-1: #020617;
  --studio-rail-2: #064e3b;
  --studio-rail-3: #022c22;
  --studio-sidebar-1: #020617;
  --studio-sidebar-2: #022c22;
  --studio-sidebar-3: #064e3b;
  --studio-sidebar-ink: #ecfdf5;
  --studio-sidebar-muted: rgba(167, 243, 208, .55);
  --studio-sidebar-link: rgba(209, 250, 229, .85);
  --studio-menu-active: rgba(52, 211, 153, .28);
  --studio-menu-active-soft: rgba(52, 211, 153, .08);
  --studio-search-focus: rgba(52, 211, 153, .55);
  --studio-status-bg: rgba(5, 150, 105, .35);
  --studio-status-ink: #a7f3d0;

  --studio-stage-1: #020617;
  --studio-stage-2: #064e3b;
  --studio-stage-3: #022c22;
  --studio-orb-a: rgba(52, 211, 153, .35);
  --studio-orb-b: rgba(16, 185, 129, .2);
  --studio-orb-c: rgba(6, 95, 70, .4);
  --studio-page-orb-a: rgba(52, 211, 153, .1);
  --studio-page-orb-b: rgba(6, 78, 59, .14);
  --studio-grain: .1;

  --studio-field-bg: rgba(6, 78, 59, .35);
  --studio-field-ink: #d1fae5;
  --studio-card-surface: rgba(6, 18, 14, .72);
  --studio-card-surface-2: rgba(6, 78, 59, .35);
  --studio-brand-ink: #ecfdf5;
  --studio-brand-muted: rgba(167, 243, 208, .72);

  --ls-line: rgba(52, 211, 153, .28);
  --ls-accent-soft: rgba(52, 211, 153, .16);
}

/* Dark themes: keep header/sidebar text light even if page ink is light */
html[data-studio-theme="cinema"] body.app-shell,
html[data-studio-theme="tide"] body.app-shell,
html[data-studio-theme="ember"] body.app-shell,
html[data-studio-theme="phosphor"] body.app-shell,
html[data-login-theme="cinema"] body.app-shell,
html[data-login-theme="tide"] body.app-shell,
html[data-login-theme="ember"] body.app-shell,
html[data-login-theme="phosphor"] body.app-shell {
  --app-ink: #e2e8f0;
  --app-muted: rgba(226, 232, 240, .65);
  --app-surface: var(--studio-surface);
  --app-surface-elevated: color-mix(in srgb, var(--studio-elevated) 88%, #000 12%);
  --app-glass: var(--studio-glass);
  --app-glass-border: var(--studio-glass-border);
  --app-line: var(--studio-line);
}

/* Theme dock shared styles (login + app) */
.studio-dock {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.studio-dock-label {
  font-size: .72rem;
  font-weight: 800;
  color: var(--studio-muted, #64748b);
  white-space: nowrap;
}
.studio-theme-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .35);
  cursor: pointer;
  padding: 0;
  transition: transform .25s var(--studio-ease, ease), box-shadow .25s;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2);
}
.studio-theme-btn:hover { transform: scale(1.12); }
.studio-theme-btn.is-active {
  transform: scale(1.14);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .35), 0 0 18px rgba(255, 255, 255, .2);
}
.studio-theme-btn[data-theme="aurora"] {
  background: conic-gradient(from 210deg, #0f766e, #38bdf8, #0f172a, #0f766e);
}
.studio-theme-btn[data-theme="cinema"] {
  background: conic-gradient(from 180deg, #0a0a0a, #eab308, #292524, #0a0a0a);
}
.studio-theme-btn[data-theme="tide"] {
  background: conic-gradient(from 120deg, #082f49, #22d3ee, #1d4ed8, #082f49);
}
.studio-theme-btn[data-theme="ember"] {
  background: conic-gradient(from 40deg, #1c1917, #f97316, #7c2d12, #1c1917);
}
.studio-theme-btn[data-theme="sage"] {
  background: conic-gradient(from 90deg, #14532d, #86efac, #3f6212, #14532d);
}
.studio-theme-btn[data-theme="phosphor"] {
  background: conic-gradient(from 200deg, #022c22, #34d399, #064e3b, #022c22);
}

body.app-shell .studio-theme-panel {
  margin-top: 12px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(15, 23, 42, .04);
  border: 1px solid var(--app-line);
}
body.app-shell .studio-theme-panel h4 {
  margin: 0 0 10px;
  font-size: .85rem;
  font-weight: 800;
  color: var(--app-ink);
}
body.app-shell #main-navbar .studio-dock-inline {
  display: none;
  align-items: center;
  gap: 6px;
  margin-inline: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, .04);
  border: 1px solid var(--app-line);
}
@media (min-width: 1200px) {
  body.app-shell #main-navbar .studio-dock-inline { display: inline-flex; }
}
body.app-shell #main-navbar .studio-dock-inline .studio-theme-btn {
  width: 22px;
  height: 22px;
}
body.app-shell #main-navbar .studio-dock-inline .studio-theme-btn.is-active {
  box-shadow: 0 0 0 2px var(--studio-accent), 0 0 12px var(--studio-glow);
}