/*
* Fimblo style, v1
* Mattias Jansson / Fimblo Consulting AB
*
* Warm and quiet: ink on paper, one deep glaze-green accent, one clay accent.
* No web fonts. Light and dark themes. WCAG 2.1 AA contrast.
*
* Theme: follows the OS by default. overrides.
* Inside a page, .theme-dark / .theme-light flip a single section.
*
* v1 is only ever changed additively. Breaking changes go in /v2/.
*/
/* ============================================================
1. Tokens
============================================================ */
:root,
.theme-light {
color-scheme: light;
/* surfaces */
--paper: #F6F3EE; /* page ground, unglazed stoneware */
--surface: #FDFCFA; /* cards, panels, inputs */
--sunken: #EDE8E0; /* wells, code, table stripes */
--line: #DCD5CA; /* hairlines, dividers */
--line-strong: #857D71; /* input borders, focusable edges (3:1) */
/* ink */
--ink: #262420; /* body text, headings */
--ink-2: #545049; /* secondary text */
--ink-3: #6E685F; /* captions, meta, placeholders */
--on-accent: #FFFFFF; /* text on filled accent/clay/danger */
/* brand */
--accent: #1E5E5B; /* deep celadon: links, primary actions, selection */
--accent-hover: #174B49;
--accent-tint: #E1ECE9;
--clay: #9E4F2C; /* secondary accent: highlights, emphasis, "the other side" */
--clay-tint: #F5E6DD;
/* status: always paired with an icon or a word */
--ok: #3D6E28;
--ok-tint: #E6EEDD;
--warn: #8A5F00;
--warn-tint: #F6ECD4;
--danger: #A33228;
--danger-tint: #F7E1DD;
/* data: categorical, fixed order, validated (see GUIDE.md) */
--data-1: #008B7C; /* glaze green */
--data-2: #C0603A; /* clay */
--data-3: #4F66C2; /* cobalt */
--data-4: #B8871A; /* ochre */
--data-5: #9A4C8A; /* plum */
--data-6: #5F8A1E; /* moss */
--data-neutral: #A39B8F; /* "other", "no answer", hollow marks */
--shadow-1: 0 1px 2px rgb(38 36 32 / .06), 0 1px 1px rgb(38 36 32 / .04);
--shadow-2: 0 4px 16px rgb(38 36 32 / .10), 0 1px 3px rgb(38 36 32 / .06);
}
/* Dark tokens appear twice: once for the OS setting, once for the explicit
toggle. Keep the two blocks identical (tools/check.py verifies this). */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
color-scheme: dark;
--paper: #1A1917;
--surface: #23211E;
--sunken: #141312;
--line: #393631;
--line-strong: #7A7369;
--ink: #EDE8DF;
--ink-2: #C2BBAF;
--ink-3: #A0998D;
--on-accent: #1A1917;
--accent: #7DBDB5;
--accent-hover: #9ACFC9;
--accent-tint: #1D3331;
--clay: #E0916B;
--clay-tint: #3A2921;
--ok: #9CC47E;
--ok-tint: #243020;
--warn: #E2B552;
--warn-tint: #352B16;
--danger: #F0897C;
--danger-tint: #3C221F;
--data-1: #0E9486;
--data-2: #D0704A;
--data-3: #6F8DD6;
--data-4: #B08A2C;
--data-5: #B86DA8;
--data-6: #74993A;
--data-neutral: #6F685E;
--shadow-1: 0 1px 2px rgb(0 0 0 / .30);
--shadow-2: 0 4px 16px rgb(0 0 0 / .40), 0 1px 3px rgb(0 0 0 / .30);
}
}
:root[data-theme="dark"],
.theme-dark {
color-scheme: dark;
--paper: #1A1917;
--surface: #23211E;
--sunken: #141312;
--line: #393631;
--line-strong: #7A7369;
--ink: #EDE8DF;
--ink-2: #C2BBAF;
--ink-3: #A0998D;
--on-accent: #1A1917;
--accent: #7DBDB5;
--accent-hover: #9ACFC9;
--accent-tint: #1D3331;
--clay: #E0916B;
--clay-tint: #3A2921;
--ok: #9CC47E;
--ok-tint: #243020;
--warn: #E2B552;
--warn-tint: #352B16;
--danger: #F0897C;
--danger-tint: #3C221F;
--data-1: #0E9486;
--data-2: #D0704A;
--data-3: #6F8DD6;
--data-4: #B08A2C;
--data-5: #B86DA8;
--data-6: #74993A;
--data-neutral: #6F685E;
--shadow-1: 0 1px 2px rgb(0 0 0 / .30);
--shadow-2: 0 4px 16px rgb(0 0 0 / .40), 0 1px 3px rgb(0 0 0 / .30);
}
:root {
/* type: system fonts only, chosen to be good on Windows first */
--font-sans: "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, "Helvetica Neue", Arial, sans-serif;
--font-serif: Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
--font-mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
--text-xs: 0.8125rem; /* 13 */
--text-sm: 0.9375rem; /* 15 */
--text-md: 1.0625rem; /* 17, body */
--text-lg: 1.25rem; /* 20 */
--text-xl: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
--text-2xl: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
--text-3xl: clamp(2.25rem, 1.5rem + 3.5vw, 4rem);
--text-hero: clamp(3rem, 1.5rem + 7vw, 7rem);
/* space: 4px base */
--s-1: 0.25rem;
--s-2: 0.5rem;
--s-3: 0.75rem;
--s-4: 1rem;
--s-5: 1.5rem;
--s-6: 2rem;
--s-7: 3rem;
--s-8: 4.5rem;
--radius-sm: 4px;
--radius: 8px;
--radius-lg: 14px;
--radius-pill: 999px;
--measure: 66ch; /* max line length for reading */
--page-max: 72rem;
--gutter: clamp(1rem, 4vw, 3rem);
--ease: cubic-bezier(.2, .6, .2, 1);
--dur: 160ms;
}
/* ============================================================
2. Base
============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
margin: 0;
background: var(--paper);
color: var(--ink);
font-family: var(--font-sans);
font-size: var(--text-md);
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
.theme-dark, .theme-light { background: var(--paper); color: var(--ink); }
h1, h2, h3, h4 {
margin: 0 0 var(--s-3);
font-weight: 600;
line-height: 1.15;
letter-spacing: -0.01em;
text-wrap: balance;
}
:where(h2, h3, h4):not(:first-child) { margin-top: 1.6em; }
h1 { font-size: var(--text-3xl); letter-spacing: -0.02em; }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }
p, ul, ol, dl, blockquote, pre, table, figure { margin: 0 0 var(--s-4); }
p { max-width: var(--measure); text-wrap: pretty; }
ul, ol { padding-left: 1.3em; }
li + li { margin-top: var(--s-1); }
a {
color: var(--accent);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.18em;
}
a:hover { color: var(--accent-hover); text-decoration-thickness: 2px; }
strong, b { font-weight: 600; }
small { font-size: var(--text-sm); }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-6) 0; }
img, svg, video { max-width: 100%; height: auto; }
::selection { background: var(--accent-tint); color: var(--ink); }
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.9em; }
code {
background: var(--sunken);
padding: 0.1em 0.35em;
border-radius: var(--radius-sm);
}
pre {
background: var(--sunken);
padding: var(--s-4);
border-radius: var(--radius);
overflow-x: auto;
line-height: 1.45;
}
pre code { background: none; padding: 0; }
kbd {
border: 1px solid var(--line-strong);
border-bottom-width: 2px;
border-radius: var(--radius-sm);
padding: 0 0.35em;
background: var(--surface);
}
blockquote {
margin-left: 0;
padding-left: var(--s-4);
border-left: 3px solid var(--clay);
color: var(--ink-2);
}
/* Long-form reading. Serif body, sans headings. */
.prose { font-family: var(--font-serif); font-size: 1.125rem; line-height: 1.6; }
.prose h1, .prose h2, .prose h3, .prose h4 { font-family: var(--font-sans); margin-top: 1.6em; }
.prose > :first-child { margin-top: 0; }
/* Small helpers for text */
.lead { font-size: var(--text-lg); color: var(--ink-2); max-width: 48ch; }
.muted { color: var(--ink-3); }
.hero { font-size: var(--text-hero); font-weight: 700; line-height: 0.95; letter-spacing: -0.03em; }
.accent-text { color: var(--accent); }
.clay-text { color: var(--clay); }
.num { font-variant-numeric: tabular-nums; }
.visually-hidden {
position: absolute !important; width: 1px; height: 1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
/* ============================================================
3. Layout
============================================================ */
.page { max-width: var(--page-max); margin-inline: auto; padding-inline: var(--gutter); }
.stack > * + * { margin-top: var(--stack-gap, var(--s-4)); }
.stack > * { margin-bottom: 0; }
.cluster { display: flex; flex-wrap: wrap; gap: var(--cluster-gap, var(--s-2)); align-items: center; }
.grid {
display: grid;
gap: var(--grid-gap, var(--s-5));
grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min, 16rem), 100%), 1fr));
}
.split {
display: grid;
gap: var(--s-6);
grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
align-items: start;
}
.section { padding-block: var(--s-8); }
/* ============================================================
4. Page chrome: header with logo slot, footer with attribution
============================================================ */
.site-header {
display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
padding-block: var(--s-4);
border-bottom: 1px solid var(--line);
}
/* Logo slot: put an ![]()
or