/* =====================================================================
Tanisa Imoto — Design Tokens
One source of truth for color, type, spacing, and states.
Everything below is used site-wide through CSS variables.
HOW THE THEME SWITCH WORKS (Light / Dark / System):
- Default (no attribute) and "System" follow the reader's OS setting.
- The toggle sets data-theme="light" or data-theme="dark" on
to override the OS. Nothing else needs to change.
COLOR IS A PLACEHOLDER. Light = your ink-on-cream top contender.
Dark = the warm espresso counterpart. To swap palettes later, edit
only the two color blocks. The type, spacing, and state tokens stay.
FONTS (from your About-page colophon):
Add this once in the , or self-host for the CSP later:
===================================================================== */
:root {
/* ---- Type families ---------------------------------------------- */
--font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
--font-body: 'Inter Tight', system-ui, -apple-system, sans-serif;
--font-mono: 'Geist Mono', ui-monospace, 'SF Mono', monospace;
/* ---- Type scale (rem, so it honors the reader's own text size) --- */
--text-caption: 0.75rem; /* 12px footer, fine print */
--text-small: 0.875rem; /* 14px nav, meta labels, captions */
--text-body: 1rem; /* 16px default reading size */
--text-lead: 1.125rem; /* 18px intro paragraphs */
--text-h3: 1.5rem; /* 24px card titles */
--text-h2: 2rem; /* 32px section headings */
--text-display: clamp(2.75rem, 6vw, 4.5rem); /* hero, shrinks on phones */
/* ---- Line height ------------------------------------------------- */
--leading-tight: 1.15; /* display and headings */
--leading-body: 1.6; /* paragraphs (clears the 1.5 minimum) */
/* ---- Font weight (Inter Tight body; Instrument Serif is one weight)*/
--weight-light: 300;
--weight-regular: 400;
--weight-medium: 500;
/* ---- Spacing scale (your 4/8/16/24/32 grid, in rem) -------------- */
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 1rem; /* 16px */
--space-4: 1.5rem; /* 24px */
--space-5: 2rem; /* 32px */
--space-6: 3rem; /* 48px section rhythm */
--space-7: 4rem; /* 64px section rhythm */
--space-8: 6rem; /* 96px page rhythm */
/* ---- Target size ------------------------------------------------- */
--tap-min: 24px; /* WCAG 2.2 hard floor, never smaller */
--tap-comfortable: 44px; /* recommended for nav links and buttons */
/* ---- Corners ----------------------------------------------------- */
--radius: 8px; /* controls */
--radius-lg: 12px; /* cards */
/* ---- Motion ------------------------------------------------------ */
--dur-fast: 150ms;
--dur-base: 250ms;
/* =================================================================
COLOR — LIGHT THEME (placeholder: ink-on-cream, your favorite)
Every pair below passes WCAG on this background.
================================================================= */
--color-bg: #FAF7F6; /* page background */
--color-surface: #F0EBE4; /* cards, bands, panels */
--color-text: #0D0B09; /* headings and body 18.4:1 */
--color-text-muted: #6E6A64; /* supporting text 5.0:1 */
--color-accent: #392920; /* links, italic accents 13:1 */
--color-accent-contrast:#FAF7F6; /* text on an accent fill */
--color-btn-bg: #0D0B09; /* primary button background */
--color-btn-text: #FAF7F6; /* primary button text 18.4:1 */
--color-border: #BDB9B3; /* hairlines, dividers (not text) */
--color-focus: #0D0B09; /* focus ring */
}
/* =====================================================================
COLOR — DARK THEME (placeholder: warm espresso, from your rust)
Applies when the toggle is set to dark, OR when the OS prefers dark
and the reader has not forced light.
===================================================================== */
[data-theme="dark"] {
--color-bg: #241611;
--color-surface: #34211A;
--color-text: #F0E9DC; /* 14.5:1 on the ground */
--color-text-muted: #B7AB9C; /* 7.8:1 */
--color-accent: #E0AE6E; /* warm amber, glows 8.7:1 */
--color-accent-contrast:#241611;
--color-btn-bg: #E0AE6E;
--color-btn-text: #241611;
--color-border: rgba(240, 233, 220, 0.16);
--color-focus: #E0AE6E;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--color-bg: #241611;
--color-surface: #34211A;
--color-text: #F0E9DC;
--color-text-muted: #B7AB9C;
--color-accent: #E0AE6E;
--color-accent-contrast:#241611;
--color-btn-bg: #E0AE6E;
--color-btn-text: #241611;
--color-border: rgba(240, 233, 220, 0.16);
--color-focus: #E0AE6E;
}
}
/* =====================================================================
DENSITY (Comfortable is the default; Compact tightens the rhythm).
Minimal for now; refined when the components are built.
===================================================================== */
[data-density="compact"] {
--tap-comfortable: 40px;
--space-6: 2.5rem;
--space-7: 3.5rem;
--space-8: 5rem;
}
/* =====================================================================
STATES — apply once, used everywhere.
===================================================================== */
/* One visible focus style for keyboard users only. */
:focus-visible {
outline: 2px solid var(--color-focus);
outline-offset: 2px;
}
/* Respect the reader who asks for less motion. */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}