/*
  The Voter's look on the static TQH webs (docs/superpowers/specs/2026-10-26-tqh-skin-voter-design.md).
  Loaded after every template's own CSS (build.py: SKIN_LINK). The --v-* values are the Voter's own,
  tqh-live/frontend/src/theme/palette.ts ("ágora"): test_skin.py fails if they drift. The templates' own
  variables (--bg, --accent, ...) are re-pointed at them, so no template has to change.
*/
:root {
  --v-stone-50: #FDFBF6;
  --v-stone-100: #F8F3E9;
  --v-stone-200: #EFE7D7;
  --v-stone-300: #E2D6BE;
  --v-stone-400: #C9B896;
  --v-stone-500: #A8977A;
  --v-ink: #221F1A;
  --v-ink-2: #453F35;
  --v-ink-3: #6B6353;
  --v-ink-4: #6D6657;
  --v-tyrian: #6D2A4E;
  --v-tyrian-hover: #8A3A64;
  --v-tyrian-soft: #F3E6EC;
  --v-laurel: #4F6F3A;
  --v-laurel-hover: #628A48;
  --v-laurel-soft: #EAF0E2;
  --v-terracotta: #A2452C;
  --v-terracotta-hover: #BC553A;
  --v-terracotta-soft: #F8E7E0;
  --v-ochre: #85601C;
  --v-ochre-hover: #C08F2E;
  --v-ochre-soft: #F8EFDA;
  --bg: var(--v-stone-100); --surface: var(--v-stone-50); --ink: var(--v-ink); --muted: var(--v-ink-3); --line: var(--v-stone-300);
  --accent: var(--v-tyrian); --accent-soft: var(--v-tyrian-soft); --accent-ink: var(--v-tyrian); --accent-strong: var(--v-tyrian);
  --badge-ink: var(--v-tyrian); --lock-bg: var(--v-stone-200); --code-bg: var(--v-stone-200); --row-alt: var(--v-stone-200);
  --ok-bg: var(--v-laurel-soft); --ok-line: var(--v-laurel); --ok-ink: var(--v-laurel);
  --ko-bg: var(--v-terracotta-soft); --ko-line: var(--v-terracotta); --ko-ink: var(--v-terracotta);
  --warn-bg: var(--v-ochre-soft); --warn-line: var(--v-ochre-hover);
  --gap-bg: var(--v-ochre-soft); --gap-line: var(--v-ochre-hover); --gap-ink: var(--v-ochre);
  --band-bg: var(--v-ink); --band-ink: var(--v-stone-100); --band-muted: var(--v-stone-300); --band-accent: #E5A9C8; /* = DARK tyrian */
  --tqh-brand: var(--v-tyrian); --tqh-brand-hover: var(--v-tyrian-hover); --on-accent: #fff;
  --tqh-menu-font: "Alegreya Sans", system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --v-stone-50: #2A2620;
  --v-stone-100: #1E1B17;
  --v-stone-200: #35302A;
  --v-stone-300: #4A4339;
  --v-stone-400: #6B6152;
  --v-stone-500: #8C806C;
  --v-ink: #F2EBDD;
  --v-ink-2: #DDD3C0;
  --v-ink-3: #C6BAA4;
  --v-ink-4: #BFB39C;
  --v-tyrian: #E5A9C8;
  --v-tyrian-hover: #F2C4DB;
  --v-tyrian-soft: #3D2533;
  --v-laurel: #AFCF94;
  --v-laurel-hover: #C4DEAE;
  --v-laurel-soft: #27321F;
  --v-terracotta: #F0A48C;
  --v-terracotta-hover: #F7BBA8;
  --v-terracotta-soft: #3E2620;
  --v-ochre: #E3B865;
  --v-ochre-hover: #EDCB86;
  --v-ochre-soft: #3A2E18;
  --bg: var(--v-stone-100); --surface: var(--v-stone-50); --ink: var(--v-ink); --muted: var(--v-ink-3); --line: var(--v-stone-300);
  --accent: var(--v-tyrian); --accent-soft: var(--v-tyrian-soft); --accent-ink: var(--v-tyrian); --accent-strong: var(--v-tyrian);
  --badge-ink: var(--v-tyrian); --lock-bg: var(--v-stone-200); --code-bg: var(--v-stone-200); --row-alt: var(--v-stone-200);
  --ok-bg: var(--v-laurel-soft); --ok-line: var(--v-laurel); --ok-ink: var(--v-laurel);
  --ko-bg: var(--v-terracotta-soft); --ko-line: var(--v-terracotta); --ko-ink: var(--v-terracotta);
  --warn-bg: var(--v-ochre-soft); --warn-line: var(--v-ochre-hover);
  --gap-bg: var(--v-ochre-soft); --gap-line: var(--v-ochre-hover); --gap-ink: var(--v-ochre);
  --band-bg: var(--v-stone-200); --band-ink: var(--v-ink); --band-muted: var(--v-ink-3); --band-accent: var(--v-tyrian);
  --tqh-brand: var(--v-tyrian); --tqh-brand-hover: var(--v-tyrian-hover); --on-accent: var(--v-stone-100);
  --tqh-menu-font: "Alegreya Sans", system-ui, sans-serif;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --v-stone-50: #2A2620;
  --v-stone-100: #1E1B17;
  --v-stone-200: #35302A;
  --v-stone-300: #4A4339;
  --v-stone-400: #6B6152;
  --v-stone-500: #8C806C;
  --v-ink: #F2EBDD;
  --v-ink-2: #DDD3C0;
  --v-ink-3: #C6BAA4;
  --v-ink-4: #BFB39C;
  --v-tyrian: #E5A9C8;
  --v-tyrian-hover: #F2C4DB;
  --v-tyrian-soft: #3D2533;
  --v-laurel: #AFCF94;
  --v-laurel-hover: #C4DEAE;
  --v-laurel-soft: #27321F;
  --v-terracotta: #F0A48C;
  --v-terracotta-hover: #F7BBA8;
  --v-terracotta-soft: #3E2620;
  --v-ochre: #E3B865;
  --v-ochre-hover: #EDCB86;
  --v-ochre-soft: #3A2E18;
  --bg: var(--v-stone-100); --surface: var(--v-stone-50); --ink: var(--v-ink); --muted: var(--v-ink-3); --line: var(--v-stone-300);
  --accent: var(--v-tyrian); --accent-soft: var(--v-tyrian-soft); --accent-ink: var(--v-tyrian); --accent-strong: var(--v-tyrian);
  --badge-ink: var(--v-tyrian); --lock-bg: var(--v-stone-200); --code-bg: var(--v-stone-200); --row-alt: var(--v-stone-200);
  --ok-bg: var(--v-laurel-soft); --ok-line: var(--v-laurel); --ok-ink: var(--v-laurel);
  --ko-bg: var(--v-terracotta-soft); --ko-line: var(--v-terracotta); --ko-ink: var(--v-terracotta);
  --warn-bg: var(--v-ochre-soft); --warn-line: var(--v-ochre-hover);
  --gap-bg: var(--v-ochre-soft); --gap-line: var(--v-ochre-hover); --gap-ink: var(--v-ochre);
  --band-bg: var(--v-stone-200); --band-ink: var(--v-ink); --band-muted: var(--v-ink-3); --band-accent: var(--v-tyrian);
  --tqh-brand: var(--v-tyrian); --tqh-brand-hover: var(--v-tyrian-hover); --on-accent: var(--v-stone-100);
  --tqh-menu-font: "Alegreya Sans", system-ui, sans-serif;
  color-scheme: dark;
}

