@font-face {
  font-family: 'MapleMono';
  src: url('./fonts/MapleMono-TTF/MapleMono-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'MapleMono';
  src: url('./fonts/MapleMono-TTF/MapleMono-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

/* ── fairyfloss light ────────────────────────────── */
/* violet ink on pale lavender — ~9.4:1 (AAA)        */
:root {
  color-scheme: light;
  --bg:          #fdf4ff;
  --fg:          #6b21a8;
  --accent:      #a21caf;  /* 5.8:1 on --bg  — AA  */
  --dim:         #7e22ce;  /* 7.5:1 on --bg  — AAA */
  --placeholder: #9333ea;  /* 5.0:1 on --bg  — AA  */
  --error:       #b91c1c;  /* 6.0:1 on --bg  — AA  */
  --border:      #f5d0fe;  /* decorative only       */
  --input-border:#a21caf;  /* 5.8:1 on --bg  — UI component AA */
  --pad:         12px;
  --font:        'MapleMono', 'Courier New', Courier, monospace;
}

/* ── fairyfloss dark ─────────────────────────────── */
/* pale lavender on deep violet — all AAA             */
[data-theme="dark"] {
  color-scheme: dark;
  --bg:          #1a0030;
  --fg:          #f0e6ff;  /* 16.5:1 on --bg — AAA */
  --accent:      #e879f9;  /*  8.3:1 on --bg — AAA */
  --dim:         #c084fc;  /*  7.4:1 on --bg — AAA */
  --placeholder: #a78bfa;  /*  7.5:1 on --bg — AAA */
  --error:       #f87171;  /*  7.4:1 on --bg — AAA */
  --border:      #7c3aed;  /*  3.4:1 on --bg — UI component AA */
  --input-border:#7c3aed;
}

/* ── system dark preference (no-JS / pre-JS fallback) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg:          #1a0030;
    --fg:          #f0e6ff;
    --accent:      #e879f9;
    --dim:         #c084fc;
    --placeholder: #a78bfa;
    --error:       #f87171;
    --border:      #7c3aed;
    --input-border:#7c3aed;
  }
}

/* ── reset ───────────────────────────────────────── */

* { box-sizing: border-box; margin: 0; padding: 0; font-family: inherit; }

/* ── body ────────────────────────────────────────── */

body {
  font-variant-ligatures: common-ligatures contextual;
  font-feature-settings: "liga" 1, "calt" 1;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 16px;
}

/* ── toolbar ─────────────────────────────────────── */

#toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: var(--pad);
  border-bottom: 1px solid var(--border);
}

#toolbar-title {
  color: var(--accent);
  font-weight: bold;
  letter-spacing: 0.05em;
  margin-right: 4px;
  text-decoration: none;
}

.tool-btn {
  display: inline-block;
  text-decoration: none;
  background: transparent;
  color: var(--dim);
  border: 1px solid var(--border);
  font-family: var(--font);
  font-size: 14px;
  padding: 4px 10px;
  cursor: pointer;
  letter-spacing: 0.03em;
}

.tool-btn:hover, .tool-btn:active {
  color: var(--bg);
  background: var(--accent);
  border-color: var(--accent);
}

.tool-btn[aria-current="page"] {
  color: var(--bg);
  background: var(--accent);
  border-color: var(--accent);
  cursor: default;
  pointer-events: none;
}