/* Design tokens: the single source for colour, type, spacing and motion. */ :root { color-scheme: light; /* Typography (system stack; a self-hosted face can be added later) */ --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --text-xs: 12px; --text-sm: 13px; --text-base: 14px; --text-md: 15px; --text-lg: 17px; --text-xl: 20px; --text-2xl: 26px; --text-3xl: 34px; --leading-tight: 1.2; --leading-normal: 1.55; /* Spacing (4px scale) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-full: 999px; /* Neutrals */ --color-bg: #f5f6f8; --color-surface: #ffffff; --color-surface-muted: #f0f2f5; --color-border: #e3e6eb; --color-border-strong: #cdd2da; --color-text: #12161f; --color-text-muted: #5b6475; --color-text-subtle: #8a93a3; /* Brand: ink + champagne */ --color-ink: #151922; --color-ink-hover: #262c38; --color-on-ink: #ffffff; --color-accent: #b8925a; --color-accent-strong: #9a7644; --color-accent-soft: rgba(184, 146, 90, .16); /* Feedback */ --color-danger: #c4320a; --color-on-danger: #ffffff; --color-danger-soft: #fef1ec; --color-danger-border: #f6c9b8; --color-success: #067647; --color-success-soft: #ecfdf3; --color-success-border: #abefc6; --color-info: #175cd3; --color-info-soft: #eff5ff; --color-info-border: #b2ccff; --focus-ring: 0 0 0 3px rgba(184, 146, 90, .38); --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06); --shadow-md: 0 4px 12px -2px rgba(16, 24, 40, .08), 0 2px 4px -2px rgba(16, 24, 40, .05); --shadow-lg: 0 20px 40px -12px rgba(16, 24, 40, .18); --motion-fast: 120ms; --motion-base: 200ms; --ease-out: cubic-bezier(.2, .8, .2, 1); /* Shell */ --sidebar-width: 256px; --sidebar-width-collapsed: 72px; --topbar-height: 60px; --content-gutter: 32px; --sidebar-bg: #151922; --sidebar-border: rgba(255, 255, 255, .07); --sidebar-text: rgba(236, 239, 244, .74); --sidebar-text-strong: #ffffff; --sidebar-muted: rgba(236, 239, 244, .42); --sidebar-hover: rgba(255, 255, 255, .06); --sidebar-active: rgba(184, 146, 90, .16); --sidebar-accent: #b8925a; --color-warning: #9a5b00; --color-warning-soft: #fff6e5; /* Stacking (native dialogs and popovers use the top layer) */ --z-topbar: 20; --z-sidebar: 30; --z-overlay: 40; --z-dropdown: 50; --z-toast: 60; } /* * Themes (, saved per user): * default ink sidebar, light pages; dark pages when the device prefers dark * dark the dark palette, always * white light pages and a white sidebar, always * The dark palette appears twice (device-dark Default, and Dark). The two * blocks between the dark:start / dark:end markers must stay identical; * tests/Admin/ThemeTest.php enforces this. */ @media (prefers-color-scheme: dark) { :root[data-theme="default"], :root:not([data-theme]) { /* dark:start */ color-scheme: dark; --color-bg: #0e1117; --color-surface: #161a22; --color-surface-muted: #1d222c; --color-border: #272d38; --color-border-strong: #353c49; --color-text: #eef0f4; --color-text-muted: #a3abb9; --color-text-subtle: #737c8c; --color-ink: #eef0f4; --color-ink-hover: #ffffff; --color-on-ink: #12161f; --color-danger: #ff8a65; --color-on-danger: #1c0d08; --color-danger-soft: #2a1712; --color-danger-border: #5c2c1f; --color-success: #4ade80; --color-success-soft: #0f2419; --color-success-border: #1f5134; --color-info: #8ab4ff; --color-info-soft: #121c30; --color-info-border: #26406e; --color-warning: #f5c26b; --color-warning-soft: #2a2112; --shadow-md: 0 4px 12px -2px rgba(0, 0, 0, .5); --shadow-lg: 0 20px 40px -12px rgba(0, 0, 0, .6); /* dark:end */ } } :root[data-theme="dark"] { /* dark:start */ color-scheme: dark; --color-bg: #0e1117; --color-surface: #161a22; --color-surface-muted: #1d222c; --color-border: #272d38; --color-border-strong: #353c49; --color-text: #eef0f4; --color-text-muted: #a3abb9; --color-text-subtle: #737c8c; --color-ink: #eef0f4; --color-ink-hover: #ffffff; --color-on-ink: #12161f; --color-danger: #ff8a65; --color-on-danger: #1c0d08; --color-danger-soft: #2a1712; --color-danger-border: #5c2c1f; --color-success: #4ade80; --color-success-soft: #0f2419; --color-success-border: #1f5134; --color-info: #8ab4ff; --color-info-soft: #121c30; --color-info-border: #26406e; --color-warning: #f5c26b; --color-warning-soft: #2a2112; --shadow-md: 0 4px 12px -2px rgba(0, 0, 0, .5); --shadow-lg: 0 20px 40px -12px rgba(0, 0, 0, .6); /* dark:end */ } /* White: light pages (whatever the device prefers) and a white sidebar. */ :root[data-theme="white"] { color-scheme: light; --sidebar-bg: #ffffff; --sidebar-border: #e3e6eb; --sidebar-text: #454d5c; --sidebar-text-strong: #12161f; --sidebar-muted: #6b7485; --sidebar-hover: #f2f4f7; --sidebar-active: #f6efe4; --sidebar-accent: #8a6a3c; /* darker champagne: 4.5:1 on white */ }