/* * PFX Design Tokens * wwwroot/css/pfx-tokens.css * * Single source of truth for all design values. * Dark mode via [data-theme="dark"] on . * Never reference raw colour values outside this file — always use var(--pfx-*). */ /* ============================================================ LIGHT THEME (default) ============================================================ */ :root { /* --- Brand colours --- */ --pfx-forest-dark: #2d5038; --pfx-forest-mid: #3a6b4a; --pfx-forest-light: #4d8a60; --pfx-forest-subtle: #e8f0e9; /* --- Neutrals --- */ --pfx-cream: #f0ece0; --pfx-cream-dark: #dedad2; --pfx-cream-darker: #ccc8bc; --pfx-off-white: #f5f3ee; --pfx-off-white-alt: #fafaf8; --pfx-near-black: #1a1f1a; --pfx-charcoal: #2e3330; --pfx-mid-grey: #6b7270; --pfx-light-grey: #b8bdb9; --pfx-border: #d4d0c8; /* --- Semantic surface colours --- */ --pfx-bg-page: var(--pfx-cream); --pfx-bg-surface: var(--pfx-off-white); --pfx-bg-surface-alt: var(--pfx-off-white-alt); --pfx-bg-raised: #ffffff; --pfx-bg-sunken: var(--pfx-cream-dark); --pfx-bg-sidebar: var(--pfx-forest-dark); --pfx-bg-topbar: var(--pfx-forest-dark); --pfx-bg-topbar-sub: var(--pfx-forest-mid); /* --- Text colours --- */ --pfx-text-primary: var(--pfx-near-black); --pfx-text-secondary: var(--pfx-mid-grey); --pfx-text-muted: var(--pfx-light-grey); --pfx-text-inverse: var(--pfx-off-white); --pfx-text-on-brand: #f0ece0; --pfx-text-link: var(--pfx-forest-mid); --pfx-text-link-hover: var(--pfx-forest-dark); /* --- Accent colours --- */ --pfx-gold: #bf9a5a; --pfx-gold-light: #d4b278; --pfx-blue: #1a4a7a; --pfx-blue-light: #5a9abf; /* --- State colours --- */ --pfx-success: #2d7a45; --pfx-success-bg: #e8f5e2; --pfx-warning: #a07020; --pfx-warning-bg: #fdf0d0; --pfx-danger: #c44040; --pfx-danger-bg: #fdf0f0; --pfx-info: #1a5a8a; --pfx-info-bg: #e0eef8; /* --- Borders --- */ --pfx-border-colour: var(--pfx-border); --pfx-border-radius-sm: 4px; --pfx-border-radius: 6px; --pfx-border-radius-lg: 10px; --pfx-border-radius-xl: 16px; /* --- Shadows --- */ --pfx-shadow-sm: 0 1px 3px rgba(26, 31, 26, 0.08); --pfx-shadow: 0 2px 8px rgba(26, 31, 26, 0.10); --pfx-shadow-lg: 0 4px 20px rgba(26, 31, 26, 0.14); --pfx-shadow-sidebar: 2px 0 12px rgba(0, 0, 0, 0.18); /* --- Typography --- */ --pfx-font-sans: 'Inter', 'Helvetica Neue', Arial, sans-serif; --pfx-font-display: 'DM Serif Display', Georgia, serif; --pfx-font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace; --pfx-text-xs: 0.70rem; --pfx-text-sm: 0.825rem; --pfx-text-base: 0.9375rem; --pfx-text-md: 1.0625rem; --pfx-text-lg: 1.25rem; --pfx-text-xl: 1.5rem; --pfx-text-2xl: 2rem; --pfx-text-3xl: 2.5rem; --pfx-line-height: 1.6; --pfx-line-height-tight: 1.3; /* --- Spacing scale --- */ --pfx-space-1: 0.25rem; --pfx-space-2: 0.5rem; --pfx-space-3: 0.75rem; --pfx-space-4: 1rem; --pfx-space-5: 1.5rem; --pfx-space-6: 2rem; --pfx-space-7: 3rem; --pfx-space-8: 4rem; /* --- Layout --- */ --pfx-sidebar-width: 64px; --pfx-sidebar-width-expanded: 240px; --pfx-topbar-height: 56px; --pfx-content-max-width: 1400px; /* --- Transitions --- */ --pfx-transition-fast: 150ms ease; --pfx-transition: 250ms ease; --pfx-transition-slow: 400ms ease; /* --- Z-index scale --- */ --pfx-z-dropdown: 1000; --pfx-z-sticky: 1020; --pfx-z-sidebar: 1030; --pfx-z-modal-backdrop: 1040; --pfx-z-modal: 1050; --pfx-z-toast: 1080; --pfx-z-tooltip: 1090; /* --- Bootstrap 5 overrides via CSS variables --- */ --bs-primary: var(--pfx-forest-dark); --bs-primary-rgb: 45, 80, 56; --bs-secondary: var(--pfx-mid-grey); --bs-secondary-rgb: 107, 114, 112; --bs-success: var(--pfx-success); --bs-success-rgb: 45, 122, 69; --bs-danger: var(--pfx-danger); --bs-danger-rgb: 196, 64, 64; --bs-warning: var(--pfx-warning); --bs-warning-rgb: 160, 112, 32; --bs-info: var(--pfx-info); --bs-info-rgb: 26, 90, 138; --bs-body-font-family: var(--pfx-font-sans); --bs-body-color: var(--pfx-text-primary); --bs-body-bg: var(--pfx-bg-page); --bs-border-color: var(--pfx-border-colour); --bs-border-radius: var(--pfx-border-radius); --bs-border-radius-sm: var(--pfx-border-radius-sm); --bs-border-radius-lg: var(--pfx-border-radius-lg); --bs-link-color: var(--pfx-text-link); --bs-link-hover-color: var(--pfx-text-link-hover); } /* ============================================================ DARK THEME Applied via: ============================================================ */ [data-theme="dark"] { /* --- Brand colours remain the same --- */ --pfx-forest-subtle: #1a2e1e; /* --- Neutrals --- */ --pfx-cream: #0e130d; --pfx-cream-dark: #141a13; --pfx-cream-darker: #1a2318; --pfx-off-white: #1a2a1e; --pfx-off-white-alt: #1e2e22; --pfx-near-black: #e8e4da; --pfx-charcoal: #c8c4bc; --pfx-mid-grey: #8a9088; --pfx-light-grey: #4a5248; --pfx-border: #2a3828; /* --- Semantic surface colours --- */ --pfx-bg-page: #0f1a12; --pfx-bg-surface: #142018; --pfx-bg-surface-alt: #1a2a1e; --pfx-bg-raised: #1e3022; --pfx-bg-sunken: #0a1208; --pfx-bg-sidebar: #0a1208; --pfx-bg-topbar: #0e150c; --pfx-bg-topbar-sub: #142018; /* --- Text colours --- */ --pfx-text-primary: #e8e4da; --pfx-text-secondary: #9aa098; --pfx-text-muted: #5a6258; --pfx-text-inverse: var(--pfx-near-black); --pfx-text-on-brand: #e8e4da; --pfx-text-link: #6abf7a; --pfx-text-link-hover: #8abf5a; /* --- Accent colours --- */ --pfx-gold: #d4922a; --pfx-gold-light: #e8aa48; --pfx-blue: #5a9abf; --pfx-blue-light: #7ab8d8; /* --- State colours --- */ --pfx-success: #4a9a60; --pfx-success-bg: #0e2018; --pfx-warning: #c4902a; --pfx-warning-bg: #201808; --pfx-danger: #d45858; --pfx-danger-bg: #200808; --pfx-info: #4a8ab0; --pfx-info-bg: #081420; /* --- Shadows (more pronounced on dark) --- */ --pfx-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.30); --pfx-shadow: 0 2px 8px rgba(0, 0, 0, 0.40); --pfx-shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.50); --pfx-shadow-sidebar: 2px 0 12px rgba(0, 0, 0, 0.50); /* --- Bootstrap 5 dark overrides --- */ --bs-body-color: var(--pfx-text-primary); --bs-body-bg: var(--pfx-bg-page); --bs-border-color: var(--pfx-border); --bs-link-color: var(--pfx-text-link); --bs-link-hover-color: var(--pfx-text-link-hover); --bs-secondary-bg: var(--pfx-bg-surface); --bs-tertiary-bg: var(--pfx-bg-surface-alt); } /* ============================================================ UTILITY CLASSES — token-based shortcuts Keep minimal; use BS5 utilities where possible. ============================================================ */ /* Backgrounds */ .bg-pfx-page { background-color: var(--pfx-bg-page) !important; } .bg-pfx-surface { background-color: var(--pfx-bg-surface) !important; } .bg-pfx-raised { background-color: var(--pfx-bg-raised) !important; } .bg-pfx-brand { background-color: var(--pfx-forest-dark) !important; } .bg-pfx-brand-mid { background-color: var(--pfx-forest-mid) !important; } .bg-pfx-cream { background-color: var(--pfx-cream) !important; } /* Text */ .text-pfx-primary { color: var(--pfx-text-primary) !important; } .text-pfx-secondary { color: var(--pfx-text-secondary) !important; } .text-pfx-muted { color: var(--pfx-text-muted) !important; } .text-pfx-on-brand { color: var(--pfx-text-on-brand) !important; } .text-pfx-gold { color: var(--pfx-gold) !important; } /* Borders */ .border-pfx { border-color: var(--pfx-border-colour) !important; } .border-pfx-brand { border-color: var(--pfx-forest-dark) !important; } /* Typography */ .font-display { font-family: var(--pfx-font-display) !important; } .font-mono { font-family: var(--pfx-font-mono) !important; }