/* The From The Forest palette: forest, moss, ember, canvas, with the same
 * role names and theme switch as the ftf-design-system (data-ftf-theme on
 * <html>, "ftf-theme" in localStorage). Values mirror that package's
 * tokens; the terminal look is this page's own. */
:root {
  --ftf-forest-50:  #E6EDE8;
  --ftf-forest-100: #C6D4CB;
  --ftf-forest-200: #8FA897;
  --ftf-forest-300: #5E7D6A;
  --ftf-forest-400: #3D5A48;
  --ftf-forest-500: #2A4234;
  --ftf-forest-600: #1B2E23;
  --ftf-forest-700: #132218;
  --ftf-forest-800: #0C1F17;
  --ftf-forest-900: #07110C;
  --ftf-moss-100: #D9E1D6;
  --ftf-moss-200: #B3C2AB;
  --ftf-moss-300: #8DA382;
  --ftf-moss-400: #6B8463;
  --ftf-moss-500: #4E6649;
  --ftf-ember-300: #E3B77A;
  --ftf-ember-400: #D49C55;
  --ftf-ember-500: #B8823A;
  --ftf-ember-600: #8E6225;
  --ftf-canvas:     #E8E6DD;
  --ftf-canvas-dim: #B7B3A6;

  /* Roles, dark. */
  --surface:  var(--ftf-forest-800);
  --elevated: var(--ftf-forest-700);
  --sunken:   var(--ftf-forest-900);
  --border:   var(--ftf-forest-600);
  --border-strong: var(--ftf-moss-500);
  --text:     var(--ftf-canvas);
  --text-2:   var(--ftf-canvas-dim);
  --muted:    var(--ftf-moss-300);
  --accent:   var(--ftf-ember-400);
  --accent-hover: var(--ftf-ember-300);
  --success:  var(--ftf-moss-400);
  --warning:  var(--ftf-ember-300);
  --danger:   #C25A3E;
  --selection: var(--ftf-moss-500);
  /* The wordmark: etch in ember, eda in green, in both themes. */
  --brand-etch: var(--ftf-ember-400);
  --brand-eda:  var(--ftf-moss-300);

  /* Code: the editor's tokens. */
  --hl-comment: var(--ftf-moss-300);
  --hl-string:  var(--ftf-moss-400);
  --hl-keyword: var(--ftf-ember-400);
  --hl-type:    var(--ftf-ember-300);
  --hl-number:  var(--ftf-canvas-dim);
  --hl-meta:    var(--ftf-moss-200);

  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --serif: Lora, ui-serif, Georgia, serif;
  color-scheme: dark;
}

/* Light: canvas page, forest text, and moss for the structure: the bars,
 * the pane heads and the rules are moss so the forest is still in the
 * room. Ember reads poorly on canvas, so the accent goes forest green, as
 * the site does, and ember is kept for warnings. */
[data-ftf-theme="light"] {
  --surface:  var(--ftf-canvas);
  --elevated: var(--ftf-moss-100);
  --sunken:   var(--ftf-forest-50);
  --border:   var(--ftf-moss-200);
  --border-strong: var(--ftf-moss-400);
  --text:     var(--ftf-forest-900);
  --text-2:   var(--ftf-forest-600);
  --muted:    var(--ftf-moss-500);
  --accent:   var(--ftf-forest-600);
  --accent-hover: var(--ftf-forest-400);
  --success:  var(--ftf-forest-400);
  --warning:  var(--ftf-ember-600);
  --danger:   #A8482E;
  --selection: var(--ftf-moss-200);
  --brand-etch: var(--ftf-ember-600);
  --brand-eda:  var(--ftf-forest-500);
  --hl-comment: var(--ftf-moss-500);
  --hl-string:  var(--ftf-forest-400);
  --hl-keyword: var(--ftf-ember-600);
  --hl-type:    var(--ftf-forest-600);
  --hl-number:  var(--ftf-forest-500);
  --hl-meta:    var(--ftf-moss-500);
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--surface); color: var(--text);
  font: 14px/1.5 var(--mono);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--selection); color: var(--text); }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }
a:focus-visible, button:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* The bar across the top, shared by the app and the docs. */
header.bar {
  display: flex; align-items: baseline; gap: 16px;
  padding: 10px 16px; border-bottom: 1px solid var(--border); background: var(--elevated);
}
header.bar h1 { font: 600 15px/1.4 var(--mono); margin: 0; }
header.bar h1 a { color: var(--accent); }
/* The wordmark, one word in two colours, with no tagline after it. */
.wordmark { font-weight: 600; }
.wordmark:hover { text-decoration: none; }
.wordmark .etch { color: var(--brand-etch); }
.wordmark .eda { color: var(--brand-eda); }
header.bar .right { margin-left: auto; display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
header.bar .right .crumb { margin-right: 8px; }
/* Small outlined control, used for the links and the theme toggle in the
   header's right section so they read as one row of buttons. */
button.ghost, a.ghost {
  display: inline-block; line-height: 1.4;
  background: transparent; color: var(--text-2); border: 1px solid var(--border);
  border-radius: 4px; padding: 2px 8px; font: inherit; font-size: 12px; cursor: pointer;
}
button.ghost:hover, a.ghost:hover { color: var(--text); border-color: var(--border-strong); text-decoration: none; }
/* The icons a ghost can hold: the sun or moon that is the theme toggle,
   and the mark after a link that leaves the site. */
.ghost svg { width: 13px; height: 13px; vertical-align: -2px; }
a.ghost svg { width: 11px; height: 11px; vertical-align: -1px; }
button.ghost#theme { padding: 2px 5px; }