/* MAYBE — design tokens
* Drop this file into your codebase and reference the variables everywhere.
* Do not edit values without updating 01_DESIGN_SYSTEM.md.
*/
/* Required Google Fonts — load once in the document :
*
*
*
*
*/
:root {
/* ─── Surface colors (warm-tinted, never neutral grey) ───────────────── */
--color-bg: oklch(0.985 0.005 80); /* page background — warm cream */
--color-paper: oklch(1 0 0); /* card / inset surfaces */
--color-ink: oklch(0.18 0.012 60); /* body text, primary buttons */
--color-ink-soft: oklch(0.34 0.010 60); /* secondary text, brief body */
--color-muted: oklch(0.52 0.008 60); /* eyebrows, metadata */
--color-faint: oklch(0.68 0.006 60); /* placeholders, separators */
--color-rule: oklch(0.89 0.008 70); /* default hairline */
--color-rule-soft: oklch(0.94 0.005 70); /* in-card row separator */
/* ─── Accent ─────────────────────────────────────────────────────────── */
--color-accent: oklch(0.42 0.12 25); /* oxblood — italic kickers */
/* ─── RAG (functional, muted) ────────────────────────────────────────── */
--color-rag-green: oklch(0.55 0.10 145);
--color-rag-amber: oklch(0.66 0.13 75);
--color-rag-red: oklch(0.55 0.15 25);
--color-rag-green-soft: oklch(0.94 0.04 145);
--color-rag-amber-soft: oklch(0.96 0.05 80);
--color-rag-red-soft: oklch(0.95 0.04 30);
/* ─── Pastel family (brand mark + decoration) ────────────────────────── */
--color-pastel-sage: oklch(0.86 0.07 155);
--color-pastel-butter: oklch(0.86 0.07 85);
--color-pastel-peach: oklch(0.86 0.07 35);
--color-pastel-sky: oklch(0.86 0.07 240);
/* ─── Type families ──────────────────────────────────────────────────── */
--font-serif: 'Source Serif 4', Georgia, serif;
--font-display-italic: 'Newsreader', Georgia, serif; /* brand mark */
--font-sans: 'Inter', system-ui, sans-serif;
--font-mono: 'IBM Plex Mono', ui-monospace, monospace;
/* ─── Spacing scale ──────────────────────────────────────────────────── */
--space-1: 4px;
--space-2: 6px;
--space-3: 8px;
--space-4: 10px;
--space-5: 12px;
--space-6: 14px;
--space-7: 16px;
--space-8: 18px;
--space-9: 22px;
--space-10: 28px;
--space-11: 32px;
--space-12: 36px;
--space-13: 44px;
--space-14: 56px;
--space-15: 64px;
/* ─── Hairline widths ────────────────────────────────────────────────── */
--rule-major: 2px;
--rule-minor: 1px;
/* ─── Border radii (used sparingly — this design barely curves) ─────── */
--radius-sm: 3px;
--radius-md: 4px;
--radius-lg: 6px;
--radius-pill: 999px;
}
/* ─── Brand-mark helper ────────────────────────────────────────────────────
* The MAYBE wordmark — italic Newsreader with a vertical column of three
* pastel RAG bars between syllables. Renders proportional to font-size.
*
* Markup:
*
* may
*
* be
*
*/
.maybe-mark {
display: inline-flex;
align-items: center;
font-family: var(--font-display-italic);
font-style: italic;
font-weight: 500;
letter-spacing: -0.022em;
line-height: 0.9;
color: var(--color-ink);
}
.maybe-mark__bars {
display: inline-flex;
flex-direction: column;
gap: 0.045em;
margin: 0 0.182em;
transform: translateY(0.022em);
}
.maybe-mark__bars i {
display: block;
width: 0.205em;
height: 0.10em;
border-radius: 0.04em;
background: var(--color-pastel-sage);
}
.maybe-mark__bars i:nth-child(2) { background: var(--color-pastel-butter); }
.maybe-mark__bars i:nth-child(3) { background: var(--color-pastel-peach); }
/* ─── Eyebrow utility ──────────────────────────────────────────────────── */
.eyebrow {
font-family: var(--font-sans);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-accent);
}
.eyebrow--muted { color: var(--color-muted); font-weight: 600; letter-spacing: 0.14em; font-size: 10.5px; }
/* ─── Standfirst / italic kicker ───────────────────────────────────────── */
.standfirst {
font-family: var(--font-serif);
font-style: italic;
font-size: 21px;
line-height: 1.4;
color: var(--color-ink-soft);
}
/* ─── Verdict pill ─────────────────────────────────────────────────────── */
.verdict {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 8px 3px 6px;
border-radius: var(--radius-pill);
font-family: var(--font-sans);
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.verdict::before {
content: "";
display: inline-block;
width: 6px;
height: 6px;
border-radius: 999px;
background: currentColor;
}
.verdict--green { background: var(--color-rag-green-soft); color: var(--color-rag-green); }
.verdict--amber { background: var(--color-rag-amber-soft); color: var(--color-rag-amber); }
.verdict--red { background: var(--color-rag-red-soft); color: var(--color-rag-red); }