/* Colin's design language: tokens. Copy into any web output. */
/* Fonts: <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Source+Sans+3:wght@400;500;600&display=swap"> */

:root {
  --font-serif: 'EB Garamond', Garamond, 'Times New Roman', serif;
  --font-sans: 'Source Sans 3', 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;

  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --text: #1A1A1A;
  --text-muted: #5E5850;
  --rule: #DDD6CB;
  --forest: #1F3B2C;
  --espresso: #3B2A1E;
  --walnut: #6B4A32;

  --series-1: #1F3B2C; --series-2: #B5832E; --series-3: #A35A3C;
  --series-4: #8A9B78; --series-5: #6B4A32; --series-6: #CDB38A;
  --context: #CDB38A;
  --grid: #EEEAE3;

  --good: #2C5038;  --good-bg: #E7EFE8;
  --warn: #7A5714;  --warn-bg: #F5ECD9;
  --bad:  #7A2F22;  --bad-bg:  #F3E3DE;

  --radius: 0;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0F1712; --surface: #17221B; --text: #ECE7DE; --text-muted: #A69E92;
    --rule: #2C3A30; --forest: #8DB596; --espresso: #C9A27E; --walnut: #B08560;
    --series-1: #6E9A78; --series-2: #D4A24C; --series-3: #C97A5B;
    --series-4: #A9B898; --series-5: #A87F5C; --series-6: #DCC6A0;
    --context: #3A4A3F; --grid: #1E2A22;
    --good: #A9CFB2; --good-bg: #1E3226;
    --warn: #E3BE70; --warn-bg: #33291A;
    --bad:  #E39A86; --bad-bg:  #36201B;
  }
}

:root[data-theme="dark"] {
  --bg: #0F1712; --surface: #17221B; --text: #ECE7DE; --text-muted: #A69E92;
  --rule: #2C3A30; --forest: #8DB596; --espresso: #C9A27E; --walnut: #B08560;
  --series-1: #6E9A78; --series-2: #D4A24C; --series-3: #C97A5B;
  --series-4: #A9B898; --series-5: #A87F5C; --series-6: #DCC6A0;
  --context: #3A4A3F; --grid: #1E2A22;
  --good: #A9CFB2; --good-bg: #1E3226;
  --warn: #E3BE70; --warn-bg: #33291A;
  --bad:  #E39A86; --bad-bg:  #36201B;
}

/* Base */
*, *::before, *::after { border-radius: 0; box-shadow: none; }
body { background: var(--bg); color: var(--text); font-family: var(--font-serif); font-size: 16px; line-height: 1.5; margin: 0; }
h1, h2, h3 { font-weight: 500; line-height: 1.2; margin: 0 0 var(--s3); }
h1 { font-size: 28px; color: var(--forest); }
h2 { font-size: 21px; color: var(--forest); }
h3 { font-size: 17px; color: var(--espresso); }
p { max-width: 70ch; }
em { color: var(--walnut); }
a { color: var(--forest); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--walnut); }
hr { border: 0; border-top: 1px solid var(--rule); margin: var(--s5) 0; }
.label { font-variant: small-caps; letter-spacing: 0.04em; color: var(--text-muted); }
.num, table, input, select, button, .badge { font-family: var(--font-sans); font-variant-numeric: tabular-nums lining-nums; }

table { border-collapse: collapse; width: 100%; font-size: 13px; }
th { text-align: left; font-weight: 600; color: var(--text-muted); border-bottom: 1px solid var(--forest); padding: var(--s2); }
td { border-bottom: 1px solid var(--rule); padding: var(--s1) var(--s2); height: 28px; }
td.n, th.n { text-align: right; }

button { background: transparent; color: var(--forest); border: 1px solid var(--forest); padding: var(--s1) var(--s3); font-size: 13px; cursor: pointer; }
button.primary { background: var(--forest); color: var(--bg); }

.badge { display: inline-block; font-size: 12px; padding: 1px var(--s2); }
.badge.good { color: var(--good); background: var(--good-bg); }
.badge.warn { color: var(--warn); background: var(--warn-bg); }
.badge.bad  { color: var(--bad);  background: var(--bad-bg); }