/* * THEME TOKEN CONTRACT * ------------------------------------------------------------------ * Every theme MUST define this full token set. Nothing in a shared * view or in base.css / components.css may hardcode a color, font, * radius, or shadow. Only reference these variables. * * A theme is one file: themes/.css, scoped to * [data-theme=""]. The layout sets * . * Adding a theme = drop a file in this directory. Zero Ruby changes. * * The :root block below is the DEFAULT theme and the safety net: it * guarantees every token always has a value even if a theme forgets * one. Keep it in sync with the contract. * * Tokens: * --color-bg page background * --color-surface cards, raised panels * --color-text primary body text (must pass WCAG AA on --color-bg AND --color-surface) * --color-text-muted secondary text (must pass WCAG AA) * --color-accent primary action / brand * --color-accent-contrast text/icon on top of --color-accent * --color-border hairlines, dividers, input borders * --color-success yes / positive * --color-danger no / destructive * --font-display headings * --font-body body copy * --font-mono numbers, tokens, code * --radius-sm/md/lg corner radii * --shadow-card card elevation * --texture-bg optional url() overlay for the page (default: none) */ :root { --color-bg: #faf9f7; --color-surface: #ffffff; --color-text: #1c1b1a; --color-text-muted: #5c5955; --color-accent: #7c3aed; --color-accent-contrast: #ffffff; --color-border: #e3e0db; --color-success: #15803d; --color-danger: #b91c1c; --font-display: "Kabel", "Futura", "Century Gothic", sans-serif; --font-body: "Klavika", "Kabel", "Futura", "Century Gothic", sans-serif; --font-mono: ui-monospace, "SFMono-Regular", "Menlo", monospace; --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.06); --texture-bg: none; }