/* JoeBlogs — Global Design System
   Warm beige/cream/brown palette with classic blue links.
   Typography: IBM Plex Serif (body), IBM Plex Mono (meta/code/masthead). */

:root {
    /* Palette */
    --paper:        oklch(0.965 0.018 78);
    --paper-2:      oklch(0.945 0.022 76);
    --paper-3:      oklch(0.92  0.025 74);
    --ink:          oklch(0.28  0.025 50);
    --ink-soft:     oklch(0.45  0.020 55);
    --ink-faint:    oklch(0.62  0.015 60);
    --rule:         oklch(0.82  0.020 65);
    --rule-soft:    oklch(0.88  0.015 70);

    /* Links */
    --link:         #1a3ec9;
    --link-visited: #6a2a8a;
    --link-hover:   #d04a16;

    /* Accent (rust — derived from --link-hover) */
    --accent:       #c2461a;

    /* Tag pills */
    --pill-bg:      oklch(0.90 0.030 68);
    --pill-bg-hov:  oklch(0.86 0.040 65);
    --pill-fg:      oklch(0.32 0.030 55);

    /* Typography */
    --font-body:    'IBM Plex Serif', Georgia, 'Times New Roman', serif;
    --font-meta:    'IBM Plex Mono', ui-monospace, Menlo, monospace;
    --font-mast:    'IBM Plex Mono', ui-monospace, Menlo, monospace;
    --font-size:    16px;
    --line-height:  1.55;

    /* Spacing */
    --gap-day:      48px;
    --gap-post:     24px;
    --pad-page:     56px;
}

/* ───── Reset & base ───── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: var(--font-size);
    line-height: var(--line-height);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a {
    color: var(--link);
    text-decoration: 1px solid underline;
    text-underline-offset: 2px;
    text-decoration-skip-ink: none;
}
a:visited { color: var(--link-visited); }
a:hover   { color: var(--link-hover); }

h1, h2, h3, h4, h5, h6 { margin: 0; }
p { margin: 0; }

/* ───── Blazor error UI ───── */
.blazor-error-boundary {
    background: #b32121;
    padding: 1rem;
    color: white;
}
.blazor-error-boundary::after {
    content: "An error has occurred.";
}

h1:focus { outline: none; }
.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid { outline: 1px solid #e50000; }
.validation-message { color: #e50000; }

/* ───── Mobile spacing ───── */
@media (max-width: 768px) {
    :root {
        --pad-page: 20px;
        --gap-day: 32px;
    }
}