/* Theme for the tool and admin pages (layouts/application).

   Every colour here is an alias for a token in palettes.css, so the tools
   follow the visitor's palette the same way the public pages do. The old
   names stay because the React components and the pitch page use them.
   Panels are flat (ground-2 on ground, a line border) and buttons press
   down like .button in site.css. */
:root {
  --bg-primary: var(--ground);
  --bg-secondary: var(--ground-2);
  --bg-card: var(--ground-2);
  --bg-card-hover: var(--ground-3);
  --bg-glass: var(--ground-2);
  --bg-glass-thick: var(--ground-3);
  --text-primary: var(--ink);
  --text-secondary: var(--ink);
  --text-muted: var(--ink-2);
  --border-color: var(--line);
  --border-glass: var(--line);
  --accent-color: var(--brand);
  --accent-hover: var(--brand);
  --accent-secondary: var(--brand);
  --success-color: var(--moss);
  --warning-color: var(--sun);
  --danger-color: var(--clay);
  --purple-accent: var(--plum);
  --pink-accent: var(--clay);
  --indigo-accent: var(--plum);
  --teal-accent: var(--sky);
  --green-accent: var(--moss);
  --orange-accent: var(--clay);
  --gradient-primary: var(--brand);
  --gradient-accent: var(--brand);
  --shadow-color: var(--shade);
  --font: "Recursive", ui-sans-serif, system-ui, sans-serif;
  --font-code: "Recursive", ui-monospace, SFMono-Regular, Menlo, monospace;
  --radius: 0.6rem;
  --press: 0 0.25rem 0 var(--shade);
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font);
}

/* A panel. The name is left over from the old look. */
.glass,
.glass-thick {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.9rem;
  border: none;
  border-radius: var(--radius);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  font-variation-settings: "CASL" 0.6;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.btn-primary {
  background: var(--accent-color);
  color: var(--bg-primary);
  box-shadow: var(--press);
}

.btn-secondary {
  background: var(--bg-glass-thick);
  color: var(--text-primary);
  box-shadow: var(--press);
}

.btn:hover {
  transform: translateY(-0.1rem) rotate(-1deg);
}

.btn:active {
  transform: translateY(0.2rem);
  box-shadow: 0 0.05rem 0 var(--shade);
}

.btn:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
}