/* lib-js-shell — design tokens (framework/09-theming-responsive.md). * Components reference roles, never raw colors. Themes switch by setting * data-theme on ; the default follows prefers-color-scheme. * The accent is tenant/user-tunable by overriding --accent downstream * (app → tenant → user, accumulative levels). */ :root { /* ---- color roles: default light theme ---- */ --bg: #f7f7f5; --bg-raised: #ffffff; --bg-sunken: #ececea; --text: #1c1c1a; --text-muted: #6b6b66; --accent: #145ea8; --accent-contrast: #ffffff; --danger: #b3261e; --success: #1c7d3c; --warning: #8a5a00; --border: #d8d8d4; --focus-ring: #145ea8; /* ---- spacing scale (fixed ratio) ---- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2.25rem; --space-7: 3.5rem; /* ---- type scale (role-based, rem so font scaling works) ---- */ --font-family: system-ui, -apple-system, "Segoe UI", sans-serif; --font-family-mono: ui-monospace, "SF Mono", Menlo, monospace; --type-title: 600 1.25rem/1.3 var(--font-family); --type-subtitle: 600 1rem/1.4 var(--font-family); --type-body: 400 0.9375rem/1.5 var(--font-family); --type-caption: 400 0.8125rem/1.4 var(--font-family); --type-mono: 400 0.8125rem/1.4 var(--font-family-mono); /* ---- radii, borders, elevation, motion ---- */ --radius-1: 4px; --radius-2: 8px; --border-w: 1px; --elevation-1: 0 1px 2px rgb(0 0 0 / 8%); --elevation-2: 0 2px 8px rgb(0 0 0 / 12%); --motion-fast: 120ms; --motion-slow: 240ms; /* ---- breakpoints (single definition; media queries cannot read custom properties, so these values are the documented constants used in component container queries and the shell media queries below) ---- phone < 640px ≤ tablet < 1024px ≤ desktop */ --bp-tablet: 640px; --bp-desktop: 1024px; color-scheme: light; } /* Default dark theme: applied by explicit choice… */ :root[data-theme='dark'] { --bg: #191a1c; --bg-raised: #232527; --bg-sunken: #121314; --text: #ececea; --text-muted: #a3a39d; --accent: #6aa9e0; --accent-contrast: #10233a; --danger: #ef8079; --success: #6fce92; --warning: #e0b45c; --border: #3a3c3f; --focus-ring: #6aa9e0; color-scheme: dark; } /* …or by following the system when no explicit theme is set. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --bg: #191a1c; --bg-raised: #232527; --bg-sunken: #121314; --text: #ececea; --text-muted: #a3a39d; --accent: #6aa9e0; --accent-contrast: #10233a; --danger: #ef8079; --success: #6fce92; --warning: #e0b45c; --border: #3a3c3f; --focus-ring: #6aa9e0; color-scheme: dark; } }