/* * DESIGN TOKENS - the single source of truth for the whole front end. * * Two kinds of tokens live in this system: * * 1. Static tokens (this file): type scale, spacing rhythm, radii, * elevation, motion. Identical for every tenant - they encode the * design language itself, not the branding. * * 2. Per-tenant tokens: the color palette and font families, injected * inline in base.html from ThemeSettings (--color-primary, * --bg-surface, --font-heading and friends). Never hardcode those * values in a stylesheet. * * Nothing below may reference a hardcoded hex, px font-size or ad-hoc * shadow; components consume these tokens exclusively. */ :root { /* ---- Fluid type scale ------------------------------------------- clamp(min, preferred, max): every size grows with the viewport between a phone-safe minimum and a desktop maximum, so there are no breakpoint jumps and no unreadable small text on mobile. */ --fs-display: clamp(2.25rem, 1.55rem + 2.9vw, 3.75rem); /* 36 -> 60 */ --fs-h1: clamp(1.875rem, 1.4rem + 2vw, 3rem); /* 30 -> 48 */ --fs-h2: clamp(1.5rem, 1.18rem + 1.4vw, 2.25rem); /* 24 -> 36 */ --fs-h3: clamp(1.25rem, 1.1rem + 0.7vw, 1.75rem); /* 20 -> 28 */ --fs-h4: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);/* 18 -> 22 */ --fs-h5: 1.125rem; /* 18 */ --fs-h6: 1rem; /* 16 */ --fs-body-lg: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem); /* 17 -> 19 */ --fs-body: 1rem; /* 16 */ --fs-sm: 0.9375rem; /* 15 */ --fs-xs: 0.8125rem; /* 13 */ --fs-2xs: 0.75rem; /* 12 */ /* Line heights: tight for display type, relaxed for reading copy. */ --lh-tight: 1.1; --lh-snug: 1.25; --lh-normal: 1.45; --lh-relaxed: 1.6; /* Optical tracking: large type needs negative tracking to look set rather than spaced out; small uppercase labels need the opposite. */ --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.08em; /* ---- Spacing: strict 8px scale (xs is the single 4px half-step) --- */ --space-xs: 0.25rem; /* 4px */ --space-sm: 0.5rem; /* 8px */ --space-md: 1rem; /* 16px */ --space-lg: 1.5rem; /* 24px */ --space-xl: 2rem; /* 32px */ --space-2xl: 3rem; /* 48px */ --space-3xl: 4rem; /* 64px */ --space-4xl: 6rem; /* 96px */ /* Vertical rhythm between major page sections, fluid like the type. */ --section-padding-y: clamp(3.5rem, 6vw, 6rem); /* ---- Layout ------------------------------------------------------ */ --container-max: 1240px; --measure: 68ch; /* comfortable reading width for body copy */ --measure-short: 42rem; /* ---- Radii: soft, never sharp - this is where "warm" comes from -- */ --radius-xs: 6px; --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-xl: 32px; --radius-full: 9999px; /* ---- Elevation: 3 tiers, all tinted with the slate ink so shadows read as depth rather than dirty gray ---------------------------- */ /* Tier 1 - resting cards: barely there, just lifts off the page. */ --shadow-ambient: 0 1px 2px 0 rgb(15 23 42 / 0.04), 0 4px 16px -4px rgb(15 23 42 / 0.06); /* Tier 2 - hover/active: clearly raised, still soft. */ --shadow-lifted: 0 2px 4px 0 rgb(15 23 42 / 0.05), 0 16px 32px -8px rgb(15 23 42 / 0.12); /* Tier 3 - modals, dropdowns, lightboxes: deep and diffused. */ --shadow-overlay: 0 8px 16px -4px rgb(15 23 42 / 0.10), 0 32px 64px -16px rgb(15 23 42 / 0.28); /* Legacy aliases - older stylesheets referenced these names. Kept so a missed consumer degrades to the right tier instead of to `none`. */ --shadow-sm: var(--shadow-ambient); --shadow-card: var(--shadow-ambient); --shadow-card-hover: var(--shadow-lifted); /* ---- Borders ----------------------------------------------------- */ --border-subtle: #e5e7eb; --border-strong: #cbd5e1; /* * Section band tone, one step darker than the page. Used by the * "muted" background preset so alternating bands read as distinct * even when a tenant sets --bg-page and --bg-surface to the same * color. Derived so it follows the tenant palette; the fallback is * the raw page color where color-mix() is unsupported. */ --bg-subtle: var(--bg-page); /* * Deepened secondary text, for use on the tinted section bands. * Measured: the default --text-muted (#64748b) sits at 4.55:1 on the * page - just over AA - so any band darker than the page pushes it * under (3.95:1 on brand-tint). Capping its lightness restores * 4.99:1 while keeping it clearly secondary to the body ink. */ --text-muted-strong: var(--text-muted); /* * Accent-on-light pair - the contrast safety net for tenant palettes. * * A tenant may pick any brand color, and a light or mid-tone one fails * WCAG AA as small text even when it works fine as a fill. Measured on * white: #dc493a 4.2:1, #22c55e 2.3:1, #f59e0b 2.1:1 - all below the * 4.5:1 AA floor. So text and fills draw on separate tokens: * * --color-primary-text labels, links, badge text, active tabs * --color-primary-strong solid fills that carry white text * --color-primary borders, rings, icon fills (no contrast need) * * Both are the brand color with its OKLCH lightness capped, which * preserves hue and chroma (the brand still reads as itself) and only * darkens colors that are actually too light - a already-dark navy is * left untouched by min(). Caps were chosen by measuring six brand hues * in a real browser: at these values the worst case is 5.65:1 for text * and 4.51:1 for white-on-fill, both clearing AA. */ --color-primary-text: var(--color-primary); --color-primary-strong: var(--color-primary); /* ---- Motion: one duration/easing pair for everything interactive - */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --transition-fast: 120ms var(--ease-out); --transition: 200ms var(--ease-out); --transition-slow: 300ms var(--ease-out); /* larger surfaces: cards, image zoom */ --lift: -2px; /* hover translateY distance */ /* ---- Stacking ---------------------------------------------------- */ --z-header: 40; --z-overlay: 1000; } @supports (color: oklch(from red l c h)) { :root { --color-primary-text: oklch(from var(--color-primary) min(l, 0.46) c h); --color-primary-strong: oklch(from var(--color-primary) min(l, 0.52) c h); --text-muted-strong: oklch(from var(--text-muted) min(l, 0.50) c h); } } @supports (color: color-mix(in oklab, red, blue)) { :root { --bg-subtle: color-mix(in oklab, var(--bg-surface) 94%, var(--text-primary)); } } /* Honour "reduce motion" globally rather than per-component. */ @media (prefers-reduced-motion: reduce) { :root { --transition-fast: 0ms; --transition: 0ms; --transition-slow: 0ms; --lift: 0px; } }