/* Light theme - the default color scheme.
   Variables defined on :root apply unless overridden by a later theme file
   (e.g. dark.css inside its prefers-color-scheme media query).

   Palette vibe: deep ocean. Cool, pressurized, quiet.
   Light mode is "shallow water": barely-tinted paper, deep navy ink,
   royal blue as a structural accent. */

:root {
    /* Surface + text */
    --color-bg: #f9f5ea;           /* antique light paper */
    --color-text: #0f1e2e;         /* deep navy "ink" */
    --color-text-strong: #071320;
    --color-text-muted: #5a6b7d;   /* slate */
    --color-text-subtle: #8395a8;
    --color-text-faint: #a6b4c4;

    /* Branding - single accent family, royal blue */
    --color-link-hover: #1e4d8c;   /* deep royal - links only show this on hover */
    --color-accent: #1e4d8c;       /* H1 rule, structural emphasis */
    --color-accent-bright: #2563a6;
    --color-focus: #2563a6;        /* focus outlines */
    --color-on-accent: #f5f7fa;    /* text on accent fills */

    /* Rules / borders */
    --color-rule: #1e4d8c;         /* accent-colored rules as "depth markers" */
    --color-rule-subtle: #99957a;  /* antique dark */
    --color-border-form: #8395a8;

    /* Surfaces */
    --color-surface: #e4e0d5;      /* antique bg */
    --color-surface-alt: #dce4ed;
    --color-surface-inner: #eef2f7;
    --color-surface-strong: #0f1e2e;
    --color-on-surface-strong: #f5f7fa;
    --color-code-bg: #e8e4d9;      /* antique paper */

    /* Form inputs */
    --color-input-bg: transparent;
    --color-input-text: inherit;

    /* Semantic */
    --color-danger: #b33a3a;
    --color-danger-border: #d99;
    --color-diag-accent: #4a88d0;

    /* Scrollbars in code blocks */
    --scrollbar-foreground: #1e4d8c;
    --scrollbar-background: #8395a8;
}

body {
    background-color: var(--color-bg);
    color: var(--color-text);
}

h1 {
    border-bottom: solid 1px var(--color-accent);
    color: var(--color-text-strong);
}

h2 {
    border-bottom: dotted 1px var(--color-rule-subtle);
}

/* Links inherit text color by default; accent appears on hover/focus only.
   This keeps body copy visually quiet and gives the accent color
   real meaning when it does appear. */
a, a:visited,
a:not([class]), a:not([class]):visited {
    color: inherit;
}
a:hover,
a:focus,
a:not([class]):hover,
a:not([class]):focus {
    color: var(--color-link-hover);
}
a:focus,
button:focus,
input:focus,
textarea:focus {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}

.sr-only-focusable:focus {
    background: var(--color-focus);
    color: var(--color-on-accent);
}

.version-info {
    color: var(--color-text-muted);
}

/* Listing Table */
.listing-table th {
    border-bottom: solid 1px var(--color-rule);
}

.listing-table thead tr th {
    border-bottom: solid 1px var(--color-border-form);
}

.listing-table th,
.listing-table td {
    border-bottom: dotted 1px var(--color-rule-subtle);
}

/* Stat Table */
.stat-table {
    border: solid 1px var(--color-rule-subtle);
}

.stat-table thead tr th {
    border-bottom: solid 1px var(--color-border-form);
}

.stat-table tbody tr th {
    background-color: var(--color-surface-strong);
    color: var(--color-on-surface-strong);
}

/* Data Table */
.data-table thead th {
    background: var(--color-surface);
    border-bottom: solid 2px var(--color-accent);
}

.data-table thead th:focus {
    outline: 2px solid var(--color-focus);
    outline-offset: 1px;
}

.data-table td {
    border: solid 1px var(--color-rule-subtle);
    border-bottom: solid 1px var(--color-border-form);
}

/* Blog Listing */
ol#blog-listing li .post-date-published,
ol#blog-listing li .post-date-published a.filter-link {
    color: var(--color-text-subtle);
}

ol#blog-listing li a.article-tag {
    color: var(--color-text-muted);
}

/* Blog Header */
.manage-byline {
    margin-top: 1rem;
}
.byline a.article-tag {
    color: var(--color-text-muted);
}

address.author {
    color: var(--color-text-muted);
}

address.author a {
    color: var(--color-text-muted);
}

.byline, .listing-filter {
    color: var(--color-text-strong);
}

.topic-line {
    color: var(--color-text-strong);
}

/* Blog Viewer */
code {
    background-color: var(--color-code-bg);
}

pre code {
    scrollbar-color: var(--scrollbar-foreground) var(--scrollbar-background);
}

pre code::-webkit-scrollbar-thumb {
    background: var(--scrollbar-foreground);
}

pre code::-webkit-scrollbar-track {
    background: var(--scrollbar-background);
}

/* Windows */
div.window {
    background-color: var(--color-surface-alt);
    border: solid 1px var(--color-text-subtle);
}

div.window div.window-title {
    background-color: var(--color-surface-inner);
}

div.window div.window-content {
    background-color: var(--color-surface-inner);
}

div.window div.window-content pre {
    scrollbar-color: var(--scrollbar-foreground) var(--scrollbar-background);
}

div.window div.window-content pre::-webkit-scrollbar-thumb {
    background: var(--scrollbar-foreground);
}

div.window div.window-content pre::-webkit-scrollbar-track {
    background: var(--scrollbar-background);
}

/* Blog Manager (forms) */
.validation-summary-errors {
    border: solid 1px var(--color-danger-border);
    color: var(--color-danger);
}

input, textarea {
    border: solid 1px var(--color-border-form);
    background-color: var(--color-input-bg);
    color: var(--color-input-text);
}

/* Header */
div.logo-header a, div.logo-header a:visited {
    color: var(--color-text-strong);
}
div.logo-header a:hover {
    color: var(--color-link-hover);
}

/* Footer */
body > footer {
    border-top: solid 1px var(--color-rule-subtle);
    color: var(--color-text-muted);
}

body > footer .colophon {
    color: var(--color-text-faint);
}

/* Post navigation */
nav.post-nav {
    border-top: solid 1px var(--color-rule-subtle);
}

nav.post-nav .post-nav-direction {
    color: var(--color-text-faint);
}

/* Article-level footer (citations, notes) */
article > footer {
    border-top: solid 1px var(--color-rule-subtle);
    color: var(--color-text-muted);
}

/* Diagnostics */
li.claim-type-value div:first-child {
    border-bottom: solid 1px var(--color-diag-accent);
}