/* ==========================================================================
   Plain & Steady — the blog design system
   ==========================================================================
   One stylesheet for the whole site. Written for readers and writers aged
   45+: large type, big buttons, high contrast, no clever tricks.

   Contract for future public templates (Classic / Clear / Bright):
   a theme is a token override on `body[data-theme="..."]` plus, at most,
   small layout tweaks — never a new stylesheet of raw values. Every value
   below comes from a custom property on :root.

   Accessibility floor: body text >= 20px, tap targets >= 48px (--tap),
   text contrast >= 7:1 on its background, visible focus rings, landmarks.
   ========================================================================== */

:root {
    /* Type */
    --font-body: -apple-system, "Segoe UI", Verdana, Geneva, sans-serif;
    --font-size-base: 20px;
    --fs-small: 1rem;          /* 20px — the smallest text on the site */
    --fs-body: 1.125rem;       /* 22px */
    --fs-lead: 1.3125rem;      /* 26px */
    --fs-h3: 1.375rem;         /* 28px */
    --fs-h2: 1.75rem;          /* 34px */
    --fs-h1: 2.25rem;          /* 42px */
    --line-height: 1.65;

    /* Colour — near-black ink on warm paper, one calm blue accent */
    --paper: #faf7f0;
    --paper-raised: #ffffff;
    --ink: #1f2933;            /* ~13:1 on --paper */
    --muted-ink: #44505e;      /*  >= 7:1 on --paper */
    --line: #d6d0c2;
    --accent: #1d4ed8;         /* white text on this: >= 7:1 */
    --accent-ink: #ffffff;
    --accent-soft: #e7eefc;
    --danger: #9b1c1c;
    --danger-soft: #fbeaea;
    --ok: #14663f;
    --ok-soft: #e5f2ea;

    /* Shape */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 1rem;
    --sp-4: 1.5rem;
    --sp-5: 2.25rem;
    --sp-6: 3.25rem;
    --radius: 10px;
    --radius-pill: 999px;
    --shadow: 0 2px 6px rgba(31, 41, 51, 0.12);

    /* Layout */
    --measure: 42rem;          /* comfortable reading width */
    --measure-wide: 72rem;     /* admin and lists */
    --tap: 48px;               /* minimum tap target */
}

/* ------------------------------------------------------------------ reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { font-size: var(--font-size-base); }
body {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--line-height);
    color: var(--ink);
    background: var(--paper);
}

img { max-width: 100%; height: auto; display: block; }
:focus-visible {
    outline: 4px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--sp-1);
}

/* --------------------------------------------------------------- landmarks */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--accent);
    color: var(--accent-ink);
    padding: var(--sp-2) var(--sp-3);
    z-index: 10;
    min-height: var(--tap);
}
.skip-link:focus { left: var(--sp-3); top: var(--sp-3); }

.wrap {
    max-width: var(--measure);
    margin: 0 auto;
    padding: var(--sp-4) var(--sp-3) var(--sp-6);
}
.wrap--wide { max-width: var(--measure-wide); }

/* ----------------------------------------------------------------- headers */
.site-header {
    background: var(--paper-raised);
    border-bottom: 3px solid var(--accent);
}
.site-header__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-3);
}
.site-name {
    font-size: var(--fs-h3);
    font-weight: 700;
    color: var(--ink);
}
.site-name a { color: inherit; text-decoration: none; }
.site-header .muted { margin-left: auto; }

.site-nav {
    background: var(--paper-raised);
    border-bottom: 1px solid var(--line);
}
.site-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    list-style: none;
    padding: var(--sp-2) var(--sp-3);
    max-width: var(--measure-wide);
    margin: 0 auto;
}
.site-nav a {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-pill);
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
    background: var(--paper);
    border: 1px solid var(--line);
}
.site-nav a:hover { background: var(--accent-soft); border-color: var(--accent); }

.site-footer {
    border-top: 1px solid var(--line);
    color: var(--muted-ink);
    font-size: var(--fs-small);
}
.site-footer .wrap { padding: var(--sp-4) var(--sp-3); }

/* ------------------------------------------------------------- typography */
h1, h2, h3 { line-height: 1.25; font-weight: 700; }
h1 { font-size: var(--fs-h1); margin-bottom: var(--sp-3); }
h2 { font-size: var(--fs-h2); margin: var(--sp-5) 0 var(--sp-2); }
h3 { font-size: var(--fs-h3); margin: var(--sp-4) 0 var(--sp-2); }
p, li { max-width: var(--measure); }
p { margin-bottom: var(--sp-3); }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--danger); }
.lead { font-size: var(--fs-lead); }
.muted { color: var(--muted-ink); }

