/* brion.in · terminal colorschemes, one layout
   themes map real terminal palettes onto semantic vars */

:root {
  --mono: "Iosevka", "JetBrains Mono", "Fira Code", ui-monospace,
          "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, sans-serif;
  --maxw: 46rem;
  --tocw: 11rem;
  --radius: 6px;
}

/* ---------- colorschemes ---------- */
[data-theme="gruvbox-dark"] {
  --bg: #282828; --bg-alt: #1d2021; --bg-soft: #32302f;
  --fg: #ebdbb2; --fg-dim: #928374; --border: #504945;
  --accent: #fabd2f; --accent-2: #fe8019; --green: #b8bb26;
  --link: #83a598; color-scheme: dark;
}
[data-theme="gruvbox-light"] {
  --bg: #fbf1c7; --bg-alt: #f2e5bc; --bg-soft: #ebdbb2;
  --fg: #3c3836; --fg-dim: #7c6f64; --border: #d5c4a1;
  --accent: #b57614; --accent-2: #af3a03; --green: #79740e;
  --link: #076678; color-scheme: light;
}
[data-theme="dracula"] {
  --bg: #282a36; --bg-alt: #21222c; --bg-soft: #343746;
  --fg: #f8f8f2; --fg-dim: #6272a4; --border: #44475a;
  --accent: #bd93f9; --accent-2: #ff79c6; --green: #50fa7b;
  --link: #8be9fd; color-scheme: dark;
}
[data-theme="nord"] {
  --bg: #2e3440; --bg-alt: #272c36; --bg-soft: #3b4252;
  --fg: #d8dee9; --fg-dim: #616e88; --border: #434c5e;
  --accent: #88c0d0; --accent-2: #81a1c1; --green: #a3be8c;
  --link: #88c0d0; color-scheme: dark;
}
[data-theme="catppuccin-mocha"] {
  --bg: #1e1e2e; --bg-alt: #181825; --bg-soft: #313244;
  --fg: #cdd6f4; --fg-dim: #6c7086; --border: #45475a;
  --accent: #cba6f7; --accent-2: #f5c2e7; --green: #a6e3a1;
  --link: #89b4fa; color-scheme: dark;
}
[data-theme="solarized-light"] {
  --bg: #fdf6e3; --bg-alt: #eee8d5; --bg-soft: #eee8d5;
  --fg: #586e75; --fg-dim: #93a1a1; --border: #d9d2c0;
  --accent: #b58900; --accent-2: #cb4b16; --green: #859900;
  --link: #268bd2; color-scheme: light;
}
[data-theme="tokyo-night"] {
  --bg: #1a1b26; --bg-alt: #16161e; --bg-soft: #24283b;
  --fg: #c0caf5; --fg-dim: #565f89; --border: #3b4261;
  --accent: #7aa2f7; --accent-2: #bb9af7; --green: #9ece6a;
  --link: #7dcfff; color-scheme: dark;
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 1.0rem;
  line-height: 1.65;
  transition: background-color .2s ease, color .2s ease;
}

a { color: var(--link); text-underline-offset: 3px; }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
code, kbd, pre { font-family: var(--mono); }
kbd {
  border: 1px solid var(--border); border-bottom-width: 2px;
  border-radius: 4px; padding: 0 .35em; font-size: .85em;
  background: var(--bg-soft);
}

.p-user { color: var(--green); }
.p-host { color: var(--accent); }
.p-dim  { color: var(--fg-dim); }

/* ---------- topbar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .6rem 1.25rem;
  background: color-mix(in srgb, var(--bg-alt) 88%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border);
}
.brand {
  font-family: var(--mono); font-size: .95rem;
  text-decoration: none; color: var(--fg);
}
.topbar-right { display: flex; align-items: center; gap: .5rem; }
.theme-label { font-family: var(--mono); font-size: .8rem; color: var(--fg-dim); }
#theme-select {
  font-family: var(--mono); font-size: .8rem;
  background: var(--bg-soft); color: var(--fg);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: .25rem .5rem; cursor: pointer;
}

/* ---------- frame: toc + main ---------- */
.frame {
  display: grid; grid-template-columns: var(--tocw) minmax(0, var(--maxw));
  gap: 3rem; justify-content: center;
  padding: 2.5rem 1.25rem 4rem;
}
.toc {
  position: sticky; top: 4rem; align-self: start;
  font-family: var(--mono); font-size: .82rem;
}
.toc-head { color: var(--fg-dim); margin: 0 0 .5rem; }
.toc ul { list-style: none; margin: 0; padding: 0; }
.toc li { margin: .3rem 0; }
.toc a { text-decoration: none; color: var(--fg-dim); }
.toc a:hover, .toc a[aria-current="page"] { color: var(--accent); }

