/* 01. Variables */

:root {
  color-scheme: dark;
  --bg: #0B0F14;
  --panel: #121821;
  --panel2: #18212C;
  --line: #263241;
  --text: #F1F5F9;
  --muted: #94A3B8;
  --gold: #F5B942;
  --green: #22C55E;
  --red: #EF4444;
  --blue: #38BDF8;
  --purple: #aa8cff;
  --sidebar-bg: #0D141C;
  --surface: #18212C;
  --success-bg: #0C2A1D;
  --warning-bg: #2A2110;
  --error-bg: #331B1D;
  --focus: var(--blue);
  --overlay: #0009;
  --backdrop: #000a;
  --primary: #047857;
  --primary-hover: #065F46;
  --primary-border: #047857;
  --accent: #F5B942;
  --accent-soft: #2A2110;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --sidebar-width: 248px;
  --table-min-width: 760px;
  --white: #fff;
  --text-soft: #C1CBD6;
  --nav-active-bg: #103A32;
  --nav-active-text: #34D399;
  --phase-bg: #1C2632;
  --phase-text: #94A3B8;
  --control-text: #CBD5E1;
  --badge-success-bg: #0C2A1D;
  --badge-success-text: #22C55E;
  --badge-error-text: #EF4444;
  --badge-warning-bg: #2A2110;
  --badge-warning-text: #F59E0B;
  --badge-info-bg: #123243;
  --badge-info-text: #38BDF8;
  --badge-purple-bg: #261D38;
  --badge-purple-text: #C4A8FF;
  --row-line: #202B38;
  --tab-active-bg: #103A32;
  --label-text: #AEB9C6;
  --input-bg: #0D141B;
  --input-border: #263241;
  --input-text: #F1F5F9;
  --step-bg: #1C2632;
  --step-line: #263241;
  --selected-bg: #103A32;
  --note-bg: #121821;
  --success-border: #14532D;
  --success-text: #22C55E;
  --warning-border: #66470E;
  --warning-text: #F59E0B;
  --phase-border: #33404E;
  --phase-banner-text: #94A3B8;
  --shadow: #0008;
  --chart-interval: #F5B94240;
  --error-text: #EF4444;
  --step-done-bg: #14532D;
}


:root[data-theme="light"] {
  color-scheme: light;
  --bg: #F6F8FA;
  --panel: #FFFFFF;
  --panel2: #F0F3F6;
  --line: #DDE3EA;
  --text: #17202A;
  --muted: #667085;
  --gold: #D99A16;
  --green: #16A34A;
  --red: #DC2626;
  --blue: #0284C7;
  --purple: #7143B1;
  --sidebar-bg: #F1F5F4;
  --surface: #F0F3F6;
  --success-bg: #DDF7EE;
  --warning-bg: #FFF7DF;
  --error-bg: #FDECEC;
  --overlay: #16233866;
  --backdrop: #16233888;
  --primary: #047857;
  --primary-hover: #065F46;
  --primary-border: #047857;
  --accent: #D99A16;
  --accent-soft: #FFF7DF;
  --text-soft: #475467;
  --nav-active-bg: #DDF7EE;
  --nav-active-text: #047857;
  --phase-bg: #EDF1F5;
  --phase-text: #667085;
  --control-text: #344054;
  --badge-success-bg: #DDF7EE;
  --badge-success-text: #16A34A;
  --badge-error-text: #DC2626;
  --badge-warning-bg: #FFF7DF;
  --badge-warning-text: #D97706;
  --badge-info-bg: #E0F2FE;
  --badge-info-text: #0284C7;
  --badge-purple-bg: #F0E9FC;
  --badge-purple-text: #68349F;
  --row-line: #E6EBF0;
  --tab-active-bg: #DDF7EE;
  --label-text: #475467;
  --input-bg: #FFFFFF;
  --input-border: #C7D0DA;
  --input-text: #17202A;
  --step-bg: #E9EDF2;
  --step-line: #DDE3EA;
  --selected-bg: #DDF7EE;
  --note-bg: #F0F3F6;
  --success-border: #8BC4A1;
  --success-text: #16A34A;
  --warning-border: #D97706;
  --warning-text: #D97706;
  --phase-border: #C7D0DA;
  --phase-banner-text: #667085;
  --shadow: #24364D26;
  --chart-interval: #D99A162E;
  --error-text: #DC2626;
  --step-done-bg: #BBF7D0;
}

:root[data-theme="light"] .nav button.active,
:root[data-theme="light"] .tab.active {
  color: var(--nav-active-text);
}

:root[data-theme="light"] .nav button:hover,
:root[data-theme="light"] .search,
:root[data-theme="light"] .skip-link,
:root[data-theme="light"] .step.active {
  color: var(--text);
}

.step.active span {
  color: var(--white);
}

#theme-toggle {
  flex-shrink: 0;
  white-space: nowrap;
}

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
  flex-shrink: 0;
}

.icon-button:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.icon-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

#theme-toggle .theme-icon {
  display: inline-flex;
  line-height: 0;
}

#theme-toggle .theme-icon-dark {
  display: none;
}

:root[data-theme="light"] #theme-toggle .theme-icon-light {
  display: none;
}

:root[data-theme="light"] #theme-toggle .theme-icon-dark {
  display: inline-flex;
}