/* ============================================================ SOLLEVA — design tokens (FOUNDATION — supersedes expressions/solleva/tokens.css; that file remains as the expression-round record) Register: support under load. "The ground rises under you." Ground: cold daylight white · Ink: deep slate-blue · Accent: solar vermilion. Light mode primary. Every text/ground pair computed ≥ 4.5:1 — full table in design-system.md §2.8. Recompute after ANY change (H12.3); never carry the numbers on faith. ============================================================ */ :root { /* ---- GROUND RAMP — cold daylight, tonal structure top-lit. The tonal logic has a discernible UP: surfaces get LIGHTER as they rise (surface > ground > sunken > deep). Elevation is daylight, not shadow. ---- */ --sol-surface: oklch(0.993 0.003 250); /* #FBFDFF — raised: cards, composer, panels */ --sol-ground: oklch(0.980 0.006 250); /* #F5F9FC — the page */ --sol-ground-sunken: oklch(0.958 0.009 250); /* #EDF2F7 — rails, wells, input fields */ --sol-ground-deep: oklch(0.930 0.012 250); /* #E2E9F0 — furthest-back fields */ /* ---- WEBSITE AUDIENCE TEMPERATURES — three casts of the same daylight, for marketing-site section washes ONLY. One brand, one ground; the temperatures are weather, not doors. Product surfaces never use them. See design-system.md §2.4. ---- */ --sol-web-dawn: oklch(0.975 0.010 220); /* #F0F9FB — maker register: first light, cyan-cast */ --sol-web-noon: var(--sol-ground); /* #F5F9FC — working register: the base daylight */ --sol-web-steel: oklch(0.972 0.008 265); /* #F3F6FB — enterprise register: colder, steel-cast */ /* ---- INK RAMP — deep slate-blue, never warm brown-black ---- */ --sol-ink: oklch(0.245 0.030 255); /* #17212F — 15.32:1 on ground */ --sol-ink-secondary: oklch(0.410 0.035 255); /* #3E4C5D — 8.28:1 on ground */ --sol-ink-tertiary: oklch(0.500 0.030 255); /* #586474 — 5.68:1 on ground */ --sol-ink-faint: oklch(0.650 0.020 255); /* #87909C — GRAPHIC/DISABLED ONLY (3.05:1); never readable text, never placeholders — placeholders use --sol-ink-tertiary */ /* ---- ACCENT RAMP — solar vermilion: heat-as-light, never food-warmth. THE RULE: vermilion never fills a large field. It is the underside glow — the thin line of daylight beneath a lifted mass. Graphic weight and text weight are DIFFERENT tokens. ---- */ --sol-accent: oklch(0.620 0.185 35); /* #DF502C — graphic only (3.73:1 — never text) */ --sol-accent-ink: oklch(0.500 0.160 35); /* #AB3415 — text-weight: links, named next steps. 6.14:1 */ --sol-accent-deep: oklch(0.420 0.140 32); /* #892312 — pressed / emphasis / focus. 8.58:1 */ --sol-accent-tint: oklch(0.945 0.030 35); /* #FFE6E0 — SMALL chips/badges only, never a section wash; pair with accent-deep text (7.63:1) or accent-ink text (5.46:1) */ /* ---- SEMANTIC / STATUS — verbs, not moods ---- */ --sol-lifted: oklch(0.480 0.100 155); /* #236E44 — done / raised. 5.86:1 on ground */ --sol-holding: oklch(0.520 0.110 75); /* #8D5E00 — waiting on you. 5.31:1 on ground */ --sol-fault: oklch(0.480 0.150 25); /* #A12F2F — failed, fail loud. 6.70:1 on ground */ --sol-lifted-tint: oklch(0.950 0.025 155); /* #E2F4E7 — chip ground; lifted text on it 5.41:1 */ --sol-holding-tint: oklch(0.955 0.030 85); /* #F9EFDA — chip ground; holding text on it 4.92:1 */ --sol-fault-tint: oklch(0.950 0.020 25); /* #FCEAE8 — chip ground; fault text on it 6.10:1 */ /* ---- NIGHT — the dark ground (footers, logo-on-dark), and the seed for the real dark-mode ramp below (OC-5, ruled 2026-08-05: "we do want a dark mode ... probably even website align with system mode" — DECISION.md "Dark mode"). Default theme preference is system; see the prefers-color-scheme block after the hex-fallback rule. ---- */ --sol-night: oklch(0.230 0.025 255); /* #151E29 */ --sol-night-raised: oklch(0.280 0.028 255); /* #202A37 */ --sol-daylight-on-night: oklch(0.930 0.010 250); /* #E3E8EE — 13.64:1 on night */ --sol-accent-on-night: oklch(0.680 0.170 40); /* #EC6D3D — 5.46:1 on night, 4.71:1 on night-raised */ /* ---- LINES & SELECTION ---- */ --sol-line: color-mix(in oklab, var(--sol-ink) 12%, transparent); --sol-line-strong: color-mix(in oklab, var(--sol-ink) 22%, transparent); --sol-selection: oklch(0.930 0.022 250); /* #DDE9F6 — text selection; ink on it 13.17:1 */ /* ---- TYPE — Source Serif 4 (readable screen serif, body) + Archivo (rational grotesque, UI + wordmark). Both OFL, self-hosted, embedded as base64 woff2 variable fonts, font-display: block. Load proof per design-system.md §3.1 — document.fonts.check() alone is NOT proof (codex finding). NO customer-facing monospace, anywhere. ---- */ --sol-font-serif: "Source Serif 4", Georgia, serif; --sol-font-sans: "Archivo", system-ui, sans-serif; /* Six-step ramp. Floor 12px — nothing customer-facing below it. */ --sol-text-1: 12px; /* Archivo 500, +0.08em, uppercase — meta, labels, counts */ --sol-text-2: 13px; /* Archivo 400/500 — chrome, rows, buttons */ --sol-text-3: 15.5px; /* Source Serif 4 400 — body, transcript, composer */ --sol-text-4: 18px; /* Archivo 600 — pane & card titles */ --sol-text-5: 22px; /* Archivo 600 — section heads (product) */ --sol-text-6: 28px; /* Archivo 650 — display (product). Marketing pages may clamp() above this; product surfaces may not. */ /* Weights */ --sol-weight-body: 400; --sol-weight-medium: 500; --sol-weight-title: 600; --sol-weight-display: 650; /* Exactly three line-height ratios (H4). */ --sol-leading-prose: 1.72; /* serif body only */ --sol-leading-ui: 1.5; /* multi-line UI text */ --sol-leading-solid: 1.25; /* single-line; height comes from the box */ --sol-tracking-label: 0.08em; /* step 1 uppercase labels only */ --sol-tracking-display: -0.01em; /* steps 5–6 only */ --sol-measure: 72ch; /* capped on the prose element, never on a row */ /* ---- SPACE — 4px base ---- */ --sol-space-1: 4px; --sol-space-2: 8px; --sol-space-3: 12px; --sol-space-4: 16px; --sol-space-5: 24px; --sol-space-6: 32px; --sol-space-7: 48px; --sol-space-8: 64px; --sol-space-9: 96px; /* ---- RADII ---- */ --sol-radius-1: 6px; /* controls: buttons, inputs, chips */ --sol-radius-2: 10px; /* cards, panels, next-step surfaces */ --sol-radius-3: 16px; /* floating panels, sheets, phone surfaces */ --sol-radius-pill: 999px; /* action pills, status dots */ /* ---- ELEVATION — light from below-forward: a raised thing shows a bright top edge and a soft under-shadow; the shadow is the proof of the gap. lift-0 is the resting plane (no shadow — plane changes at rest are lightness steps). ---- */ --sol-lift-0: none; --sol-lift-1: 0 1px 0 0 rgba(255,255,255,0.9) inset, 0 1px 2px rgba(23,33,47,0.06), 0 4px 12px -6px rgba(23,33,47,0.10); --sol-lift-2: 0 1px 0 0 rgba(255,255,255,0.9) inset, 0 2px 4px rgba(23,33,47,0.06), 0 12px 28px -12px rgba(23,33,47,0.16); /* floating panel edge — a shadow, never a border (H9) */ --sol-panel-edge: -1px 0 0 0 rgba(23,33,47,0.10), -16px 0 32px -12px rgba(23,33,47,0.14); /* the daylight line: the accent as under-glow, never as fill */ --sol-daylight-line: 0 2px 0 0 var(--sol-accent); /* ---- MOTION — one principle: EVERYTHING ARRIVES BY RISING. Entrances translate UP 8–12px and settle; nothing drops in, nothing slides sideways, nothing bounces. Exits fade in place (what leaves does not fall). Decelerating ease only. */ --sol-ease: cubic-bezier(0.19, 1, 0.22, 1); --sol-t-quick: 180ms; /* state changes: hover, press, toggle */ --sol-t-rise: 420ms; /* entrances */ --sol-t-settle: 700ms; /* hero-scale resolution only */ --sol-rise-distance: 10px; /* ---- FOCUS (H12.4) — 2px ring, 2px offset, every affordance ---- */ --sol-focus-ring: 0 0 0 2px var(--sol-ground), 0 0 0 4px var(--sol-accent-deep); } /* Hex fallbacks for engines without oklch() */ @supports not (color: oklch(0.5 0.1 30)) { :root { --sol-surface: #FBFDFF; --sol-ground: #F5F9FC; --sol-ground-sunken: #EDF2F7; --sol-ground-deep: #E2E9F0; --sol-web-dawn: #F0F9FB; --sol-web-noon: #F5F9FC; --sol-web-steel: #F3F6FB; --sol-ink: #17212F; --sol-ink-secondary: #3E4C5D; --sol-ink-tertiary: #586474; --sol-ink-faint: #87909C; --sol-accent: #DF502C; --sol-accent-ink: #AB3415; --sol-accent-deep: #892312; --sol-accent-tint: #FFE6E0; --sol-lifted: #236E44; --sol-holding: #8D5E00; --sol-fault: #A12F2F; --sol-lifted-tint: #E2F4E7; --sol-holding-tint: #F9EFDA; --sol-fault-tint: #FCEAE8; --sol-night: #151E29; --sol-night-raised: #202A37; --sol-daylight-on-night: #E3E8EE; --sol-accent-on-night: #EC6D3D; --sol-selection: #DDE9F6; } } /* ---- DARK MODE — system-driven, on by default (OC-5, DECISION.md "Dark mode": "we do want a dark mode and to by default have both phone and desktop and probably even website align with system mode"). Re-points the same semantic tokens site.css already reads, so no selector below this file needs to change. Ground/surface use the existing --sol-night ramp; every text/background pair here is re-verified by `node contrast-check.mjs` (T-SITE-CUTOVER), not carried on faith (H12.3). ---- */ @media (prefers-color-scheme: dark) { :root { --sol-surface: oklch(0.280 0.028 255); /* #202A37 — night-raised: cards, composer, panels */ --sol-ground: oklch(0.230 0.025 255); /* #151E29 — night: the page */ --sol-ground-sunken: oklch(0.195 0.022 255); /* rails, wells, input fields — recede toward black */ --sol-ground-deep: oklch(0.165 0.020 255); /* furthest-back fields */ --sol-web-dawn: oklch(0.250 0.028 220); --sol-web-noon: var(--sol-ground); --sol-web-steel: oklch(0.245 0.024 265); --sol-ink: oklch(0.930 0.010 250); /* #E3E8EE — 13.64:1 on ground */ --sol-ink-secondary: oklch(0.800 0.014 250); --sol-ink-tertiary: oklch(0.680 0.014 250); --sol-ink-faint: oklch(0.480 0.014 255); /* graphic/disabled only, as in light mode */ --sol-accent: oklch(0.680 0.170 40); /* #EC6D3D — graphic only */ --sol-accent-ink: oklch(0.680 0.170 40); /* text-weight — 5.46:1 on ground (documented above) */ --sol-accent-deep: oklch(0.780 0.155 42); /* pressed / emphasis / focus — brighter, not darker, at night */ --sol-accent-tint: oklch(0.300 0.055 35); /* small chips/badges only */ --sol-lifted: oklch(0.700 0.130 155); --sol-holding: oklch(0.720 0.115 75); --sol-fault: oklch(0.700 0.150 25); --sol-lifted-tint: oklch(0.280 0.045 155); --sol-holding-tint: oklch(0.300 0.048 85); --sol-fault-tint: oklch(0.290 0.045 25); --sol-line: color-mix(in oklab, var(--sol-ink) 16%, transparent); --sol-line-strong: color-mix(in oklab, var(--sol-ink) 28%, transparent); --sol-selection: oklch(0.350 0.030 250); } /* Hex fallbacks for engines without oklch(), dark branch */ @supports not (color: oklch(0.5 0.1 30)) { :root { --sol-surface: #202A37; --sol-ground: #151E29; --sol-ground-sunken: #101820; --sol-ground-deep: #0C1218; --sol-web-dawn: #17222B; --sol-web-noon: #151E29; --sol-web-steel: #161E29; --sol-ink: #E3E8EE; --sol-ink-secondary: #B7C1CC; --sol-ink-tertiary: #8E99A6; --sol-ink-faint: #5C6774; --sol-accent: #EC6D3D; --sol-accent-ink: #EC6D3D; --sol-accent-deep: #F5966D; --sol-accent-tint: #4A2A1C; --sol-lifted: #6FC98F; --sol-holding: #D9A64A; --sol-fault: #E38080; --sol-lifted-tint: #1E3A28; --sol-holding-tint: #3A2E12; --sol-fault-tint: #3A2020; --sol-selection: #29384A; } } } ::selection { background: var(--sol-selection); color: var(--sol-ink); } @media (prefers-reduced-motion: reduce) { :root { --sol-t-quick: 0ms; --sol-t-rise: 0ms; --sol-t-settle: 0ms; --sol-rise-distance: 0px; } }