:root{
  color-scheme: light;


  --bg: #ffffff;
  --fg: #0f172a;
  --muted: #475569;


  --surface: #ffffff;
  --surface-2: #f6f7fb;


  --border: rgba(15, 23, 42, 0.10);


  --accent: #ff8a1e;
  --accent-2: #ffb15c;


  --focus: rgba(255, 138, 30, 0.35);
}

html[data-theme="dark"] {
  color-scheme: dark;
}

:root[data-theme="dark"]{
  --bg: #0b1220;
  --fg: #e7eefc;
  --muted: rgba(231, 238, 252, 0.70);

  --surface: #0f182a;
  --surface-2: #121e34;

  --border: rgba(231, 238, 252, 0.12);

  --accent: #ff8a1e;
  --accent-2: #ffb15c;

  --focus: rgba(255, 138, 30, 0.40);
}


html, body{
  background: var(--bg);
  color: var(--fg);
}


a{
  color: inherit;
}


.themeToggle{
  margin-left: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  height: 34px;
  min-width: 34px;
  padding: 0 10px;

  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);

  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;

  transition: transform .08s ease, background .15s ease, border-color .15s ease;
}

.themeToggle:hover{
  background: var(--surface-2);
}

.themeToggle:active{
  transform: translateY(1px);
}

.themeToggle:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px var(--focus);
}


.themeToggle__icon{
  font-size: 16px;
  line-height: 1;
}


.themeToggle__label{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--muted);
}


.topbar__nav .themeToggle{
  align-self: center;
}