/* Skald's own look, in its own accent. Live from 2026-09-25.
 *
 * The Skald logo is rust and ink (public/brand/README.md), so the accent is rust too:
 * links, the main button, the k-sym in the header. Lifspel's gold does not appear in
 * Skald's interface -- two accents side by side would compete (Zoe Kimura,
 * 2026-09-25). The family resemblance to Lifspel is carried by the endorsement
 * "· by Lifspel", the book typeface and the cream and ink pages.
 *
 * This replaces the kin theme, which borrowed Lifspel's gold. Loaded as /theme.css,
 * after each page's own styles; switch with bin/theme.sh.
 */

:root {
  /* Rust #9a3a22: 6.32:1 on the cream page, passes AA for links in prose. */
  --accent: #9a3a22;
  --ink:   #1b1714;
  /* The rest of the light set, so a page that defines none of its own (the sign-in
     error page) still gets Skald's ground, and every page shares one set. */
  --dim:   #6b615a;
  --line:  #d8cfc4;
  --bg:    #f7f3ec;
  --panel: #fffdf9;
  --field: #fffdf9;
  /* A form control's own border: 3.31:1 on the page and 3.60:1 on panels, for WCAG 1.4.11.
     --line stays for rules, where faint is right (Zoe Kimura, 2026-09-30, M5). */
  --field-line: #8f8478;
  /* Native controls (checkboxes, radios, selects' lists, the audio player, scrollbars)
     follow the colour scheme instead of staying white in the dark. */
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    /* #d9773f on #1a1a1f: about 5.5:1. Never used on a light ground. */
    --accent: #d9773f;
    --ink:   #ece6dc;
    --dim:   #a3998e;
    --bg:    #1a1a1f;
    --panel: #232328;
    --line:  #3a3a40;
    --field: #232328;
    --field-line: #75706a;
  }
}
/* Every text field, text area and select draws its edge in --field-line. */
input[type=text], input[type=email], input[type=search], input:not([type]), textarea, select {
  border-color: var(--field-line, #8f8478) !important;
}

/* Buttons: outlined by default; the one filled button is a page's main action. */
.btn { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
.btn:hover { background: rgba(154,58,34,.08); opacity: 1; }
.btn.primary { background: var(--accent); color: #f7f3ec; border-color: var(--accent); }
.btn.primary:hover { background: var(--accent); filter: brightness(1.08); }
/* On dark, cream text on the lighter rust fails contrast: the filled button takes dark text. */
@media (prefers-color-scheme: dark) {
  .btn:hover { background: rgba(217,119,63,.12); }
  .btn.primary { color: #1a1a1f; }
}
.btn.ghost { color: var(--dim); border-color: var(--line); }
.btn.ghost:hover { color: var(--accent); border-color: var(--accent); }
.newbook { border-color: var(--accent); color: var(--accent); }
.newbook:hover { background: rgba(154,58,34,.08); color: var(--accent); }
button { border-radius: 4px; }

/* Errors are a cooler crimson, never the rust accent, and always say so in words. */
.err { color: #a3123a; }
.err::before { content: "\26A0\FE0E  "; }
@media (prefers-color-scheme: dark) { .err { color: #f28b9b; } }

/* Furniture in a UI face; prose stays serif. */
.btn, .progress, .authorbar, .tag, legend, label > span, button, select {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

/* The browser's own defaults, in Skald's colours. Zoe Kimura, 2026-09-26, after Bart
 * saw a default-blue checkbox and a default-blue "Lifspel's Terms" link.
 *
 * Every page loads this file, so this is the one place these live. Each selector is
 * wrapped in :where(), which carries no specificity: any rule a page writes for its
 * own links, controls or focus wins over these, and these only fill in where a page
 * said nothing and the browser's blue and purple would otherwise show.
 */
/* Checkboxes, radios, range sliders and progress bars take the accent.
   Rust 6.3:1 on cream; the dark rust 5.5:1 on the dark ground (3:1 needed). */
:root { accent-color: var(--accent); }
/* A page that sets no body colours (the sign-in error page) still gets Skald's. */
:where(body) { background: var(--bg); color: var(--ink); }
/* Links: the accent, visited or not, never the browser's blue and purple. The
   underline stays, so a link is not told by colour alone. */
:where(a), :where(a:visited) { color: var(--accent); }
/* One focus ring for anything reached by keyboard. */
:where(:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
/* The full-screen picture sits on a near-black overlay in either scheme: its ring is
   the dark rust (6.2:1), since the light rust there would be 2.5:1. */
dialog.full :focus-visible { outline-color: #d9773f; }
/* Selected text: a wash of the accent under the ink (about 10:1 in both schemes). */
::selection { background: rgba(154,58,34,.25); color: inherit; }
::selection { background: color-mix(in srgb, var(--accent) 25%, transparent); }
/* Placeholders were the browser's pale grey (2.4:1 on white); the dim token is 5.5:1. */
::placeholder { color: var(--dim); opacity: 1; }