/* ========================================================================== one7x Kit — shared design system tokens Source: solo-projects-os/design-system/BOOTSTRAP.md (updated 2026-07-31) Accent: cobalt (house default) · Character: standard Do not invent new colors, spacing, or radii. Build every surface using only these custom properties. If you find yourself wanting to change spacing, radii, shadows or component behaviour — stop, and flag it. ========================================================================== */ :root { --paper: #FDFDFD; --paper-warm: #F7F5F0; --pearl: #F2F1ED; --mist: #E6E5E0; --fog: #C9C8C2; --ink: #2E2E33; --ink-deep: #18181B; --slate-700: #45454C; --slate-500: #6B6B72; --slate-400: #8E8E96; --slate-300: #BFBFC4; --signal: #1F44C7; --signal-deep: #173494; --signal-tint: #E8EDFB; --link: #2563EB; --link-tint: #E8EFFE; --ok: #1F8A5B; --warn: #B7791F; --danger: #D14343; --ink-dark: #14141A; --ink-elev: #1E1E26; --ink-border: #2F2F38; --paper-on-dark: #F2F1ED; --bg: var(--paper); --bg-elev: var(--paper); --bg-inverse: var(--ink); --fg: var(--ink); --fg-muted: var(--slate-500); --fg-subtle: var(--slate-400); --fg-inverse: var(--paper); --border: var(--mist); --border-strong: var(--slate-300); --accent: var(--signal); --accent-fg: #FFFFFF; --font-display: "Inter Tight", "Inter", system-ui, -apple-system, sans-serif; --font-sans: "Inter", system-ui, -apple-system, sans-serif; --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace; --fs-xs: 12px; --fs-sm: 14px; --fs-base: 16px; --fs-md: 18px; --fs-lg: 22px; --fs-xl: 28px; --fs-2xl: 36px; --fs-3xl: 48px; --fs-4xl: 64px; --fs-5xl: 84px; --fs-6xl: 112px; --lh-tight: 1.05; --lh-snug: 1.18; --lh-normal: 1.5; --lh-relaxed: 1.65; --tr-tight: -0.02em; --tr-snug: -0.01em; --tr-normal: 0; --tr-wide: 0.04em; --tr-mono-cap: 0.08em; --tr-display: -0.045em; --s-0: 0; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --r-0: 0; --r-1: 2px; --r-2: 4px; --r-3: 8px; --r-4: 12px; --r-5: 16px; --r-pill: 999px; --shadow-1: 0 1px 0 rgba(24,24,27,0.04), 0 1px 2px rgba(24,24,27,0.04); --shadow-2: 0 2px 0 rgba(24,24,27,0.03), 0 6px 16px -6px rgba(24,24,27,0.10); --shadow-3: 0 24px 48px -16px rgba(24,24,27,0.18); --shadow-inset: inset 0 0 0 1px var(--border); --duration-fast: 120ms; --duration-base: 180ms; --duration-slow: 280ms; --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1); --character-heading-weight: 800; --character-heading-tracking: -0.045em; } /* Dark theme. Explicit attribute wins; otherwise follow the OS. Both are first-class. The accent LIFTS on ink or it disappears. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0E0E10; --bg-elev: #17171B; --bg-inverse: var(--paper); --fg: #F5F4EF; --fg-muted: #A0A0A8; --fg-subtle: #71717A; --fg-inverse: var(--ink); --border: #2A2A2F; --border-strong: #3A3A40; --pearl: #17171B; --mist: #2A2A2F; --signal: #4472F0; --signal-deep: #5D8AFF; --signal-tint: #1C2B4F; } } :root[data-theme="dark"] { --bg: #0E0E10; --bg-elev: #17171B; --bg-inverse: var(--paper); --fg: #F5F4EF; --fg-muted: #A0A0A8; --fg-subtle: #71717A; --fg-inverse: var(--ink); --border: #2A2A2F; --border-strong: #3A3A40; --pearl: #17171B; --mist: #2A2A2F; --signal: #4472F0; --signal-deep: #5D8AFF; --signal-tint: #1C2B4F; } /* The Character lever — pick one, don't invent a fourth. */ [data-character="quiet"] { --signal: #4A63B0; --signal-deep: #3A4F8C; --signal-tint: #EEF1FB; --character-heading-weight: 600; } [data-character="bold"] { --signal: #142F8C; --signal-deep: #0E2266; --signal-tint: #E3E9FA; --character-heading-weight: 800; } /* ---------- the accent lever: ten colours, one attribute on ---------- ⚠️ Written as COMPOUND selectors (`[data-theme][data-accent]`), not the descendant form `[data-theme="dark"] [data-accent="teal"]` printed in design-system/accents.md. The kit's own instruction is to put BOTH attributes on , and a descendant selector cannot match two attributes on the same element — so the documented dark values never apply. Flagged upstream. */ [data-accent="cobalt"] { --signal:#1F44C7; --signal-deep:#0F29AD; --signal-tint:#E9F0FF; } [data-accent="indigo"] { --signal:#5F2DBD; --signal-deep:#4C08A3; --signal-tint:#F0EEFF; } [data-accent="violet"] { --signal:#870F98; --signal-deep:#6B0079; --signal-tint:#FAEAFD; } [data-accent="plum"] { --signal:#9B0065; --signal-deep:#79004E; --signal-tint:#FFE9F3; } [data-accent="crimson"] { --signal:#A50022; --signal-deep:#810019; --signal-tint:#FFEBE9; } [data-accent="rust"] { --signal:#8F3800; --signal-deep:#6F2A00; --signal-tint:#FCECE6; } [data-accent="moss"] { --signal:#006927; --signal-deep:#00511C; --signal-tint:#E8F4E9; } [data-accent="emerald"] { --signal:#00664F; --signal-deep:#004F3C; --signal-tint:#E8F3EF; } [data-accent="teal"] { --signal:#00636B; --signal-deep:#004C53; --signal-tint:#E8F3F4; } [data-accent="azure"] { --signal:#005D88; --signal-deep:#00486A; --signal-tint:#E7F2F9; } /* On ink an accent must LIFT or it disappears, and -deep inverts: hover goes brighter, not darker. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"])[data-accent="cobalt"] { --signal:#4472F0; --signal-deep:#5D8AFF; --signal-tint:#1C2B4F; } :root:not([data-theme="light"])[data-accent="indigo"] { --signal:#8762E9; --signal-deep:#9A7CFA; --signal-tint:#2E254C; } :root:not([data-theme="light"])[data-accent="violet"] { --signal:#B64FC6; --signal-deep:#C96BD8; --signal-tint:#3C1F41; } :root:not([data-theme="light"])[data-accent="plum"] { --signal:#D24192; --signal-deep:#E560A7; --signal-tint:#451C31; } :root:not([data-theme="light"])[data-accent="crimson"] { --signal:#DF3E49; --signal-deep:#F25F62; --signal-tint:#4A1C1C; } :root:not([data-theme="light"])[data-accent="rust"] { --signal:#CE5500; --signal-deep:#E17037; --signal-tint:#481F0A; } :root:not([data-theme="light"])[data-accent="moss"] { --signal:#008E37; --signal-deep:#3BA252; --signal-tint:#0E3617; } :root:not([data-theme="light"])[data-accent="emerald"] { --signal:#008B6C; --signal-deep:#3B9F81; --signal-tint:#003628; } :root:not([data-theme="light"])[data-accent="teal"] { --signal:#008893; --signal-deep:#3C9CA6; --signal-tint:#003439; } :root:not([data-theme="light"])[data-accent="azure"] { --signal:#0082BB; --signal-deep:#3A97CC; --signal-tint:#003049; } } :root[data-theme="dark"][data-accent="cobalt"] { --signal:#4472F0; --signal-deep:#5D8AFF; --signal-tint:#1C2B4F; } :root[data-theme="dark"][data-accent="indigo"] { --signal:#8762E9; --signal-deep:#9A7CFA; --signal-tint:#2E254C; } :root[data-theme="dark"][data-accent="violet"] { --signal:#B64FC6; --signal-deep:#C96BD8; --signal-tint:#3C1F41; } :root[data-theme="dark"][data-accent="plum"] { --signal:#D24192; --signal-deep:#E560A7; --signal-tint:#451C31; } :root[data-theme="dark"][data-accent="crimson"] { --signal:#DF3E49; --signal-deep:#F25F62; --signal-tint:#4A1C1C; } :root[data-theme="dark"][data-accent="rust"] { --signal:#CE5500; --signal-deep:#E17037; --signal-tint:#481F0A; } :root[data-theme="dark"][data-accent="moss"] { --signal:#008E37; --signal-deep:#3BA252; --signal-tint:#0E3617; } :root[data-theme="dark"][data-accent="emerald"] { --signal:#008B6C; --signal-deep:#3B9F81; --signal-tint:#003628; } :root[data-theme="dark"][data-accent="teal"] { --signal:#008893; --signal-deep:#3C9CA6; --signal-tint:#003439; } :root[data-theme="dark"][data-accent="azure"] { --signal:#0082BB; --signal-deep:#3A97CC; --signal-tint:#003049; }