/* ========================================================================== tokens.css — the only place a raw colour, radius or shadow is written. Everything downstream references a token. Dark mode is a token swap, not a second stylesheet. ========================================================================== */ /* Light is the default for everyone. The OS preference is deliberately not consulted — dark is opt-in through x-theme-toggle, which sets data-theme on . See core/theme.service.js. */ :root { color-scheme: light; /* --- brand ------------------------------------------------------------ */ --x-blue: #5f7ce0; --x-blue-deep: #3f59c9; --x-blue-ink: #33459f; --x-blue-wash: #eef1fd; --x-teal: #3ea9a6; --x-teal-ink: #1f7a76; --x-teal-wash: #e6f4f2; --x-violet: #8a6ae0; --x-violet-soft: #b7a2ee; --x-violet-ink: #5b45b0; --x-violet-wash: #f2eefd; --x-amber: #d98b3a; /* --- surfaces --------------------------------------------------------- */ --x-bg: #f6f7fb; --x-surface: #ffffff; --x-surface-sunken: #f7f8fc; --x-surface-deep: #eef0f6; --x-surface-veil: rgba(246, 247, 251, 0.94); --x-surface-translucent: rgba(255, 255, 255, 0.7); /* --- text ------------------------------------------------------------- */ --x-text: #1b2130; --x-text-strong: #262d3d; --x-text-body: #4b5468; --x-text-muted: #5b6478; --x-text-faint: #646d82; --x-text-footer: #6c7589; /* --- lines ------------------------------------------------------------ */ --x-border: rgba(27, 33, 48, 0.08); --x-border-strong: #c7d0e6; --x-link-underline: #b9c5f0; --x-focus: #5f7ce0; --x-highlight: #dfe7fb; /* --- elevation -------------------------------------------------------- */ --x-shadow-sm: 0 1px 2px rgba(23, 28, 42, 0.05), 0 14px 28px -22px rgba(23, 28, 42, 0.6); --x-shadow-md: 0 1px 2px rgba(23, 28, 42, 0.04), 0 24px 48px -34px rgba(23, 28, 42, 0.55); --x-shadow-lg: 0 1px 2px rgba(23, 28, 42, 0.04), 0 30px 60px -40px rgba(23, 28, 42, 0.6); /* --- geometry --------------------------------------------------------- */ --x-radius-sm: 14px; --x-radius-md: 20px; --x-radius-lg: 24px; --x-radius-xl: 28px; --x-gutter: clamp(18px, 5vw, 56px); --x-measure: 1120px; --x-section-gap: clamp(40px, 7vw, 72px); /* --- type ------------------------------------------------------------- */ --x-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; --x-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; /* --- backdrop --------------------------------------------------------- */ --x-mesh-1: #e7edfd; --x-mesh-2: #e4f3f1; --x-mesh-3: #f0ebfd; --x-grid-dot: #dfe3ee; } /* Dark is a token swap, not a second stylesheet — and it is driven by an explicit choice, never by @media (prefers-color-scheme). */ :root[data-theme="dark"] { color-scheme: dark; --x-blue-wash: #1e2647; --x-blue-ink: #a8bcff; --x-teal-wash: #16302f; --x-teal-ink: #6fd3cf; --x-violet-wash: #241f42; --x-violet-ink: #bda6ff; --x-link-underline: #3d4d86; --x-highlight: #253461; --x-bg: #0e131d; --x-surface: #161d2b; --x-surface-sunken: #131a27; --x-surface-deep: #1b2333; --x-surface-veil: rgba(14, 19, 29, 0.92); --x-surface-translucent: rgba(22, 29, 43, 0.66); --x-text: #e8ecf6; --x-text-strong: #dde3f0; --x-text-body: #b3bcd0; --x-text-muted: #98a2ba; --x-text-faint: #838ea6; --x-text-footer: #838ea6; --x-border: rgba(232, 236, 246, 0.1); --x-border-strong: #2f3a54; --x-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 14px 28px -22px rgba(0, 0, 0, 0.9); --x-shadow-md: 0 1px 2px rgba(0, 0, 0, 0.4), 0 24px 48px -34px rgba(0, 0, 0, 0.9); --x-shadow-lg: 0 1px 2px rgba(0, 0, 0, 0.4), 0 30px 60px -40px rgba(0, 0, 0, 0.95); --x-mesh-1: #172041; --x-mesh-2: #10262a; --x-mesh-3: #1d1a36; --x-grid-dot: #1c2434; }