/* Palettes -------------------------------------------------------------
   Each palette is defined once here, then assigned to the live variables
   below. Explicit themes win in both directions; "auto" sets no data-theme
   attribute at all and lets prefers-color-scheme decide. */

:root {
    --font-ui: "Segoe UI Variable", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
    --radius-control: 0.65rem;
    --radius-panel: 1rem;
    --shadow-panel: 0 2px 8px rgb(12 35 30 / 4%), 0 12px 32px rgb(12 35 30 / 3%);

    /* parchment — soft paper, evergreen accent */
    --parchment-page: #f7f8f6;
    --parchment-surface: #ffffff;
    --parchment-highlight: #e3f0ec;
    --parchment-rule: #d8dfdc;
    --parchment-ink: #192d2b;
    --parchment-ink-soft: #425552;
    --parchment-muted: #62736f;
    --parchment-accent: #176b5b;
    --parchment-on-accent: #ffffff;
    --parchment-good: #246843;
    --parchment-good-bg: #e7f3eb;
    --parchment-bad: #ac3e42;
    --parchment-bad-bg: #fceced;

    /* ink — slate ground, soft white text, sea-glass accent */
    --ink-page: #111b20;
    --ink-surface: #19262d;
    --ink-highlight: #223e3e;
    --ink-rule: #35464d;
    --ink-ink: #edf4f1;
    --ink-ink-soft: #c0cfcb;
    --ink-muted: #9aada8;
    --ink-accent: #85d6be;
    --ink-on-accent: #102c25;
    --ink-good: #93d5ac;
    --ink-good-bg: #1d392c;
    --ink-bad: #f1a0a3;
    --ink-bad-bg: #40292e;
}

/* Light is the base, and stays the base when parchment is chosen explicitly. */
:root,
:root[data-theme="parchment"],
.theme-preview[data-theme="parchment"],
.theme-preview[data-theme="auto"] {
    --page: var(--parchment-page);
    --surface: var(--parchment-surface);
    --highlight: var(--parchment-highlight);
    --rule: var(--parchment-rule);
    --ink: var(--parchment-ink);
    --ink-soft: var(--parchment-ink-soft);
    --muted: var(--parchment-muted);
    --accent: var(--parchment-accent);
    --on-accent: var(--parchment-on-accent);
    --good: var(--parchment-good);
    --good-bg: var(--parchment-good-bg);
    --bad: var(--parchment-bad);
    --bad-bg: var(--parchment-bad-bg);
    color-scheme: light;
}

/* Auto: follow the system, unless a light theme was picked deliberately. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]),
    .theme-preview[data-theme="auto"] {
        --page: var(--ink-page);
        --surface: var(--ink-surface);
        --highlight: var(--ink-highlight);
        --rule: var(--ink-rule);
        --ink: var(--ink-ink);
        --ink-soft: var(--ink-ink-soft);
        --muted: var(--ink-muted);
        --accent: var(--ink-accent);
        --on-accent: var(--ink-on-accent);
        --good: var(--ink-good);
        --good-bg: var(--ink-good-bg);
        --bad: var(--ink-bad);
        --bad-bg: var(--ink-bad-bg);
        color-scheme: dark;
    }
}

/* Chosen deliberately: wins even on a light system. */
:root[data-theme="ink"],
.theme-preview[data-theme="ink"] {
    --page: var(--ink-page);
    --surface: var(--ink-surface);
    --highlight: var(--ink-highlight);
    --rule: var(--ink-rule);
    --ink: var(--ink-ink);
    --ink-soft: var(--ink-ink-soft);
    --muted: var(--ink-muted);
    --accent: var(--ink-accent);
    --on-accent: var(--ink-on-accent);
    --good: var(--ink-good);
    --good-bg: var(--ink-good-bg);
    --bad: var(--ink-bad);
    --bad-bg: var(--ink-bad-bg);
    color-scheme: dark;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--page);
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: 16px;
    line-height: 1.6;
    -webkit-text-size-adjust: 100%;
    transition: background-color 120ms ease, color 120ms ease;
}

