/* * BNESIM Admin — Design Tokens * * Semantic design tokens for the admin portal. Consumed by custom.css, page * stylesheets, and dynamic view styles. Two themes are defined: * :root / [data-theme="light"] — default, matches current BNESIM look * [data-theme="dark"] — dark mode, orange-accented * * The active theme is selected by a `data-theme` attribute on , which is * set by the blocking theme-init script in head.html before first paint. * * Do not hardcode brand colors in new CSS or JS — reference these vars. */ :root, [data-theme="light"] { /* Surfaces */ --bg-base: #F5F6FA; --bg-surface: #FFFFFF; --bg-elevated: #FFFFFF; --bg-subtle: #F8FAFC; --bg-inverse: #212121; /* Text */ --text-primary: #212121; --text-secondary: #54667A; --text-tertiary: #8090A0; --text-inverse: #FFFFFF; --text-on-accent: #212121; --text-link: #25A5B1; /* Borders */ --border-subtle: #E4E7EB; --border-default: #D1D5DB; --border-strong: #9CA3AF; /* Brand — orange primary, teal secondary (unchanged BNESIM palette) */ --accent: #FFAC42; --accent-hover: #FF9A1E; --accent-active: #E88A0E; --accent-muted: rgba(255, 172, 66, 0.12); --accent-ring: rgba(255, 172, 66, 0.35); --accent-secondary: #25A5B1; --accent-secondary-hover: #1E8A94; --accent-secondary-muted: rgba(37, 165, 177, 0.12); /* Bolt-coral brand accent — used by the rich-text editor (Tiptap) and the register-affiliate scoped palette. Kept separate from `--accent` so admin/editor themes can diverge. */ --accent-coral: #F97C50; /* Service-category brand palette — shared by the dashboard stat-cards, analytics chart category titles, customer-details service groupings. These are identity colors, not theme colors; they stay constant in both light and dark modes. */ --service-1: #5DC1CC; /* teal */ --service-2: #DF7158; /* coral variant */ --service-3: #EF994E; /* orange */ --service-4: #6ABEE9; /* sky */ --service-5: #EFB950; /* amber */ --service-6: #244C7E; /* navy */ --service-7: #9723E9; /* purple */ --service-8: #D5537C; /* pink */ --service-9: #0099A8; /* teal variant */ --service-halo: #676CD5; /* indigo */ /* Semantic status */ --success: #10B981; --success-muted: rgba(16, 185, 129, 0.12); --warning: #F59E0B; --warning-muted: rgba(245, 158, 11, 0.12); --danger: #E15554; --danger-muted: rgba(225, 85, 84, 0.12); --info: #2078DC; --info-muted: rgba(32, 120, 220, 0.12); /* Elevation */ --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06); --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08); --shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.12); --shadow-glow: 0 0 0 0 transparent; /* no glow in light mode */ /* Overlays (for blur/scrim on skeletons, modals, etc.) */ --bg-overlay: rgba(255, 255, 255, 0.6); /* Radius */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-pill: 9999px; /* Focus */ --focus-ring: 0 0 0 2px var(--accent-ring); --focus-outline: 2px solid var(--accent); --focus-offset: 2px; /* Motion */ --motion-fast: 150ms; --motion-base: 220ms; --motion-slow: 300ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); } [data-theme="dark"] { /* Surfaces — warm-leaning dark to complement orange accent */ --bg-base: #0F131A; --bg-surface: #161B25; --bg-elevated: #1C2230; --bg-subtle: #11161F; --bg-inverse: #F8FAFC; /* Text */ --text-primary: #F8FAFC; --text-secondary: #A6B2C2; --text-tertiary: #6E7D91; --text-inverse: #0F131A; --text-on-accent: #0F131A; --text-link: #FB6A81; /* Borders */ --border-subtle: rgba(148, 163, 184, 0.12); --border-default: rgba(148, 163, 184, 0.20); --border-strong: rgba(148, 163, 184, 0.38); /* Brand — dark mode uses a bold rose. Distinct from brand orange (which stays in light mode), reads sharply on dark, high energy. Brand teal stays as `--accent-secondary` for secondary emphasis. */ --accent: #F43F5E; --accent-hover: #FB6A81; --accent-active: #C9304A; --accent-muted: rgba(244, 63, 94, 0.18); --accent-ring: rgba(244, 63, 94, 0.42); --accent-secondary: #3DC0CC; --accent-secondary-hover: #5FD4DF; --accent-secondary-muted: rgba(61, 192, 204, 0.16); /* Semantic status */ --success: #34D399; --success-muted: rgba(52, 211, 153, 0.16); --warning: #FBBF24; --warning-muted: rgba(251, 191, 36, 0.16); --danger: #F87171; --danger-muted: rgba(248, 113, 113, 0.16); --info: #60A5FA; --info-muted: rgba(96, 165, 250, 0.16); /* Elevation — deeper shadows, subtle accent glow reserved for hover */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.55); --shadow-glow: 0 0 0 1px rgba(244, 63, 94, 0.22), 0 4px 20px rgba(244, 63, 94, 0.14); /* Overlays — slightly higher alpha so backdrop-blur still obscures content. */ --bg-overlay: rgba(15, 19, 26, 0.65); } @media (prefers-reduced-motion: reduce) { :root, [data-theme="light"], [data-theme="dark"] { --motion-fast: 0ms; --motion-base: 0ms; --motion-slow: 0ms; } } /* Expose current theme to color-sensitive native UI (scrollbars, form controls). */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } /* Root font-size anchor. Stock Tailwind ratios assume a 16px root, which is the browser default. !important is used because bootstrap.min.css hard-sets the html font-size to 10px as a Bootstrap admin-template customization, and we need our anchor to win even if another stylesheet is reordered to load after tokens.css. */ html { font-size: 16px !important; } /* Paint the canvas before anything else renders. Legacy style.css hardcodes `html { background: #fff }`, which produces a white flash in dark theme before the first white-box / card paints on top. Overriding here means the very first paint already uses the themed canvas — the blocking head script resolves `data-theme` before any CSS is applied, so the correct var is live by the time this rule matches. */ html, body { background-color: var(--bg-base); } /* Themed scrollbars. Firefox uses scrollbar-color/width; Chromium and Safari use the ::-webkit-scrollbar pseudo-elements. Colors are pulled from the token set so the bar flips with the light/dark theme. The thumb has a transparent border + background-clip: padding-box to read as "thinner than track" without actually needing a thinner scrollbar. */ * { scrollbar-width: thin; scrollbar-color: var(--accent) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background-color: var(--accent); border: 2px solid transparent; border-radius: 10px; background-clip: padding-box; transition: background-color var(--motion-fast) var(--ease-out); } ::-webkit-scrollbar-thumb:hover { background-color: var(--accent-hover); background-clip: padding-box; } ::-webkit-scrollbar-corner { background: transparent; } /* Theme-swap transition. `html.theme-transitioning` is set by js/theme.js for 300ms around each light/dark flip, so colors cross-fade instead of hard-cutting. The class is only present during the swap — normal hover and focus transitions keep their own (faster) durations untouched. Scoped to color-family properties only; do not animate layout-affecting ones here. `!important` is needed to win over component-level transitions on the same properties (e.g. buttons transition background-color at 150ms on hover — during a theme swap we want that same property to ride the 300ms curve instead). */ html.theme-transitioning, html.theme-transitioning *, html.theme-transitioning *::before, html.theme-transitioning *::after { transition: background-color var(--motion-base) var(--ease-in-out), color var(--motion-base) var(--ease-in-out), border-color var(--motion-base) var(--ease-in-out), fill var(--motion-base) var(--ease-in-out), stroke var(--motion-base) var(--ease-in-out), box-shadow var(--motion-base) var(--ease-in-out) !important; }