/* shared.css — portfolio base */
:root {
  --bg: #0c0c0e;
  --fg: #d4d4d4;
  --fg-dim: #8a8a8a;
  --fg-faint: #4a4a4a;
  --accent: #ff6b6b;
  --green: #6bd06b;
  --rule: #1e1e22;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
:root[data-theme="light"] {
  --bg: #f5f3ee;
  --fg: #1a1a1d;
  --fg-dim: #6a6a6a;
  --fg-faint: #b0ada5;
  --rule: #ddd9d0;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  transition: background 180ms ease, color 180ms ease;
  min-height: 100vh;
}
::selection { background: var(--accent); color: var(--bg); }
a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--fg-faint); transition: color 120ms ease, border-color 120ms ease; }
a:hover { color: var(--accent); border-color: var(--accent); }

.prompt { color: var(--accent); }
.dim { color: var(--fg-dim); }
.faint { color: var(--fg-faint); }
.grn { color: var(--green); }
.accent { color: var(--accent); }

/* toggles top-right */
.top-toggles { display: flex; gap: 14px; }
.top-toggles button { background: transparent; border: 0; font-family: var(--mono); font-size: 12px; color: var(--fg-dim); cursor: pointer; padding: 0; letter-spacing: 0.02em; transition: color 120ms ease; }
.top-toggles button:hover { color: var(--accent); }

/* blink cursor */
.blink { display: inline-block; width: 8px; height: 14px; background: var(--accent); animation: blink 1.05s steps(2) infinite; vertical-align: -2px; margin-left: 4px; }
@keyframes blink { 50% { opacity: 0; } }
:root[data-cursor="false"] .blink { animation: none; opacity: 0.5; }

/* subtle scanline overlay (dark + shell only) */
body.shell::after {
  content: ""; position: fixed; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(255,255,255,0.012) 2px 3px);
  z-index: 1; mix-blend-mode: overlay;
}
:root[data-theme="light"] body.shell::after { display: none; }

/* glitch on name hover */
.name { cursor: default; position: relative; display: inline-block; }
.name:hover { animation: glitch 0.4s steps(2) 1; }
@keyframes glitch {
  0% { transform: translate(0,0); }
  20% { transform: translate(-1px,1px); color: var(--accent); }
  40% { transform: translate(1px,-1px); }
  60% { transform: translate(-1px,0); color: var(--green); }
  100% { transform: translate(0,0); }
}