/* Milonga Wyrm theme family (docs/theme/kobold-themes-plan.md), derived from Tango. MIT.
   Shipped: dark (default) and light. White, dusk and black are OPTIONAL later.
   Selection: <html data-theme="dark|light"> when the user picked one (theme.js, stored in
   localStorage); otherwise prefers-color-scheme, and dark when the browser has no preference.
   Contrast (WCAG 2.x ratio, text on bg / surface):
   dark  (bg #2E3436 Aluminium 6, surface #383E40): text 8.67/7.45, strong 10.89/9.36,
     muted 6.65/5.72, link 6.20/5.33, danger 5.54/4.76, warning 6.83/5.87, success 7.83/6.74,
     tag 5.65/4.85, focus 10.18/8.75, border 3.63/3.12 (non-text, 3:1).
   light (bg #EEEEEC Aluminium 1, surface #FFFFFF): text 10.89/12.65, strong 18.08/21.00,
     muted 6.29/7.31, link 7.56/8.78, danger 7.01/8.14, warning 6.28/7.29, success 6.64/7.71,
     tag 8.38/9.74, focus 7.56/8.78, border 3.00/3.49.
   Derived (not in the 27 Tango colours): dark surface #383E40, raised #424849, link #9DB8D9
   (Sky Blue 1, lighter), danger #FF8A80 (Scarlet 1, lighter), tag #C7A2C2 (Plum 1, lighter);
   light warning #8F3F00 (Orange 3, darker), success #2F5E04 (Chameleon 3, darker). */

:root, :root[data-theme="dark"] {
  color-scheme: dark;
  --fl-bg: #2E3436;
  --fl-surface: #383E40;
  --fl-surface-raised: #424849;
  --fl-border: #888A85;
  --fl-text: #D3D7CF;
  --fl-text-strong: #EEEEEC;
  --fl-text-muted: #BABDB6;
  --fl-link: #9DB8D9;
  --fl-focus: #FCE94F;
  --fl-danger: #FF8A80;
  --fl-warning: #FCAF3E;
  --fl-success: #8AE234;
  --fl-tag: #C7A2C2;
  --fl-tag-bg: #4A3F4D;
}
:root[data-theme="light"] {
  color-scheme: light;
  --fl-bg: #EEEEEC;
  --fl-surface: #FFFFFF;
  --fl-surface-raised: #F6F6F4;
  --fl-border: #888A85;
  --fl-text: #2E3436;
  --fl-text-strong: #000000;
  --fl-text-muted: #555753;
  --fl-link: #204A87;
  --fl-focus: #204A87;
  --fl-danger: #A40000;
  --fl-warning: #8F3F00;
  --fl-success: #2F5E04;
  --fl-tag: #5C3566;
  --fl-tag-bg: #EFE6EE;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --fl-bg: #EEEEEC;
    --fl-surface: #FFFFFF;
    --fl-surface-raised: #F6F6F4;
    --fl-border: #888A85;
    --fl-text: #2E3436;
    --fl-text-strong: #000000;
    --fl-text-muted: #555753;
    --fl-link: #204A87;
    --fl-focus: #204A87;
    --fl-danger: #A40000;
    --fl-warning: #8F3F00;
    --fl-success: #2F5E04;
    --fl-tag: #5C3566;
    --fl-tag-bg: #EFE6EE;
  }
}

html { background: var(--fl-bg); color: var(--fl-text); }
body { font-family: sans-serif; margin: 1rem; line-height: 1.4; }
h1, h2, h3, b, strong { color: var(--fl-text-strong); }
a { color: var(--fl-link); }
small { color: var(--fl-text-muted); }
nav { margin-bottom: 1rem; padding-bottom: .5rem; border-bottom: 1px solid var(--fl-border); }
input, select, textarea, button {
  font: inherit; color: var(--fl-text); background: var(--fl-surface);
  border: 1px solid var(--fl-border); border-radius: 3px; padding: .15em .4em;
}
button { cursor: pointer; }
button:hover { background: var(--fl-surface-raised); }
:focus-visible { outline: 2px solid var(--fl-focus); outline-offset: 2px; }
table { border-collapse: collapse; }
th, td { padding: .25em .5em; border-bottom: 1px solid var(--fl-border); text-align: left; }
th { color: var(--fl-text-strong); }
pre, code { background: var(--fl-surface); border-radius: 3px; }
.board { display: flex; gap: 1rem; align-items: flex-start; }
.col { background: var(--fl-surface); border: 1px solid var(--fl-border); padding: .5rem; min-width: 12rem; border-radius: 4px; }
.card { background: var(--fl-bg); border: 1px solid var(--fl-border); margin: .3rem 0; padding: .4rem; border-radius: 3px; }
.err { color: var(--fl-danger); }
.warn { color: var(--fl-warning); }
.ok { color: var(--fl-success); }
/* Not colour alone: over-limit columns also get a dashed outline and their warning text. */
.over { outline: 2px dashed var(--fl-warning); }
.chip { font-size: .8em; color: var(--fl-tag); background: var(--fl-tag-bg); border-radius: 3px; padding: 0 .3em; }
#flash:empty { display: none; }
#flash { margin: .5rem 0; }
.theme-toggle { float: right; }