[lang="grc"] {
    font-family: "Gentium Plus", "GFS Didot", "New Athena Unicode", "Palatino Linotype", Palatino, Georgia, serif;
}

a {
    color: var(--accent);
}

kbd {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* Site chrome ---------------------------------------------------------- */

header.site {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    max-width: 46rem;
    margin: 0 auto;
    padding: 1.25rem 1rem 0;
}

header.site .brand {
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -0.025em;
    text-decoration: none;
    color: var(--ink);
}

header.site nav {
    display: flex;
    gap: 1.75rem;
}

header.site nav a {
    font-size: 0.9rem;
    color: var(--muted);
    text-decoration: none;
    /* Carried on every link, transparent until it is the one you are on, so
       the rule appearing does not shift the header down a couple of pixels. */
    border-bottom: 2px solid transparent;
    padding-bottom: 0.15rem;
    transition: color 100ms ease, border-color 100ms ease;
}

header.site nav a:hover {
    color: var(--ink);
}

/* The same mark the toolbars use for a setting that is on: accent, and nothing
   else competing. The rule underneath says which of the two you are reading,
   which colour alone does not do at a glance. */
header.site nav a.here {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

footer.site {
    max-width: 46rem;
    margin: 0 auto;
    padding: 2rem 1rem 3rem;
    border-top: 1px solid var(--rule);
    font-size: 0.8rem;
    color: var(--muted);
}

footer.site p {
    margin: 0;
}

/* Home ----------------------------------------------------------------- */

.home {
    max-width: 46rem;
    margin: 0 auto;
    padding: 2rem 1rem 3rem;
}

.home h1 {
    font-size: clamp(1.9rem, 5vw, 2.4rem);
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 0.5rem;
    letter-spacing: -0.045em;
}

.home .lede {
    font-size: 1.1rem;
    color: var(--ink-soft);
    max-width: 34rem;
    margin: 0 0 1.75rem;
}

.home h2 {
    font-size: 1.05rem;
    margin-top: 2.5rem;
    margin-bottom: 0.6rem;
}

.home ul {
    margin: 0;
    padding-left: 1.1rem;
    color: var(--ink-soft);
}

.home li {
    margin-bottom: 0.35rem;
}

/* Blazor error banner --------------------------------------------------- */

#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 0.7rem 1.25rem;
    background: var(--bad-bg);
    color: var(--bad);
    border-top: 1px solid var(--bad);
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    float: right;
}

/* Shared interaction treatment; Greek text keeps its dedicated serif stack. */
button, input { font-family: var(--font-ui); }
button, a, input { -webkit-tap-highlight-color: transparent; }
button, input {
    transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}
:where(a, button, input):focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}
h1:focus { outline: none; }
::selection { background: var(--highlight); color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; }
}

/* Palette-inspired adaptations; source and contrast notes in docs/themes.md. */
:root[data-theme="modern-ink"],
.theme-preview[data-theme="modern-ink"] {
    --page: #ffffff;
    --surface: #f5f5f5;
    --highlight: #ffebe5;
    --rule: #d6d6d6;
    --ink: #000000;
    --ink-soft: #353535;
    --muted: #666666;
    --accent: #c72d0b;
    --on-accent: #ffffff;
    --good: #256640;
    --good-bg: #e8f3eb;
    --bad: #b00020;
    --bad-bg: #fce9ed;
    color-scheme: light;
}
:root[data-theme="midnight"],
.theme-preview[data-theme="midnight"] {
    --page: #0b0e13;
    --surface: #141a24;
    --highlight: #24324b;
    --rule: #36445c;
    --ink: #c5cee0;
    --ink-soft: #9fadc6;
    --muted: #91a1be;
    --accent: #9aadcf;
    --on-accent: #0b0e13;
    --good: #93c5ad;
    --good-bg: #192e27;
    --bad: #e69b9b;
    --bad-bg: #362026;
    color-scheme: dark;
}