/* ── themes ──
 * Reset, base element styles and the 13 theme variable blocks.
 * Linked from index.html in cascade order — the order is load-bearing. */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Theme variables ───────────────────────────────── */
:root {
  --bg-page:     #0b0c0d;
  --bg-raised:   #121316;
  --bg-code:     #16181c;
  --fg:          #d7dbd7;
  --fg-dim:      #6f7478;
  --fg-faint:    #43474b;
  --accent:      #4ec94e;
  --border:      #212429;
  --border-soft: #1a1c20;
  --cursor-color: #4ec94e;
  --warn:        #e5c07b;
  --danger:      #e06c75;

  --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent);
  --accent-line: color-mix(in srgb, var(--accent) 30%, transparent);

  --font-size:    14px;
  /* Chrome text (sidebar + tabline) scales from this one value; every size in those
     two panels is an em fraction of it, so the whole panel resizes together. Kept
     separate from --font-size because the note you are reading and the furniture
     around it want different sizes — that is the point of having two controls. */
  --ui-font-size: 12.5px;
  --line-height:  1.6;
  --status-height: 34px;
  --radius: 6px;
  --col-width: 760px;
  --ease: cubic-bezier(0.25, 0.6, 0.3, 1);
}

:root[data-theme="github-dark"] {
  --bg-page:     #0d1117;
  --bg-raised:   #161b22;
  --bg-code:     #1c2129;
  --fg:          #c9d1d9;
  --fg-dim:      #8b949e;
  --fg-faint:    #484f58;
  --accent:      #58a6ff;
  --border:      #30363d;
  --border-soft: #21262d;
  --cursor-color: #58a6ff;
}

:root[data-theme="nord"] {
  --bg-page:     #2e3440;
  --bg-raised:   #3b4252;
  --bg-code:     #434c5e;
  --fg:          #eceff4;
  --fg-dim:      #a0aab8;
  --fg-faint:    #6b7689;
  --accent:      #88c0d0;
  --border:      #4c566a;
  --border-soft: #3b4252;
  --cursor-color: #88c0d0;
}

:root[data-theme="solarized-light"] {
  --bg-page:     #fdf6e3;
  --bg-raised:   #eee8d5;
  --bg-code:     #e9e2cd;
  --fg:          #586e75;
  --fg-dim:      #839496;
  --fg-faint:    #b0aa93;
  --accent:      #268bd2;
  --border:      #ccc4b0;
  --border-soft: #ddd6c1;
  --cursor-color: #268bd2;
}

:root[data-theme="dracula"] {
  --bg-page:     #1e1e2e;
  --bg-raised:   #282a36;
  --bg-code:     #21222c;
  --fg:          #f8f8f2;
  --fg-dim:      #8a93b5;
  --fg-faint:    #6272a4;
  --accent:      #bd93f9;
  --border:      #44475a;
  --border-soft: #313341;
  --cursor-color: #f1fa8c;
}

:root[data-theme="one-dark"] {
  --bg-page:     #1e2127;
  --bg-raised:   #21252b;
  --bg-code:     #282c34;
  --fg:          #abb2bf;
  --fg-dim:      #828997;
  --fg-faint:    #5c6370;
  --accent:      #61afef;
  --border:      #3a3f4b;
  --border-soft: #2c313a;
  --cursor-color: #61afef;
}

:root[data-theme="tokyo-night"] {
  --bg-page:     #1a1b26;
  --bg-raised:   #1f2335;
  --bg-code:     #24283b;
  --fg:          #c0caf5;
  --fg-dim:      #8189af;
  --fg-faint:    #565f89;
  --accent:      #7aa2f7;
  --border:      #3b4261;
  --border-soft: #292e44;
  --cursor-color: #7aa2f7;
}

:root[data-theme="github-light"] {
  --bg-page:     #ffffff;
  --bg-raised:   #f6f8fa;
  --bg-code:     #f0f3f6;
  --fg:          #24292f;
  --fg-dim:      #57606a;
  --fg-faint:    #8c959f;
  --accent:      #0969da;
  --border:      #d0d7de;
  --border-soft: #e4e8ec;
  --cursor-color: #0969da;
}

:root[data-theme="atom-one-light"] {
  --bg-page:     #fafafa;
  --bg-raised:   #f0f0f0;
  --bg-code:     #eaeaeb;
  --fg:          #383a42;
  --fg-dim:      #696c77;
  --fg-faint:    #a0a1a7;
  --accent:      #4078f2;
  --border:      #dcdce0;
  --border-soft: #e8e8ea;
  --cursor-color: #4078f2;
}

:root[data-theme="gruvbox-light"] {
  --bg-page:     #fbf1c7;
  --bg-raised:   #f2e5bc;
  --bg-code:     #ecdfb0;
  --fg:          #3c3836;
  --fg-dim:      #665c54;
  --fg-faint:    #a89984;
  --accent:      #af3a03;
  --border:      #d5c4a1;
  --border-soft: #e5d9b3;
  --cursor-color: #af3a03;
}

:root[data-theme="solarized-dark"] {
  --bg-page:     #002b36;
  --bg-raised:   #073642;
  --bg-code:     #05303b;
  --fg:          #93a1a1;
  --fg-dim:      #839496;
  --fg-faint:    #586e75;
  --accent:      #268bd2;
  --border:      #0a4351;
  --border-soft: #073642;
  --cursor-color: #268bd2;
}

:root[data-theme="gruvbox-dark"] {
  --bg-page:     #282828;
  --bg-raised:   #3c3836;
  --bg-code:     #32302f;
  --fg:          #ebdbb2;
  --fg-dim:      #bdae93;
  --fg-faint:    #928374;
  --accent:      #fabd2f;
  --border:      #504945;
  --border-soft: #3c3836;
  --cursor-color: #fabd2f;
}

:root[data-theme="catppuccin-mocha"] {
  --bg-page:     #1e1e2e;
  --bg-raised:   #181825;
  --bg-code:     #11111b;
  --fg:          #cdd6f4;
  --fg-dim:      #a6adc8;
  --fg-faint:    #6c7086;
  --accent:      #89b4fa;
  --border:      #45475a;
  --border-soft: #313244;
  --cursor-color: #89b4fa;
}