/* base.css — shared site defaults, built entirely on tokens.css semantics.
Load order in every page that wants the house style:
(posts: relative!)
Posts may override any --color-*/--measure/etc. locally, or skip this file
and go fully bespoke on top of tokens alone. Keep this file small on purpose. */
/* Legacy aliases (pre-token names some posts may use). New code: use --color-*. */
:root {
--bg: var(--color-bg);
--fg: var(--color-fg);
--muted: var(--color-muted);
--accent: var(--color-accent);
--border: var(--color-border);
--maxw: var(--measure);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--color-bg);
color: var(--color-fg);
font-family: var(--font-ui);
font-size: var(--text-body);
font-weight: var(--weight-body);
line-height: var(--leading-body);
}
main, .site-header, .site-footer { max-width: var(--measure); margin-inline: auto; padding-inline: 1.25rem; }
.site-header {
display: flex; align-items: baseline; justify-content: space-between;
gap: var(--space-md); flex-wrap: wrap;
padding-block: var(--space-lg); border-bottom: 1px solid var(--color-border);
}
.site-title {
display: inline-flex; align-items: center; gap: var(--space-sm);
font-weight: var(--weight-black); font-size: 1.1rem;
letter-spacing: var(--tracking-tight);
text-decoration: none; color: var(--color-fg);
}
.site-mark { flex: none; }
.site-header nav a {
margin-left: var(--space-md);
font-size: var(--text-label); font-weight: var(--weight-bold);
text-decoration: none;
}
/* Theme toggle (see the inline snippet in the page shell / post template):
flips data-theme on and persists the choice in localStorage. */
.theme-toggle {
margin-left: var(--space-md);
border: 0; padding: 0; background: none; cursor: pointer;
font: var(--weight-bold) var(--text-label)/1.3 var(--font-ui);
color: var(--color-muted);
transition: color var(--duration) var(--ease-out);
}
.theme-toggle:hover { color: var(--color-fg); }
main { padding-block: var(--space-xl); }
a { color: var(--color-accent); transition: color var(--duration) var(--ease-out); }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: var(--leading-heading); letter-spacing: var(--tracking-tight); color: var(--color-fg-raised); }
h1 { font-size: var(--text-headline); font-weight: var(--weight-black); line-height: var(--leading-tight); }
h2 { font-size: var(--text-title); font-weight: var(--weight-bold); margin-top: var(--space-xl); }
h3 { font-size: 1.125rem; font-weight: var(--weight-bold); }
/* Code: prose explains, monospace proves. Panels sit on ink in both themes. */
code, pre, kbd, samp { font-family: var(--font-mono); }
pre {
overflow-x: auto;
padding: var(--space-lg);
background: var(--color-code-bg);
color: var(--color-code-fg);
border-radius: var(--radius-lg);
font-size: var(--text-code);
line-height: 1.6;
}
code {
background: var(--color-surface-strong);
padding: .1em .35em;
border-radius: var(--radius-sm);
font-size: var(--text-code);
}
pre code { background: none; padding: 0; font-size: inherit; }
/* Syntax highlighting: author-time markup, no runtime JS.
c comment · k keyword · s string · f function · n number/constant · t type/tag */
.tok-c { color: var(--code-comment); font-style: italic; }
.tok-k { color: var(--code-keyword); }
.tok-s { color: var(--code-string); }
.tok-f { color: var(--code-function); }
.tok-n { color: var(--code-number); }
.tok-t { color: var(--code-type); }
blockquote {
margin-inline: 0;
padding: var(--space-sm) var(--space-md);
border-left: 3px solid var(--color-border-strong);
color: var(--color-muted);
}
hr { border: 0; border-top: 1px solid var(--color-border); margin-block: var(--space-xl); }
img, video, svg { max-width: 100%; height: auto; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--color-border); }
th { font-size: var(--text-label); font-weight: var(--weight-bold); color: var(--color-muted); }
:focus-visible { outline: 2px solid var(--periwinkle); outline-offset: 3px; }
.intro { color: var(--color-muted); margin-bottom: var(--space-xl); }
.post-list { list-style: none; padding: 0; }
.post-item { display: flex; gap: .75rem; align-items: baseline; flex-wrap: wrap; padding: .4rem 0; }
.post-item time { color: var(--color-muted); font-variant-numeric: tabular-nums; font-size: .9rem; min-width: 6rem; }
/* AI-authored content marker (AGENTS.md house rule): unmistakable, labeled.
Periwinkle = the external-agent identity in our functional palette. */
.bmo-callout {
border: 1px dashed var(--periwinkle);
background: var(--periwinkle-soft);
color: var(--color-fg);
border-radius: var(--radius-md);
padding: var(--space-md) var(--space-lg);
font-style: italic;
margin-block: var(--space-lg);
}
.bmo-callout::before {
content: "🎮 BMO — AI-authored draft";
display: block;
font-style: normal;
font-family: var(--font-mono);
font-size: var(--text-label);
font-weight: 600;
color: var(--periwinkle-deep);
margin-bottom: var(--space-sm);
}
.site-footer {
color: var(--color-muted); font-size: .9rem;
border-top: 1px solid var(--color-border);
padding-block: var(--space-lg); margin-top: var(--space-section);
}