/* * SESAM design tokens. * * Brand variables and Bootstrap variable overrides only. Loaded first so that * Bootstrap and all later SESAM stylesheets see the correct values. * * All custom properties added by SESAM use the `--sesam-*` prefix. Bootstrap * customization happens by re-binding the appropriate `--bs-*` variable. * * RGB-triplet tokens * ------------------ * When a token has to be consumed with an alpha channel, also expose its * value as an `--…-rgb` triplet (three comma-separated integers) and use * `rgba(var(--…-rgb), )`. The triplet must be re-bound inside the * `[data-bs-theme="dark"]` block alongside its base token so the alpha * variant stays in sync with the theme. */ :root { /* *************************************************** * BRAND COLORS * *************************************************** */ --sesam-blue: #235B8C; --sesam-blue-rgb: 35, 91, 140; --sesam-light-blue: #E2EFFE; --sesam-dark-blue: #13324E; --sesam-green: #858C1E; --sesam-green-hover: #A7AF39; --sesam-red: #E74A3B; /* Stronger red used for destructive copy ("Delete account", warning labels) where --sesam-red is not bold enough against light backgrounds. */ --sesam-red-strong: #C51104; --sesam-yellow: #DBAB0A; /* Secondary marketing/feature blues used by the landing pages. */ --sesam-marketing-blue: #10598F; --sesam-marketing-blue-bright: #368DD9; /* Muted teal used by .text-primary and the analytics border-start. */ --sesam-teal-muted: #567F83; /* Premium-plan accent (dashboard upgrade banner). */ --sesam-premium: #5A2CA0; /* Accent colors for `.sesam-border-start-*` highlight strips. */ --sesam-accent-purple: #8D74A5; --sesam-accent-green: #568360; /* *************************************************** * NEUTRAL GRAY SCALE * Single source for the muted grays that recur across separators, * placeholders, borders, and body text. Re-mapped in dark mode further * down so consumers do not need to special-case the theme. * *************************************************** */ --sesam-gray-300: #DDDFEB; /* hr-thin, soft separators */ --sesam-gray-400: #D1D3E2; /* placeholders, light borders */ --sesam-gray-500: #B7B9CC; /* disabled */ --sesam-gray-600: #858796; /* body text */ --sesam-gray-600-rgb: 133, 135, 150; --sesam-gray-700: #6E707E; /* form focus color */ /* Muted gray used by marketing copy and the "soft" link variant. */ --sesam-muted-soft: #707070; /* *************************************************** * SEMANTIC COLORS * Re-themed via [data-bs-theme="dark"] below. Use these instead of the * raw brand colors when the value should flip in dark mode. * *************************************************** */ --sesam-heading-color: #13324E; /* *************************************************** * SHADOWS * *************************************************** */ --sesam-shadow-soft: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15); --sesam-shadow-strong: 0 1rem 3rem rgba(0, 0, 0, 0.175); /* *************************************************** * SURFACE / CHROME * *************************************************** */ --sesam-card-bg: #FFFFFF; --sesam-card-border: #E3E6F0; --sesam-card-header-bg: #F8F9FC; --sesam-modal-bg: #FFFFFF; --sesam-top-navbar-bg: #FFFFFF; --sesam-dropdown-bg: #FFFFFF; /* Dropdown item color tracks the heading color so it flips with the theme without needing its own dark-mode override. */ --sesam-dropdown-item: var(--sesam-heading-color); --sesam-terminal-bg: #202529; --sesam-terminal-fg: #D0D7DE; --sesam-content-bg: #FEFEFE; --sesam-table-striped-bg: #F9F9F9; /* Muted lavender-gray surface used for muted modal headers and hover backgrounds in marketing dropdowns. */ --sesam-surface-muted: #EAECF4; --sesam-surface-muted-rgb: 234, 236, 244; /* *************************************************** * DESTRUCTIVE / DANGER * Used by .sesam-danger-box (delete-account warning panel etc.). * *************************************************** */ --sesam-danger-bg: #FADBD8; --sesam-danger-border: #F8CCC8; /* *************************************************** * FOCUS RING * SB-Admin lavender glow used by `.form-control:focus` and friends. * Exposed as RGB triplet for `rgba(…, )` consumers. * *************************************************** */ --sesam-focus-ring-rgb: 78, 115, 223; /* *************************************************** * APP SHELL GEOMETRY * *************************************************** */ --sesam-sidebar-width: 67px; --sesam-navbar-height: 50px; /* *************************************************** * BOOTSTRAP OVERRIDES * Re-bind Bootstrap's own --bs-* tokens instead of overriding rules * with !important. * *************************************************** */ --bs-primary: var(--sesam-blue); /* Map Bootstrap's "success" theme color to the SESAM olive so utility classes like .bg-success / .text-success / .btn-success / striped progress bars match the brand. The -rgb form is the one .bg-success actually reads (background-color: RGBA(var(--bs-success-rgb), ...)). */ --bs-success: var(--sesam-green); --bs-success-rgb: 133, 140, 30; /* SESAM uses a muted mid-gray as the base body text color so every Bootstrap component that inherits from --bs-body-color picks up the SESAM look (cards, list-groups, ...). */ --bs-body-color: var(--sesam-gray-600); /* `.text-muted` and other Bootstrap components consume --bs-secondary-color (which defaults to rgba(emphasis, .75) -- a dark slate). Re-bind it to the same muted SESAM gray as the body color so muted text on cards / list groups stays consistent with the rest of the UI. */ --bs-secondary-color: var(--sesam-gray-600); --bs-secondary-color-rgb: var(--sesam-gray-600-rgb); /* Striped table rows share the SESAM table-striped surface. */ --bs-table-striped-bg: var(--sesam-table-striped-bg); } [data-bs-theme="dark"] { /* Note: `--sesam-dark-blue` is intentionally not flipped — the marketing footer keeps the deep navy in both themes. */ --sesam-content-bg: #212529; --sesam-heading-color: #FFFFFF; --sesam-card-bg: #212529; --sesam-card-border: #30363D; --sesam-card-header-bg: #161B22; --sesam-modal-bg: #212529; --sesam-top-navbar-bg: #35363A; --sesam-dropdown-bg: #212529; --sesam-dropdown-item: #DEE2E6; --sesam-blue: #294A71; --sesam-blue-rgb: 41, 74, 113; --sesam-table-striped-bg: #35363A; --sesam-terminal-bg: #000000; --sesam-surface-muted: #161B22; --sesam-surface-muted-rgb: 22, 27, 34; /* Dark-mode gray scale: invert the brightness so separators, borders and placeholders remain visible against the dark canvas. */ --sesam-gray-300: #30363D; --sesam-gray-400: #495057; --sesam-gray-500: #6C757D; --sesam-gray-600: #ADB5BD; --sesam-gray-600-rgb: 173, 181, 189; --sesam-gray-700: #DEE2E6; }