/* Shared palette inspired by the Agentic Testing and AI Skills artwork. */
:root {
  --ink: #102653;
  --muted: #526481;
  --paper: #f5f9ff;
  --surface: #ffffff;
  --line: #c7dbfa;
  --accent: #0755df;
  --accent-dark: #073ba5;
  --terminal: #0b1938;
  --terminal-muted: #a5bce4;
  --cyan: #00b9f2;
  --yellow: #ffd12f;
  --orange: #ff8a24;
  --blue-soft: #e8f1ff;
  --cyan-soft: #e4faff;
  --yellow-soft: #fff8d9;
  --theme-shadow: rgba(7, 85, 223, 0.12);
}

body {
  background: var(--paper);
}

.top-bar {
  border-bottom-color: var(--line);
  background: var(--surface);
  box-shadow: 0 3px 16px var(--theme-shadow);
}

.top-bar::before {
  background: var(--accent);
}

.page-menu a:hover,
.page-menu a:focus-visible {
  background: var(--blue-soft);
}

.page-menu a[aria-current="page"] {
  background: var(--accent);
  box-shadow: 0 3px 0 var(--accent-dark);
}

h1, h2, h3 { color: var(--accent-dark); }

.objective {
  border-color: var(--line);
  border-top-color: var(--accent);
  background: var(--blue-soft);
  box-shadow: 0 4px 0 var(--theme-shadow);
}

.objective:nth-child(2) {
  border-top-color: var(--cyan);
  background: var(--cyan-soft);
}

.objective:nth-child(3) {
  border-top-color: var(--yellow);
  background: var(--yellow-soft);
}

.objective-number {
  border-color: var(--accent);
  background: var(--accent);
  color: white;
}

.objective:nth-child(2) .objective-number {
  border-color: var(--cyan);
  background: var(--cyan);
  color: var(--ink);
}

.objective:nth-child(3) .objective-number {
  border-color: var(--yellow);
  background: var(--yellow);
  color: var(--ink);
}

.guide > ol::before,
.exercise-list::before {
  background: var(--cyan);
}

.step-meta::before,
.exercise-number::before {
  border-color: var(--accent);
  background: var(--blue-soft);
  box-shadow: 0 3px 0 var(--theme-shadow);
}

.command,
.skill-template {
  border-color: #244576;
  background: var(--terminal);
  box-shadow: 0 5px 0 var(--theme-shadow), 0 10px 20px rgba(16, 38, 83, 0.08);
}

.command { border-top-color: var(--cyan); }
.prompt { color: var(--cyan); }
code, .skill-template code { color: #eff7ff; }

.copy {
  border-color: var(--cyan);
  background: rgba(0, 185, 242, 0.12);
  color: #9ce9ff;
}

.copy:hover,
.copy:focus-visible {
  border-color: var(--cyan);
  background: var(--accent);
  color: white;
}

.skill-template-header {
  border-bottom-color: #244576;
  background: #142e5c;
  color: #9ce9ff;
}

.repo-link,
.substep,
.setup-image,
.skill-name,
.considerations li,
.site-footer a {
  border-color: var(--line);
}

.setup-image { box-shadow: 0 5px 18px var(--theme-shadow); }

.agent-option {
  background: var(--blue-soft);
  box-shadow: 0 2px 0 var(--theme-shadow);
}

.step-note a {
  border-color: #a6c6ff;
  background: var(--blue-soft);
  box-shadow: 0 2px 0 var(--theme-shadow);
}

.step-note a:hover,
.step-note a:focus-visible {
  background: #d7e7ff;
  box-shadow: 0 3px 0 var(--theme-shadow);
}

.board-link {
  border-color: var(--yellow);
  background: var(--yellow);
  color: var(--ink);
  box-shadow: 0 3px 0 #e6a800;
}

.board-link:hover,
.board-link:focus-visible {
  border-color: #ffbb20;
  background: #ffbb20;
  color: var(--ink);
  box-shadow: 0 4px 0 #c88700;
}

.reflection {
  border-color: #efd37a;
  border-left-color: var(--yellow);
  background: var(--yellow-soft);
  box-shadow: 0 3px 0 rgba(230, 168, 0, 0.12);
}

.reflection strong::before {
  background: var(--yellow);
  color: var(--ink);
}

.reflection-prompts .reflection-question {
  border-color: #efd37a;
  background: var(--surface);
}

.considerations li:hover {
  box-shadow: 0 4px 12px var(--theme-shadow);
}

.site-footer a { box-shadow: 0 3px 0 var(--theme-shadow); }

.site-footer a:hover,
.site-footer a:focus-visible { background: var(--blue-soft); }

a:focus-visible,
button:focus-visible,
.copy:focus-visible,
.agent-option:focus-visible,
.repo-link:focus-visible,
.board-link:focus-visible {
  outline-color: #e69500;
}