/* ═══════════════════════════════════════════════════════════════════
   terminal.css — Shaun Burdick terminal design tokens & shared styles
   ═══════════════════════════════════════════════════════════════════ */

/* ─── tokens — Shaun Burdick terminal palette ───────────────────── */
:root {
  --bg:      #000000;   /* terminal black — primary canvas */
  --surface: #002700;   /* dark green surface — cards, code blocks */
  --fg:      #eeeeee;   /* terminal white — body text */
  --muted:   #009a00;   /* dim green — secondary text, metadata (WCAG AA on black) */
  --border:  #005800;   /* terminal green border — hairlines, dividers */
  --accent:  #00ff00;   /* terminal green (#0f0) — links, active, CTA */

  /* derived */
  --accent-soft: color-mix(in oklch, var(--accent) 12%, transparent);
  --fg-soft:     color-mix(in oklch, var(--fg) 8%, transparent);
  --accent-dim: #00c200; /* secondary interactive, hover states */
  --accent-glow: 0 0 12px color-mix(in oklch, var(--accent) 30%, transparent);

  /* type — Fira Code throughout (display, body, mono all same) */
  --font-display: 'Fira Code', Consolas, Monaco, 'Ubuntu Mono', 'Liberation Mono', 'Courier New', Courier, monospace;
  --font-body:    'Fira Code', Consolas, Monaco, 'Ubuntu Mono', 'Liberation Mono', 'Courier New', Courier, monospace;
  --font-mono:    'Fira Code', Consolas, Monaco, 'Ubuntu Mono', 'Liberation Mono', 'Courier New', Courier, monospace;

  /* scale */
  --fs-h1: clamp(36px, 5vw, 56px);
  --fs-h2: clamp(26px, 3.6vw, 38px);
  --fs-h3: 18px;
  --fs-lead: 17px;
  --fs-body: 15px;
  --fs-meta: 12px;

  /* spacing — 8-point grid */
  --gap-xs: 8px;
  --gap-sm: 12px;
  --gap-md: 20px;
  --gap-lg: 32px;
  --gap-xl: 56px;
  --gap-2xl: 88px;
  --container: 960px;
  --gutter: 24px;

  --radius: 4px;
  --radius-lg: 4px;     /* terminal corners — always 4px */
}

/* ─── reset & base ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
p { text-wrap: pretty; max-width: 64ch; margin: 0; }
h1, h2, h3, h4 { text-wrap: balance; margin: 0; }

::selection { background: var(--accent); color: var(--bg); }

/* ─── terminal decoration ────────────────────────────────────────── */
.terminal-line {
  display: flex; align-items: baseline; gap: 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--muted);
  line-height: 1.8;
}
.terminal-line .prompt {
  color: var(--muted);
  flex-shrink: 0;
  user-select: none;
}
.cursor {
  display: inline-block;
  width: 8px;
  height: 14px;
  background: var(--accent);
  animation: blink 1s step-end infinite;
  margin-left: 2px;
}
@keyframes blink { 50% { opacity: 0; } }

/* ─── accessibility: focus, motion, skip link ─────────────────── */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Clear sticky header when navigating to anchor targets */
[id]:not(.topbar) {
  scroll-margin-top: 64px;
}

/* Skip link — visible only on focus */
.skip-link {
  position: absolute;
  top: -40px;
  left: var(--gutter);
  background: var(--accent);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: 14px;
  padding: 8px 16px;
  z-index: 100;
  transition: top 0.15s ease;
  border-radius: 0 0 var(--radius) var(--radius);
}
.skip-link:focus {
  top: 0;
  outline: 2px solid var(--fg);
  outline-offset: 0;
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}