:root{
  --color-primary: #f50000;
  --color-secondary: #251b50;

  /* Light theme tokens */
  --page-bg: #f6f7fb;
  --text: #11131a;
  --header-bg: #e7e8ee;
  --note-bg: #fffbea;
  --note-text: #11131a;
  --shadow: 0 18px 60px rgba(37, 27, 80, .14);
  --ring: rgba(245, 0, 0, .35);
}

html[data-theme="dark"]{
  --page-bg: #0b1020;
  --text: #eaf0ff;
  --header-bg: rgba(255, 255, 255, .08);
  --note-bg: rgba(255, 255, 255, .08);
  --note-text: #eaf0ff;
  --shadow: 0 18px 60px rgba(0, 0, 0, .45);
  --ring: rgba(245, 0, 0, .45);
}

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

.theme-toggle{
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 9999;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  color: var(--text);
  display: inline-flex;
  align-items:center;
  justify-content:center;
  cursor: pointer;
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
}

html:not([data-theme="dark"]) .theme-toggle{
  border-color: rgba(37, 27, 80, .20);
  background: rgba(37, 27, 80, .06);
}

.theme-toggle:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px var(--ring), var(--shadow);
}

.home-button{
  position: fixed;
  top: 14px;
  left: 68px; /* 44px button + 10px gap + 14px margin */
  z-index: 9999;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  color: var(--color-primary);
  display: inline-flex;
  align-items:center;
  justify-content:center;
  cursor: pointer;
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
}

html:not([data-theme="dark"]) .home-button{
  border-color: rgba(245, 0, 0, .28);
  background: rgba(245, 0, 0, .06);
}

.home-button:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px var(--ring), var(--shadow);
}