/* * Design tokens. * * Every colour, space, radius and shadow used anywhere in the admin resolves to * a variable defined here. Components never hardcode a hex value, which is what * makes the dark theme a single block of overrides rather than a second * stylesheet. * * The palette is built around a deep teal: it reads as health and clinical * precision without the saturated "wellness green" that every supplement brand * already uses, and it stays legible against the dense grey surfaces an * operations screen needs. */ :root { color-scheme: light dark; /* --- Neutral ramp ------------------------------------------------------ Slightly cool greys, which keep the gold reading as warm rather than yellow-green beside them. */ --grey-0: #ffffff; --grey-25: #fbfcfd; --grey-50: #f6f8fa; --grey-100: #eceff3; --grey-200: #dde2e9; --grey-300: #c5ccd6; --grey-400: #9aa4b2; --grey-500: #6f7987; --grey-600: #545d6b; --grey-700: #374151; --grey-800: #272e3a; --grey-900: #171d26; --grey-950: #0d1117; /* --- Accent (Nutrimend gold) ------------------------------------------- Sampled from the logo itself: its lightest tone is #FAF08B, its median #E1B449 and its deepest #AD7029. 400 is that median, and the ramp is built around it. Gold is a light hue, so this ramp is not a drop-in swap for the teal it replaced. Measured against white: 400 1.94:1 decoration only 500 2.70:1 decoration only 600 3.94:1 passes AA for UI components and borders (>= 3.0) 700 5.64:1 passes AA for body text (>= 4.5) <- text and links 800 7.85:1 So --text-accent is 700, not 600, and white on gold is never used: it reaches 2.7:1 at best. An accent fill carries dark text instead, which is 9.34:1 - and is what the storefront's gold buttons do. */ --accent-50: #fdf9ec; --accent-100: #faf0cd; --accent-200: #f4e09b; --accent-300: #ecc962; --accent-400: #e1b449; --accent-500: #c8952b; --accent-600: #a87722; --accent-700: #87601f; --accent-800: #6b4c1d; --accent-900: #4a350f; /* What to write *on* an accent fill. Near-black, never white. */ --accent-contrast: #16130c; /* --- Status ------------------------------------------------------------ Each has a surface/border/text triple so a badge never needs opacity tricks that break against an unexpected background. */ --success-surface: #e7f7ee; --success-border: #a6e0bf; --success-text: #12703f; --warning-surface: #fdf3e2; --warning-border: #f2cd8f; --warning-text: #8a5a08; --danger-surface: #fdecec; --danger-border: #f3b6b6; --danger-text: #9b1c1c; --info-surface: #e9f1fd; --info-border: #b3cef7; --info-text: #1c4f9b; /* --- Semantic surfaces ------------------------------------------------- */ --bg-canvas: var(--grey-50); --bg-surface: var(--grey-0); --bg-sunken: var(--grey-100); --bg-hover: var(--grey-100); --bg-selected: var(--accent-50); --bg-inverse: var(--grey-900); --border-subtle: var(--grey-200); --border-strong: var(--grey-300); --border-focus: var(--accent-500); --text-primary: var(--grey-900); --text-secondary: var(--grey-600); --text-muted: var(--grey-500); --text-inverse: var(--grey-0); --text-accent: var(--accent-700); --text-link: var(--accent-700); /* --- Typography -------------------------------------------------------- System stack: an admin tool should render instantly and match the host OS rather than wait on a webfont. Tabular numerals keep money columns aligned. */ --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --text-2xs: 0.6875rem; /* 11px - table meta, badges */ --text-xs: 0.75rem; /* 12px - labels, help text */ --text-sm: 0.8125rem; /* 13px - table body */ --text-base:0.875rem; /* 14px - default UI size */ --text-md: 1rem; --text-lg: 1.125rem; --text-xl: 1.375rem; --text-2xl: 1.75rem; --text-3xl: 2.25rem; --leading-tight: 1.25; --leading-normal: 1.5; --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* --- Space (4px base) --------------------------------------------------- */ --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; /* --- Radius ------------------------------------------------------------- */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-xl: 14px; --radius-full: 999px; /* --- Elevation ---------------------------------------------------------- Layered rather than blurred: a single large blur looks soft and imprecise on a dense data screen. */ --shadow-xs: 0 1px 2px rgb(16 24 40 / 0.05); --shadow-sm: 0 1px 3px rgb(16 24 40 / 0.1), 0 1px 2px rgb(16 24 40 / 0.06); --shadow-md: 0 4px 8px -2px rgb(16 24 40 / 0.1), 0 2px 4px -2px rgb(16 24 40 / 0.06); --shadow-lg: 0 12px 16px -4px rgb(16 24 40 / 0.08), 0 4px 6px -2px rgb(16 24 40 / 0.03); --shadow-xl: 0 20px 24px -4px rgb(16 24 40 / 0.08), 0 8px 8px -4px rgb(16 24 40 / 0.03); /* --- Layout ------------------------------------------------------------- */ --sidebar-width: 248px; --sidebar-width-collapsed: 60px; --header-height: 56px; --content-max: 1600px; /* --- Motion ------------------------------------------------------------- Short and eased. Anything slower than ~200ms feels sluggish when an operator is moving through hundreds of rows. */ --ease: cubic-bezier(0.2, 0, 0.13, 1.5); --duration-fast: 100ms; --duration-base: 160ms; --z-dropdown: 100; --z-sticky: 200; --z-header: 300; --z-drawer: 400; --z-modal: 500; --z-toast: 600; } /* * Dark theme. * * Surfaces lift as they come forward (canvas darkest, popovers lightest), * which is the opposite of the light theme and the reason these cannot simply * be inverted. Accent shifts lighter so it keeps contrast on a dark surface. */ :root[data-theme="dark"] { --bg-canvas: var(--grey-950); --bg-surface: var(--grey-900); --bg-sunken: #121820; --bg-hover: #1d242f; --bg-selected: rgb(225 180 73 / 0.14); --bg-inverse: var(--grey-100); --border-subtle: #232b36; --border-strong: #303a47; --text-primary: #e7ebf0; --text-secondary: #a3adbb; --text-muted: #7c8695; --text-inverse: var(--grey-900); --text-accent: var(--accent-300); --text-link: var(--accent-300); --success-surface: rgb(18 112 63 / 0.18); --success-border: rgb(166 224 191 / 0.3); --success-text: #6ee7a8; --warning-surface: rgb(138 90 8 / 0.2); --warning-border: rgb(242 205 143 / 0.3); --warning-text: #f0c274; --danger-surface: rgb(155 28 28 / 0.2); --danger-border: rgb(243 182 182 / 0.28); --danger-text: #f79999; --info-surface: rgb(28 79 155 / 0.2); --info-border: rgb(179 206 247 / 0.28); --info-text: #9dc2f5; /* Shadows need more opacity to read at all against a dark canvas. */ --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.3); --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.4), 0 1px 2px rgb(0 0 0 / 0.3); --shadow-md: 0 4px 8px -2px rgb(0 0 0 / 0.45), 0 2px 4px -2px rgb(0 0 0 / 0.3); --shadow-lg: 0 12px 16px -4px rgb(0 0 0 / 0.5), 0 4px 6px -2px rgb(0 0 0 / 0.3); --shadow-xl: 0 20px 24px -4px rgb(0 0 0 / 0.55), 0 8px 8px -4px rgb(0 0 0 / 0.3); } /* Follows the OS when the operator has not chosen explicitly. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg-canvas: var(--grey-950); --bg-surface: var(--grey-900); --bg-sunken: #121820; --bg-hover: #1d242f; --bg-selected: rgb(225 180 73 / 0.14); --bg-inverse: var(--grey-100); --border-subtle: #232b36; --border-strong: #303a47; --text-primary: #e7ebf0; --text-secondary: #a3adbb; --text-muted: #7c8695; --text-inverse: var(--grey-900); --text-accent: var(--accent-300); --text-link: var(--accent-300); --success-surface: rgb(18 112 63 / 0.18); --success-border: rgb(166 224 191 / 0.3); --success-text: #6ee7a8; --warning-surface: rgb(138 90 8 / 0.2); --warning-border: rgb(242 205 143 / 0.3); --warning-text: #f0c274; --danger-surface: rgb(155 28 28 / 0.2); --danger-border: rgb(243 182 182 / 0.28); --danger-text: #f79999; --info-surface: rgb(28 79 155 / 0.2); --info-border: rgb(179 206 247 / 0.28); --info-text: #9dc2f5; --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.3); --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.4), 0 1px 2px rgb(0 0 0 / 0.3); --shadow-md: 0 4px 8px -2px rgb(0 0 0 / 0.45), 0 2px 4px -2px rgb(0 0 0 / 0.3); --shadow-lg: 0 12px 16px -4px rgb(0 0 0 / 0.5), 0 4px 6px -2px rgb(0 0 0 / 0.3); --shadow-xl: 0 20px 24px -4px rgb(0 0 0 / 0.55), 0 8px 8px -4px rgb(0 0 0 / 0.3); } }