/** * Studiolo — design tokens * ========================================================================= * * Every color, font, size, space, corner, shadow and timing in the theme * comes from the custom properties defined in this file. Components never * use raw values, so any combination of Customizer settings still produces * a coherent, readable and accessible site. * * There are two layers: * * 1. PRIMITIVES — one property per Customizer setting (Appearance → * Customize → Design system). The values below are the fallbacks of the * "Gallery" preset. The real values are printed right after this file * as an inline `html:root { … }` rule generated from your settings * (`studiolo_tokens_css()`), and the Customizer live preview writes them * directly on the element while you edit. * * 2. DERIVED TOKENS — everything else (type scale, spacing steps, radii, * shadows, motion…) is calculated from the primitives here, in plain CSS. * Change a primitive and the whole system follows. * * Want to tweak something? Override tokens in Appearance → Customize → * Additional CSS, for example: * * :root { --st-duration: 600ms; --st-shadow-md: none; } * * Color scopes (surface / inverted / accent sections and footers) re-declare * the color tokens locally — see "Color schemes" in base.css. */ /* ========================================================================= 1. Primitives (fallbacks = Gallery preset) ========================================================================= */ :root { /* Colors ------------------------------------------------------------- */ --st-color-bg: #f7f7f4; /* Page background. */ --st-color-surface: #ecece7; /* Cards, panels, quiet bands. */ --st-color-text: #121212; /* Headings and body copy. */ --st-color-accent: #121212; /* Buttons, highlights, focus. */ --st-color-accent-contrast: #f7f7f4; /* Readable text on the accent (computed: text or bg, else black/white). */ /* Secondary text and hairlines blend text into the background unless set explicitly. */ --st-color-muted: color-mix(in srgb, var(--st-color-text) 72%, var(--st-color-bg)); --st-color-border: color-mix(in srgb, var(--st-color-text) 16%, var(--st-color-bg)); /* light | dark — computed from the background so native controls and scrollbars match. */ --st-color-scheme: light; /* Typography --------------------------------------------------------- */ --st-font-heading: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --st-font-body: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --st-font-ui: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; --st-font-size-base: 1.0625rem; /* 17px body text. */ --st-type-ratio: 1.333; /* Each heading level = previous × ratio. */ --st-heading-weight: 500; --st-heading-tracking: -0.04em; --st-heading-case: none; /* none | uppercase */ --st-heading-leading: 1.05; --st-body-leading: 1.6; --st-ui-case: uppercase; /* Navigation, buttons, labels. */ --st-ui-tracking: 0.08em; /* Extra spacing that goes with uppercase UI text. */ /* Spacing & layout --------------------------------------------------- */ --st-space-scale: 1; /* Multiplies every spacing step below. */ --st-section-space: 8rem; /* Vertical section padding on large screens. */ --st-content-width: 720px; /* Reading column. */ --st-wide-width: 1360px; /* Header, grids, wide media. */ /* Corners & lines ---------------------------------------------------- */ --st-radius: 0px; --st-radius-button: var(--st-radius); /* var(--st-radius) | 999px (pill) | 0px (square) */ --st-radius-media: var(--st-radius); /* var(--st-radius) | 0px (square) */ --st-border-width: 1px; } /* ========================================================================= 2. Derived tokens ========================================================================= */ :root { /* ------------------------------------------------------------------- 2.1 Colors ------------------------------------------------------------------- */ /* Root-level copies of the page colors. Color scopes (e.g. an inverted section) swap --st-color-bg / --st-color-text locally and use these to reach the original page colors. */ --st-ink: var(--st-color-text); --st-paper: var(--st-color-bg); --st-tint: var(--st-color-surface); --st-color-accent-hover: color-mix(in srgb, var(--st-color-accent) 82%, var(--st-color-text)); --st-color-surface-strong: color-mix(in srgb, var(--st-color-text) 8%, var(--st-color-surface)); --st-color-focus: var(--st-color-accent); --st-color-overlay: color-mix(in srgb, var(--st-color-text) 55%, transparent); /* ------------------------------------------------------------------- 2.2 Type scale ------------------------------------------------------------------- A modular scale: step n = base × ratio^n. Powers of the ratio are built by repeated multiplication (no pow() needed): --st-fs--2 tiny labels --st-fs-3 h4 --st-fs--1 small / meta --st-fs-4 h3 --st-fs-0 body (= base) --st-fs-5 h2 --st-fs-1 h6 --st-fs-6 h1 --st-fs-2 h5, lead text --st-fs-7 display Small steps never drop below 13px / 12px so labels stay legible. Large steps (3–7) are fluid. Each one is clamp( MIN, PREFERRED, MAX ) MIN The next smaller step, capped for phones (28 / 32 / 36 / 40 / 46px at a 360px viewport) so long words in h1 and display text fit narrow screens with any settings. The cap relaxes with the viewport (the smaller step's vw cap), which keeps every step at least as big as the one below. PREFERRED ratio^n × (40% of base + 0.75vw): grows with the viewport and reaches the full size around 80 × base (≈1360px wide for 17px text). MAX The full step, but never more than a share of the viewport width (h4 3.75vw … h1 8vw, display 10.5vw) so extreme combinations (22px base, ratio 1.5) stay elegant on wide screens. Steps 1–2 are capped on phones only (22px / 24px). */ --st-ratio-1: var(--st-type-ratio); --st-ratio-2: calc(var(--st-ratio-1) * var(--st-type-ratio)); --st-ratio-3: calc(var(--st-ratio-2) * var(--st-type-ratio)); --st-ratio-4: calc(var(--st-ratio-3) * var(--st-type-ratio)); --st-ratio-5: calc(var(--st-ratio-4) * var(--st-type-ratio)); --st-ratio-6: calc(var(--st-ratio-5) * var(--st-type-ratio)); --st-ratio-7: calc(var(--st-ratio-6) * var(--st-type-ratio)); --st-fs-0: var(--st-font-size-base); --st-fs--1: max(0.8125rem, var(--st-fs-0) / var(--st-ratio-1)); --st-fs--2: max(0.75rem, var(--st-fs-0) / var(--st-ratio-2)); --st-fs-1: min(var(--st-fs-0) * var(--st-ratio-1), max(1.375rem, 2.5vw)); --st-fs-2: min(var(--st-fs-0) * var(--st-ratio-2), max(1.5rem, 3vw)); --st-fs-3: clamp( min(var(--st-fs-0) * var(--st-ratio-2), max(1.75rem, 3vw)), var(--st-ratio-3) * (var(--st-fs-0) * 0.4 + 0.75vw), min(var(--st-fs-0) * var(--st-ratio-3), 3.75vw) ); --st-fs-4: clamp( min(var(--st-fs-0) * var(--st-ratio-3), max(2rem, 3.75vw)), var(--st-ratio-4) * (var(--st-fs-0) * 0.4 + 0.75vw), min(var(--st-fs-0) * var(--st-ratio-4), 4.75vw) ); --st-fs-5: clamp( min(var(--st-fs-0) * var(--st-ratio-4), max(2.25rem, 4.75vw)), var(--st-ratio-5) * (var(--st-fs-0) * 0.4 + 0.75vw), min(var(--st-fs-0) * var(--st-ratio-5), 6.25vw) ); --st-fs-6: clamp( min(var(--st-fs-0) * var(--st-ratio-5), max(2.5rem, 6.25vw)), var(--st-ratio-6) * (var(--st-fs-0) * 0.4 + 0.75vw), min(var(--st-fs-0) * var(--st-ratio-6), 8vw) ); --st-fs-7: clamp( min(var(--st-fs-0) * var(--st-ratio-6), max(2.875rem, 8vw)), var(--st-ratio-7) * (var(--st-fs-0) * 0.4 + 0.75vw), min(var(--st-fs-0) * var(--st-ratio-7), 10.5vw) ); /* ------------------------------------------------------------------- 2.3 Spacing ------------------------------------------------------------------- One scale for every gap, padding and margin, multiplied by the "Spacing density" setting. */ --st-space-3xs: calc(var(--st-space-scale) * 0.25rem); --st-space-2xs: calc(var(--st-space-scale) * 0.5rem); --st-space-xs: calc(var(--st-space-scale) * 0.75rem); --st-space-s: calc(var(--st-space-scale) * 1rem); --st-space-m: calc(var(--st-space-scale) * 1.5rem); --st-space-l: calc(var(--st-space-scale) * 2rem); --st-space-xl: calc(var(--st-space-scale) * 3rem); --st-space-2xl: calc(var(--st-space-scale) * 4rem); --st-space-3xl: calc(var(--st-space-scale) * 6rem); /* Page side margin: 20px on phones up to 48px on large screens (× density). */ --st-gutter: clamp(calc(1.25rem * var(--st-space-scale)), 5vw, calc(3rem * var(--st-space-scale))); /* Section padding: the full "Section spacing" on large screens, about half on phones. */ --st-section: clamp(calc(var(--st-section-space) * 0.45), calc(var(--st-section-space) * 0.3 + 5vw), var(--st-section-space)); /* ------------------------------------------------------------------- 2.4 Corners ------------------------------------------------------------------- */ --st-radius-sm: calc(var(--st-radius) * 0.5); /* Fields, tags, small details. */ --st-radius-lg: calc(var(--st-radius) * 1.5); /* Large surfaces. */ --st-radius-card: var(--st-radius-lg); /* ------------------------------------------------------------------- 2.5 Shadows ------------------------------------------------------------------- Tinted with the text color, so they stay soft on light palettes and read as a faint lift on dark ones. */ --st-shadow-sm: 0 1px 2px color-mix(in srgb, var(--st-color-text) 8%, transparent); --st-shadow-md: 0 1px 2px color-mix(in srgb, var(--st-color-text) 6%, transparent), 0 10px 28px -8px color-mix(in srgb, var(--st-color-text) 16%, transparent); --st-shadow-lg: 0 2px 4px color-mix(in srgb, var(--st-color-text) 6%, transparent), 0 28px 64px -16px color-mix(in srgb, var(--st-color-text) 24%, transparent); /* ------------------------------------------------------------------- 2.6 Motion ------------------------------------------------------------------- */ --st-ease: cubic-bezier(.2,.7,.2,1); /* Quick start, long gentle settle. */ --st-duration: 450ms; /* Reveals, overlays. */ --st-duration-fast: 180ms; /* Hovers, small state changes. */ /* ------------------------------------------------------------------- 2.7 Layout ------------------------------------------------------------------- */ /* Height of the site header. theme.js replaces it with the measured height (in px) so sticky offsets and full-height heroes line up exactly. */ --st-header-h: 5rem; /* Native form controls, scrollbars and the like follow the palette. */ color-scheme: var(--st-color-scheme, light); } /* ========================================================================= 3. Preferences ========================================================================= */ /* Visitors who ask for less motion get (near) instant transitions everywhere. */ @media (prefers-reduced-motion: reduce) { :root { --st-duration: 1ms; --st-duration-fast: 1ms; } }