/* Type: headings Alegreya, text Alegreya, UI Alegreya Sans, wordmark and bar labels Cinzel (as in the Voter). */
h1, h2, h3, h4 { font-family: Alegreya, Georgia, serif; font-weight: 700; }
.tqh-bar { font-family: Cinzel, Georgia, serif; font-weight: 600; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; }
.tqh-bar .tqh-menu ul, .tqh-bar .tqh-account { font-family: "Alegreya Sans", system-ui, sans-serif; letter-spacing: 0; text-transform: none; font-size: 16px; font-weight: 500; }
.tqh-brand { font-weight: 700; letter-spacing: .16em; }
.tqh-bar { background: var(--surface); }

/* Shape: square corners, as the Voter (radio buttons and the account widget keep their round shape). */
*, *::before, *::after { border-radius: 0 !important; }
input[type="radio"] { border-radius: 50% !important; }

/* Density (variant B, chosen 2026-10-26): tests and cards are compact; long reading text is left alone. */
#quiz, .q-list { --q-gap: 6px; }
.q { padding: 8px 10px; margin: 0 0 6px; border-width: 1px; }
.q-statement { font-size: 16px; margin: 0 0 6px; }
.q-options { gap: 4px; }
.q-options button, .btn { font-size: 14px; padding: 4px 6px; min-height: 28px; }

/* Text on an accent background: white on Tyrian by day, the dark canvas on the light Tyrian by night. */
.logo, .btn-primary, .cta, .cta-big strong, .cta-big span, .quiz-share, .t29n-next,
.q-options button[aria-pressed="true"], .tqh-account a.tqh-primary, .tqh-logo { color: var(--on-accent); }
/* The footer's text links were 16 px tall in Inter; Alegreya Sans is smaller, so give them the 24 px back. */
footer a { display: inline-block; padding: 5px 0; }
/* Colours the templates wrote as literals (not through a variable). */
.btn-primary, .quiz-share, .cta-big { background: var(--accent); border-color: var(--accent); }
.btn { border-color: var(--accent); }