/* KiloWise — brand tokens (single source of truth)
   Date: 5 Nov 2026. Free fonts only (Google Fonts, OFL).
   See ../brand.md for the full identity guidelines. */

:root {
  /* Brand colours */
  --brand-green: #0E4D3A;
  --brand-green-deep: #0A3527;
  --brand-amber: #F2A900;
  --ink: #14201C;
  --muted: #5A6B64;
  --paper: #F7F5EF;
  --card: #FFFFFF;
  --line: #DDE5DF;
  --good: #1E7A4C;
  --warn: #B45309;

  /* Typography */
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Layout */
  --content-max: 1080px;
  --article-max: 720px;
  --radius: 12px;
  --gutter: 24px;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
}

h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.2;
}

a { color: var(--brand-green); }
a:hover { color: var(--brand-green-deep); }

.button-primary {
  background: var(--brand-green);
  color: #FFFFFF;
  border-radius: 10px;
  padding: 12px 20px;
  font-weight: 600;
}

.button-secondary {
  background: var(--card);
  color: var(--brand-green);
  border: 1px solid var(--brand-green);
  border-radius: 10px;
  padding: 12px 20px;
  font-weight: 600;
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
}

.tool-panel {
  background: var(--paper);
  border-left: 4px solid var(--brand-green);
  padding: 20px;
}