/*
* SoftProducts.UI — Design Tokens
*
* Canonical source of truth for the SoftProducts design system.
* Defines the brand tokens as `--sp-*` custom properties and maps them onto
* Bootstrap 5.3's `--bs-*` variables (light + dark via `data-bs-theme`), so
* standard Bootstrap components and the Sp* RCL components pick up the brand
* automatically.
*
* Reference from the consuming app's index.html (WASM) / App.razor (Server),
* AFTER Bootstrap's CSS and BEFORE your app.css:
*
*
* Palette/typography derived from the legacy PortalApp MudBlazor theme
* (PortalAppTheme.cs PaletteLight/PaletteDark). Edit values HERE only — never
* hardcode hex in app code; consume the tokens (or the mapped --bs-* vars).
*
* For faster font loading, also add to the host :
*
*
*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
:root,
[data-bs-theme="light"] {
/* Brand & accents */
--sp-primary: #1565C0;
--sp-primary-darken: #0D47A1;
--sp-primary-lighten: #42A5F5;
--sp-secondary: #00897B;
--sp-secondary-darken: #00695C;
--sp-secondary-lighten: #4DB6AC;
--sp-tertiary: #7B1FA2;
/* Neutrals & surfaces */
--sp-bg: #FFFFFF;
--sp-surface: #F5F5F5;
--sp-appbar-bg: #1565C0;
--sp-appbar-text: #FFFFFF;
--sp-drawer-bg: #FFFFFF;
--sp-drawer-text: #424242;
--sp-text-primary: #212121;
--sp-text-secondary: #757575;
--sp-action-default: #757575;
--sp-divider: #E0E0E0;
/* Semantic */
--sp-success: #388E3C;
--sp-warning: #FFA000;
--sp-error: #D32F2F;
--sp-info: #1976D2;
/* Shape & elevation */
--sp-radius: 8px;
--sp-radius-sm: 4px;
--sp-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
/* Typography */
--sp-font-family: 'Inter', 'Roboto', 'Helvetica', 'Arial', sans-serif;
/* Layout */
--sp-navbar-height: 56px;
--sp-sidebar-width: 250px;
--sp-sidebar-collapsed-width: 60px;
/* ----- Bootstrap mapping (light) ----- */
--bs-primary: var(--sp-primary);
--bs-secondary: var(--sp-secondary);
--bs-success: var(--sp-success);
--bs-warning: var(--sp-warning);
--bs-danger: var(--sp-error);
--bs-info: var(--sp-info);
--bs-body-bg: var(--sp-bg);
--bs-body-color: var(--sp-text-primary);
--bs-secondary-color: var(--sp-text-secondary);
--bs-border-color: var(--sp-divider);
--bs-border-radius: var(--sp-radius);
--bs-font-sans-serif: var(--sp-font-family);
/* RGB variants for Bootstrap's rgba() utilities (text-bg-*, bg-opacity, …) */
--bs-primary-rgb: 21, 101, 192;
--bs-secondary-rgb: 0, 137, 123;
--bs-success-rgb: 56, 142, 60;
--bs-warning-rgb: 255, 160, 0;
--bs-danger-rgb: 211, 47, 47;
--bs-info-rgb: 25, 118, 210;
}
[data-bs-theme="dark"] {
/* Brand & accents */
--sp-primary: #42A5F5;
--sp-primary-darken: #1E88E5;
--sp-primary-lighten: #90CAF9;
--sp-secondary: #4DB6AC;
--sp-secondary-darken: #00897B;
--sp-secondary-lighten: #80CBC4;
--sp-tertiary: #CE93D8;
/* Neutrals & surfaces */
--sp-bg: #121212;
--sp-surface: #1E1E1E;
--sp-appbar-bg: #1E1E1E;
--sp-appbar-text: #FFFFFF;
--sp-drawer-bg: #1E1E1E;
--sp-drawer-text: #E0E0E0;
--sp-text-primary: #E0E0E0;
--sp-text-secondary: #BDBDBD;
--sp-action-default: #BDBDBD;
--sp-divider: #424242;
/* Semantic */
--sp-success: #66BB6A;
--sp-warning: #FFB74D;
--sp-error: #EF5350;
--sp-info: #42A5F5;
/* Elevation (dark) */
--sp-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
/* ----- Bootstrap mapping (dark) ----- */
--bs-primary: var(--sp-primary);
--bs-secondary: var(--sp-secondary);
--bs-success: var(--sp-success);
--bs-warning: var(--sp-warning);
--bs-danger: var(--sp-error);
--bs-info: var(--sp-info);
--bs-body-bg: var(--sp-bg);
--bs-body-color: var(--sp-text-primary);
--bs-secondary-color: var(--sp-text-secondary);
--bs-border-color: var(--sp-divider);
--bs-primary-rgb: 66, 165, 245;
--bs-secondary-rgb: 77, 182, 172;
--bs-success-rgb: 102, 187, 106;
--bs-warning-rgb: 255, 183, 77;
--bs-danger-rgb: 239, 83, 80;
--bs-info-rgb: 66, 165, 245;
}
/* ===== Base typography ===== */
body {
font-family: var(--sp-font-family);
}
/* Heading scale — sizes match Bootstrap defaults; weights follow the
SoftProducts scale (light for large headings, heavier as they shrink). */
h1, .h1 { font-weight: 300; }
h2, .h2 { font-weight: 400; }
h3, .h3 { font-weight: 400; }
h4, .h4 { font-weight: 500; }
h5, .h5 { font-weight: 500; }
h6, .h6 { font-weight: 600; }