/* Design tokens (UI amendment §2). Load before Bootstrap. */ :root { /* neutrals */ --color-bg: #F7F8FA; --color-surface: #FFFFFF; --color-surface-alt: #F1F3F6; --color-border: #E3E7EC; --color-border-strong: #C9D0D8; --color-text: #1A2028; --color-text-muted: #5C6B75; /* Darkened from #8794A0, which read at 3.1:1 on white and so failed on every sidebar section heading. */ --color-text-subtle: #68737F; /* brand */ --color-primary: #1C7293; --color-primary-hover: #185E7A; --color-primary-soft: #E4F1F6; --color-accent: #2E9CB8; /* status */ --color-success: #2F855A; --color-warning: #E8A33D; --color-danger: #C0392B; --color-info: #2E86AB; --color-success-soft: #E6F4EC; --color-warning-soft: #FBEFD8; --color-danger-soft: #F8E3E0; --color-info-soft: #E1EEFB; /* A status colour used as text is not the same colour as the fill. The light palette's amber is a good chip background and a poor label on one: #E8A33D on its own soft tint reads at 1.9:1. These are the reading versions, and in the dark palette they are simply the fills, which are already light enough. */ --color-success-ink: #1E6B45; --color-warning-ink: #7A4E00; --color-danger-ink: #A32B20; --color-info-ink: #1A5F7E; --color-focus-ring: #1C729355; /* spacing / radius / shadow */ --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-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --shadow-xs: 0 1px 2px rgba(15,23,32,.05); --shadow-sm: 0 1px 3px rgba(15,23,32,.06), 0 1px 2px rgba(15,23,32,.04); --shadow-md: 0 4px 10px rgba(15,23,32,.07), 0 2px 4px rgba(15,23,32,.05); --shadow-lg: 0 12px 30px rgba(15,23,32,.10); /* typography */ --font-sans: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --text-xs: 12px; --lh-xs: 16px; --text-sm: 13px; --lh-sm: 18px; --text-md: 14px; --lh-md: 20px; --text-lg: 16px; --lh-lg: 24px; --text-xl: 18px; --lh-xl: 26px; --text-2xl: 22px; --lh-2xl: 30px; --text-3xl: 28px; --lh-3xl: 36px; --weight-regular: 400; --weight-medium: 500; --weight-semibold:600; --weight-bold: 700; /* motion */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --dur-xs: 90ms; --dur-sm: 140ms; --dur-md: 220ms; --dur-lg: 320ms; --dur-xl: 500ms; /* shell */ --sidebar-w: 260px; --sidebar-w-collapsed: 72px; --topbar-h: 56px; } /* Density */ :root[data-density="compact"] { font-size: 13px; } :root[data-density="comfortable"] { font-size: 14px; } :root[data-density="cozy"] { font-size: 15px; } :root { font-size: 14px; } /* default */ /* Tell the browser which native UI (form select popup menus, scrollbars, input caret) to render for each theme so the country code select, options in dropdowns, and other native controls pick up the matching palette instead of rendering the default light chrome on our dark surface. */ /* Ink that sits on a filled accent, success or warning surface. In light mode the accent is dark and the ink is white. In dark mode the accent is deliberately light, so white on it reads at 2.4:1: the ink has to flip with the theme, not stay white. */ :root { --color-on-accent: #FFFFFF; } /* White on amber reads at about 2:1, so a warning fill takes dark text. */ :root { --color-on-warning: #1A2028; } :root[data-theme="dark"] { --color-on-accent: #0C0C0E; } :root { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } /* Dark palette. Neutral charcoal, not navy: a blue-tinted page made every accent fight the background. Three steps of grey (bg, surface, surface-alt) give depth, so shadows matter less and borders do the work. Status colours are a step calmer than a brightened light palette would be, which read as neon on charcoal. */ [data-theme="dark"] { --color-bg: #0C0C0E; --color-surface: #141416; --color-surface-alt: #1B1B1E; --color-border: #26262A; --color-border-strong: #34343A; --color-text: #ECECEE; --color-text-muted: #A0A0A8; /* 5.4:1 on the surface, 5.0:1 on surface-alt. */ --color-text-subtle: #8A8A92; --color-primary: #5AAFC6; --color-primary-hover: #73BBCF; --color-primary-soft: #1F2D32; --color-accent: #73BBCF; --color-success: #4CBF7F; --color-warning: #D9A441; --color-danger: #E26A6A; --color-info: #6AA7E8; /* Every dark tint is the hue mixed over the surface (#141416); the soft fills are 16%. Precomputed so no browser needs color-mix. */ --color-success-soft: #1D2F27; --color-warning-soft: #342B1D; --color-danger-soft: #352223; --color-info-soft: #222C38; /* A light status colour reads as text on a dark tint, so the ink is the colour itself. Danger is lifted slightly: at 24% the fill would read at 4.1:1, under the 4.5 body text needs. */ --color-success-ink: var(--color-success); --color-warning-ink: var(--color-warning); --color-danger-ink: #E57C7C; --color-info-ink: var(--color-info); /* Alert panels (14%): nearly neutral; the icon carries the meaning. */ --color-success-panel: #1C2C25; --color-warning-panel: #30281C; --color-danger-panel: #312022; --color-info-panel: #202933; /* A tinted button on hover (20%), and pressed or chosen (24%). */ --color-success-tint-hover: #1F362B; --color-warning-tint-hover: #3B311F; --color-danger-tint-hover: #3D2527; --color-info-tint-hover: #253140; --color-success-tint-strong: #213D2F; --color-warning-tint-strong: #433720; --color-danger-tint-strong: #45292A; --color-info-tint-strong: #293748; --color-focus-ring: #5AAFC655; /* A neutral choice that is not a status: the text at 15% over the surface. */ --color-choice-neutral: #343436; --shadow-xs: 0 1px 2px rgba(0,0,0,.4); --shadow-sm: 0 1px 3px rgba(0,0,0,.45); --shadow-md: 0 6px 14px rgba(0,0,0,.5); --shadow-lg: 0 16px 40px rgba(0,0,0,.6); } /* The select arrow, drawn in the muted text colour of each theme. Bootstrap draws it near-black in both, which vanishes on charcoal. */ :root { --select-arrow: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%235C6B75' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); } [data-theme="dark"] { --select-arrow: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23A0A0A8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); } /* Accent presets. data-accent on swaps the brand set. The focus ring is the primary at a third opacity, so it follows the accent. The dark versions are lighter, to read on charcoal, and a little calmer. */ :root[data-accent="teal"] { --color-primary: #1C7293; --color-primary-hover: #185E7A; --color-accent: #2E9CB8; --color-primary-soft: #E4F1F6; --color-focus-ring: #1C729355; } :root[data-accent="indigo"] { --color-primary: #4F46E5; --color-primary-hover: #4338CA; --color-accent: #6366F1; --color-primary-soft: #EAE9FE; --color-focus-ring: #4F46E555; } :root[data-accent="violet"] { --color-primary: #7C3AED; --color-primary-hover: #6D28D9; --color-accent: #8B5CF6; --color-primary-soft: #F0EAFE; --color-focus-ring: #7C3AED55; } :root[data-accent="amber"] { --color-primary: #B45309; --color-primary-hover: #92400E; --color-accent: #D97706; --color-primary-soft: #FCEFD8; --color-focus-ring: #B4530955; } :root[data-accent="rose"] { --color-primary: #BE185D; --color-primary-hover: #9D174D; --color-accent: #E11D48; --color-primary-soft: #FCE7EF; --color-focus-ring: #BE185D55; } :root[data-accent="emerald"] { --color-primary: #047857; --color-primary-hover: #065F46; --color-accent: #059669; --color-primary-soft: #DDF3E7; --color-focus-ring: #04785755; } /* Dark: hover is 15% toward white; soft is the primary at 16% over the surface. */ [data-theme="dark"][data-accent="teal"] { --color-primary: #5AAFC6; --color-primary-hover: #73BBCF; --color-accent: #73BBCF; --color-primary-soft: #1F2D32; --color-focus-ring: #5AAFC655; } [data-theme="dark"][data-accent="indigo"] { --color-primary: #8B93F0; --color-primary-hover: #9CA3F2; --color-accent: #9CA3F2; --color-primary-soft: #272839; --color-focus-ring: #8B93F055; } [data-theme="dark"][data-accent="violet"] { --color-primary: #A88BF0; --color-primary-hover: #B59CF2; --color-accent: #B59CF2; --color-primary-soft: #2C2739; --color-focus-ring: #A88BF055; } [data-theme="dark"][data-accent="amber"] { --color-primary: #E3A64E; --color-primary-hover: #E7B369; --color-accent: #E7B369; --color-primary-soft: #352B1F; --color-focus-ring: #E3A64E55; } [data-theme="dark"][data-accent="rose"] { --color-primary: #EB7A8E; --color-primary-hover: #EE8E9F; --color-accent: #EE8E9F; --color-primary-soft: #362429; --color-focus-ring: #EB7A8E55; } [data-theme="dark"][data-accent="emerald"] { --color-primary: #4DC194; --color-primary-hover: #68CAA4; --color-accent: #68CAA4; --color-primary-soft: #1D302A; --color-focus-ring: #4DC19455; } /* Reduced motion killswitch (§2.4) */ @media (prefers-reduced-motion: reduce) { :root { --dur-xs: 0ms; --dur-sm: 0ms; --dur-md: 0ms; --dur-lg: 0ms; --dur-xl: 0ms; } *, *::before, *::after { animation: none !important; transition: none !important; } } :root[data-motion="reduced"] { --dur-xs: 0ms; --dur-sm: 0ms; --dur-md: 0ms; --dur-lg: 0ms; --dur-xl: 0ms; } :root[data-motion="reduced"] *, :root[data-motion="reduced"] *::before, :root[data-motion="reduced"] *::after { animation: none !important; transition: none !important; } /* "Soft" light style: a grey page so white cards stand off it, and borders strong enough to see. Light theme only; dark is unchanged. */ html[data-surface="soft"]:not([data-theme="dark"]) { --color-bg: #EDF0F4; --color-surface-alt: #E8ECF1; --color-border: #D3D9E0; --color-border-strong: #B4BDC7; } html[data-surface="soft"]:not([data-theme="dark"]) .card, html[data-surface="soft"]:not([data-theme="dark"]) .widget { box-shadow: 0 1px 2px rgba(16, 24, 40, .05); }