/* ============================================================================= Rubicon Design Tokens ----------------------------------------------------------------------------- Single source of truth for shared CSS primitives across every page under RubiconUI/. Page-specific stylesheets must this file in BEFORE their own CSS, then use var(--token-name) instead of hardcoded values for colours, spacing, font-size, and component sizing. Numerical values are extracted verbatim from the canonical "tight, corporate line-of-business" rules in docs/dev/ui-styling-overhaul-guide.md. See docs/dev/archived/ui-style-standardisation-plan.md for the rollout plan that migrates page CSS off duplicated :root blocks and onto these tokens. ============================================================================= */ :root { /* --------------------------------------------------------------------- Colours - Professional Blue Theme Extracted from the (previously duplicated) :root block in 20 page CSS files. Values are byte-identical to the existing palette so swapping in var(--token) references later produces no visual change. --------------------------------------------------------------------- */ --primary-dark: #1e3a5f; --primary-medium: #2c5282; --primary-light: #3182ce; --accent-blue: #4299e1; --dark-background: #2c3e50; --light-background: #f7fafc; --success-green: #38a169; --warning-yellow: #d69e2e; --warning-orange: #ed8936; --danger-red: #e53e3e; --admin-accent: #c53030; /* --------------------------------------------------------------------- Spacing scale Aligned with the values used throughout the Overhaul Guide. --------------------------------------------------------------------- */ --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 0.75rem; --space-lg: 1rem; --space-xl: 1.5rem; --space-2xl: 2rem; /* --------------------------------------------------------------------- Typography scale --fs-base (0.875rem) is the canonical .table font-size. --------------------------------------------------------------------- */ --fs-xs: 0.7rem; --fs-sm: 0.75rem; --fs-base: 0.875rem; --fs-md: 1rem; --fs-lg: 1.25rem; /* --------------------------------------------------------------------- Buttons --btn-table-* matches the in-table .layers-table .btn-sm pattern in tools/standard_axle/standard_axle.css - tighter than the generic .btn-sm spec, intended for action-column buttons in data tables. --------------------------------------------------------------------- */ --btn-padding: 0.5rem 1rem; --btn-sm-padding: 0.375rem 0.75rem; --btn-sm-font-size: 0.875rem; --btn-table-padding: 0.2rem 0.6rem; --btn-table-font-size: 0.75rem; /* --------------------------------------------------------------------- Form controls --------------------------------------------------------------------- */ --form-control-padding: 0.5rem 0.75rem; --form-control-sm-padding: 0.2rem 0.4rem; --form-label-sm-font-size: 0.8rem; /* --------------------------------------------------------------------- Tables - generic baseline --------------------------------------------------------------------- */ --table-cell-padding: 0.4rem; --table-cell-padding-x: 0.4rem; --table-thead-padding: 0.5rem 0.4rem; --table-font-size: 0.875rem; /* --------------------------------------------------------------------- Tables - dense data grids (.layers-table) For input-heavy or many-column tables. --------------------------------------------------------------------- */ --layers-table-font-size: 0.75rem; --layers-table-thead-padding: 0.4rem 0.3rem; --layers-table-tbody-padding: 0.25rem 0.2rem; /* --------------------------------------------------------------------- Cards --------------------------------------------------------------------- */ --card-header-padding: 0.75rem 1rem; --card-body-padding: 1.5rem; /* --------------------------------------------------------------------- Modals --------------------------------------------------------------------- */ --modal-header-padding: 1rem 1.5rem; --modal-footer-padding: 0.75rem 1.5rem; /* --------------------------------------------------------------------- Alerts --------------------------------------------------------------------- */ --alert-padding: 0.5rem 0.75rem; --alert-font-size: 0.875rem; /* --------------------------------------------------------------------- Toasts Applied in common/notifications.css (Session 2 of the rollout plan). --------------------------------------------------------------------- */ --toast-min-width: 250px; --toast-padding: 0.5rem 0.75rem; --toast-font-size: 0.8rem; /* --------------------------------------------------------------------- Empty states / placeholders --------------------------------------------------------------------- */ --empty-state-padding: 2rem 1rem; --empty-state-icon-size: 2.5rem; /* --------------------------------------------------------------------- Body / container --------------------------------------------------------------------- */ --container-bg: var(--light-background); }