/* === Reusable Components === */

/* ── Terminal Window Chrome ── */
.terminal-chrome {
  background: var(--bg-terminal);
  border: var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.terminal-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-bottom: var(--border);
  background: var(--bg-card);
}

.terminal-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.3);
}

.terminal-dot--red    { background: var(--accent-red); }
.terminal-dot--yellow { background: var(--accent-yellow); }
.terminal-dot--green  { background: var(--accent-green); }

.terminal-title {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-left: var(--space-sm);
}

.terminal-body {
  padding: var(--space-lg);
}

/* ── Brutalist Button ── */
.btn-brutalist {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-lg);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-primary);
  background: var(--bg-card);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-default);
  cursor: pointer;
  transition: all var(--ease-default);
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  user-select: none;
}

.btn-brutalist:hover {
  box-shadow: var(--shadow-hover);
  transform: translate(4px, 4px);
  color: var(--accent-green);
}

.btn-brutalist:active {
  box-shadow: 0 0 0 #000;
  transform: translate(6px, 6px);
}

.btn-brutalist--accent {
  background: var(--accent-green);
  color: var(--bg-primary);
  border-color: var(--bg-primary);
}

.btn-brutalist--accent:hover {
  color: var(--bg-primary);
  background: var(--accent-yellow);
}

/* ── Brutalist Card ── */
.card-brutalist {
  background: var(--bg-card);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-default);
  transition: transform 200ms var(--ease-bounce), box-shadow 200ms ease,
              border-color 150ms ease;
  overflow: hidden;
}

.card-brutalist:hover {
  transform: translateY(-5px) scale(1.015);
  box-shadow: 0 14px 36px rgba(57, 255, 20, 0.14), var(--shadow-default);
  border-color: var(--accent-green);
}

.card-body {
  padding: var(--space-lg);
}

.card-footer {
  padding: var(--space-md) var(--space-lg);
  border-top: var(--border);
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

/* ── Brutalist Tag/Badge ── */
.tag-brutalist {
  display: inline-flex;
  align-items: center;
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--accent-green);
  background: var(--bg-primary);
  border: 2px solid var(--accent-green);
  border-radius: var(--radius);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  transition: all var(--ease-default);
}

.tag-brutalist:hover {
  background: var(--accent-green);
  color: var(--bg-primary);
}

.tag-brutalist--yellow {
  color: var(--accent-yellow);
  border-color: var(--accent-yellow);
}

.tag-brutalist--yellow:hover {
  background: var(--accent-yellow);
  color: var(--bg-primary);
}

/* ── Section Heading ($ command style) ── */
.section-heading {
  font-size: var(--fs-xl);
  font-weight: 700;
  margin-bottom: var(--space-2xl);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.section-heading .prompt {
  font-size: var(--fs-lg);
}

/* ── Blinking Cursor ── */
.cursor-blink {
  display: inline-block;
  color: var(--accent-green);
  animation: blink 1s steps(1) infinite;
  font-weight: 400;
  margin-left: 2px;
}

/* ── Glitch hover effect ── */
.glitch-hover {
  position: relative;
}

.glitch-hover:hover {
  animation: glitch-flicker 0.15s steps(2) 1;
}

/* ── Link with bracket decoration ── */
.link-bracket {
  color: var(--text-secondary);
  transition: color var(--ease-default);
}

.link-bracket:hover {
  color: var(--accent-green);
}

.link-bracket::before { content: '[ '; color: var(--text-muted); }
.link-bracket::after  { content: ' ]'; color: var(--text-muted); }