main.lone { grid-column: 1 / -1; max-width: var(--maxw); margin: 0 auto; }

/* ---------- sections ---------- */
.sect { margin-bottom: 3.25rem; scroll-margin-top: 4.5rem; }
.sect-title {
  font-family: var(--mono); font-size: 1.05rem; font-weight: 600;
  color: var(--accent); letter-spacing: .02em;
  margin: 0 0 1rem;
  padding-bottom: .4rem; border-bottom: 1px solid var(--border);
}
h3 {
  font-family: var(--mono); font-size: .95rem; font-weight: 600;
  margin: 1.4rem 0 .1rem; color: var(--fg);
}

/* ---------- terminal hero ---------- */
.term {
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-alt); overflow: hidden;
  margin-bottom: 1rem;
}
.term-bar {
  display: flex; align-items: center; gap: .4rem;
  padding: .5rem .75rem; background: var(--bg-soft);
  border-bottom: 1px solid var(--border);
}
.dot { width: .65rem; height: .65rem; border-radius: 50%; background: var(--fg-dim); opacity: .55; }
.term-title { font-family: var(--mono); font-size: .75rem; color: var(--fg-dim); margin-left: .35rem; }
.term-body {
  margin: 0; padding: 1rem 1.1rem;
  font-size: .86rem; line-height: 1.6;
  white-space: pre-wrap; overflow-x: auto;
}
.cursor {
  display: inline-block; width: .55em; height: 1.1em;
  background: var(--fg); vertical-align: text-bottom;
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.status {
  font-family: var(--mono); font-size: .82rem; color: var(--fg-dim);
  display: flex; align-items: center; gap: .5rem; margin: .75rem 0;
}
.status-dot {
  width: .55rem; height: .55rem; border-radius: 50%;
  background: var(--green); flex: none;
  box-shadow: 0 0 6px var(--green);
}
.hero-copy { max-width: 60ch; }
.hero-cta { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.25rem; }
.btn {
  font-family: var(--mono); font-size: .85rem; text-decoration: none;
  padding: .5rem .9rem; border-radius: var(--radius);
  background: var(--accent); color: var(--bg);
  border: 1px solid var(--accent);
}
.btn:hover { background: var(--accent-2); border-color: var(--accent-2); color: var(--bg); }
.btn-ghost { background: transparent; color: var(--accent); }
.btn-ghost:hover { background: var(--bg-soft); color: var(--accent-2); }

/* ---------- key/value lists ---------- */
.kv { margin: 0; }
.kv dt {
  font-family: var(--mono); font-size: .85rem; font-weight: 600;
  color: var(--accent-2); margin-top: 1.1rem;
}
.kv dd { margin: .2rem 0 0; color: var(--fg); }
.kv-tight dt { margin-top: .8rem; }
.kv-tight dd { font-size: .95rem; }

/* ---------- lists / jobs ---------- */
ul.plain { padding-left: 1.1rem; margin: .5rem 0; }
ul.plain li { margin: .45rem 0; }
ul.plain li::marker { color: var(--fg-dim); }
.job { margin-bottom: 1.75rem; }
.job-meta { font-family: var(--mono); font-size: .78rem; color: var(--fg-dim); margin: .1rem 0 .4rem; }

.term-block {
  background: var(--bg-alt); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .8rem 1rem;
  font-size: .85rem; overflow-x: auto;
}

/* ---------- footer ---------- */
.footer {
  border-top: 1px solid var(--border);
  padding: 1.5rem 1.25rem 2.5rem;
  text-align: center; font-family: var(--mono); font-size: .78rem;
  color: var(--fg-dim);
}
.footer p { margin: .4rem 0; }

/* ---------- responsive ---------- */
@media (max-width: 52rem) {
  .frame { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .toc { position: static; margin-bottom: 2rem; }
  .toc ul { display: flex; flex-wrap: wrap; gap: .25rem .9rem; }
  .topbar { padding: .5rem .9rem; }
  .brand { font-size: .85rem; }
}