/* ---------------------------------------------------------------- buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-height: var(--tap);
    min-width: var(--tap);
    padding: var(--sp-2) var(--sp-4);
    font: inherit;
    font-weight: 700;
    border: 2px solid var(--ink);
    border-radius: var(--radius);
    background: var(--paper-raised);
    color: var(--ink);
    cursor: pointer;
    text-decoration: none;
}
.btn:hover { background: var(--accent-soft); color: var(--ink); }
.btn--primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
}
.btn--primary:hover { background: #1743c0; color: var(--accent-ink); }
.btn--danger {
    background: var(--danger);
    border-color: var(--danger);
    color: var(--accent-ink);
}
.btn--danger:hover { background: #7f1616; color: var(--accent-ink); }
.btn--quiet { border-color: var(--line); font-weight: 600; }

/* ------------------------------------------------------------------ forms */
.field { margin-bottom: var(--sp-4); max-width: var(--measure); }
.field label {
    display: block;
    font-weight: 700;
    margin-bottom: var(--sp-2);
}
.field-hint {
    display: block;
    color: var(--muted-ink);
    font-size: var(--fs-small);
    margin-bottom: var(--sp-2);
}
input[type="text"],
input[type="password"],
input[type="number"],
input[type="file"],
textarea,
select {
    width: 100%;
    min-height: var(--tap);
    padding: var(--sp-2) var(--sp-3);
    font: inherit;
    font-size: var(--fs-body);
    color: var(--ink);
    background: var(--paper-raised);
    border: 2px solid var(--muted-ink);
    border-radius: var(--radius);
}
textarea { min-height: 8rem; line-height: var(--line-height); }
.checkbox-row {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-height: var(--tap);
    margin-bottom: var(--sp-4);
}
.checkbox-row label { margin: 0; font-weight: 600; }
.checkbox-row input[type="checkbox"] {
    width: 1.75rem;
    height: 1.75rem;
}

/* ------------------------------------------------------------------ cards */
.card {
    background: var(--paper-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: var(--sp-4);
    margin-bottom: var(--sp-4);
}
.card--warn { background: var(--danger-soft); border-color: var(--danger); }
.card--info { background: var(--accent-soft); border-color: var(--accent); }

.notice {
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--radius);
    margin-bottom: var(--sp-4);
    font-weight: 600;
}
.notice--error { background: var(--danger-soft); border: 2px solid var(--danger); }
.notice--ok { background: var(--ok-soft); border: 2px solid var(--ok); }

.status {
    display: inline-block;
    padding: var(--sp-1) var(--sp-3);
    border-radius: var(--radius-pill);
    font-weight: 700;
    font-size: var(--fs-small);
    border: 2px solid var(--line);
    background: var(--paper);
}
.status--on { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); }
.status--off { background: var(--paper); border-color: var(--muted-ink); color: var(--muted-ink); }

/* ------------------------------------------------------------------ lists */
.plain-list { list-style: none; padding: 0; }
.plain-list > li {
    background: var(--paper-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-3);
    max-width: var(--measure-wide);
}
.item-title { font-size: var(--fs-lead); font-weight: 700; }
.actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-top: var(--sp-2);
}
.actions form { display: inline; }

/* --------------------------------------------------------------- articles */
.post-cover { border-radius: var(--radius); margin-bottom: var(--sp-4); }
.post-body {
    font-size: var(--fs-body);
    max-width: var(--measure);
    white-space: pre-wrap;
}
.post-body p { margin-bottom: var(--sp-3); }

/* --------------------------------------------------------------- comments */
.comment {
    border-left: 4px solid var(--accent);
    padding: var(--sp-2) var(--sp-3);
    margin-bottom: var(--sp-3);
    background: var(--paper-raised);
}
.comment-author { font-weight: 700; }
.comment-replies { list-style: none; padding-left: var(--sp-4); margin-top: var(--sp-3); }
.comment-reply { border-left-color: var(--line); }
.reply-form { margin-top: var(--sp-2); max-width: var(--measure); }

/* ------------------------------------------------------------------ media */
.media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--sp-4);
    list-style: none;
    padding: 0;
}
.media-grid > li {
    background: var(--paper-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: var(--sp-3);
}
.media-grid img { border-radius: var(--sp-1); margin-bottom: var(--sp-2); }

/* --------------------------------------------------------- theme contracts
   Future public templates override tokens here. Example:
     body[data-theme="classic"] { --paper: #f6f1e7; --accent: #7a3b1e; }
   Layout variants add small tweaks only (see the three-templates plan).
   ------------------------------------------------------------------------ */
body[data-theme="default"] { /* Plain & Steady — the reference look */ }

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}
@media print {
    .site-nav, .actions, form { display: none; }
}