/* Helpdesk design tokens — user theme/accent applied via data-* on */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); :root { --hd-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Spacing scale */ --hd-space-1: 0.25rem; --hd-space-2: 0.5rem; --hd-space-3: 0.75rem; --hd-space-4: 1rem; --hd-space-5: 1.25rem; --hd-space-6: 1.5rem; --hd-space-8: 2rem; --hd-space-10: 2.5rem; --hd-radius-sm: 0.375rem; --hd-radius-md: 0.5rem; --hd-radius-lg: 0.75rem; --hd-radius-xl: 1rem; --hd-shadow-sm: 0 1px 2px rgb(15 23 42 / 0.06); --hd-shadow-md: 0 4px 12px rgb(15 23 42 / 0.08); --hd-sidebar-width: 15.5rem; --hd-sidebar-collapsed-width: 4.25rem; --hd-topbar-height: 3.5rem; /* Semantic colors — light default (DSL corporate blue) */ --hd-primary: #1a5daa; --hd-primary-hover: #164f92; --hd-primary-rgb: 26, 93, 170; --hd-primary-soft: #eef4fb; --hd-primary-gradient: linear-gradient(135deg, #1a5daa 0%, #1f4e79 52%, #164f92 100%); --hd-sidebar-gradient: linear-gradient(180deg, #1f4e79 0%, #163a5c 100%); --hd-bg: #f4f6f9; --hd-surface: #ffffff; --hd-surface-elevated: #ffffff; --hd-border: #e2e8f0; --hd-border-subtle: #f1f5f9; --hd-text: #0f172a; --hd-text-secondary: #64748b; --hd-text-muted: #94a3b8; --hd-success: #059669; --hd-success-soft: #ecfdf5; --hd-warning: #d97706; --hd-warning-soft: #fffbeb; --hd-danger: #dc2626; --hd-danger-soft: #fef2f2; --hd-info: #0284c7; --hd-info-soft: #f0f9ff; --hd-sidebar-bg: #0f172a; --hd-sidebar-text: #e2e8f0; --hd-sidebar-muted: #94a3b8; --hd-sidebar-active: rgb(255 255 255 / 0.12); /* Tabler bridge */ --tblr-primary: var(--hd-primary); --tblr-primary-rgb: var(--hd-primary-rgb); } /* Accent presets — DSL corporate palette */ [data-accent="dsl-gradient"] { --hd-primary: #1a5daa; --hd-primary-hover: #164f92; --hd-primary-rgb: 26, 93, 170; --hd-primary-soft: #eef4fb; --hd-primary-gradient: linear-gradient(135deg, #1a5daa 0%, #1f4e79 52%, #164f92 100%); --hd-sidebar-gradient: linear-gradient(180deg, #1f4e79 0%, #163a5c 100%); } [data-accent="dsl-blue"] { --hd-primary: #1a5daa; --hd-primary-hover: #164f92; --hd-primary-rgb: 26, 93, 170; --hd-primary-soft: #eef4fb; --hd-primary-gradient: #1a5daa; --hd-sidebar-gradient: var(--hd-sidebar-bg); } [data-accent="dsl-red"] { --hd-primary: #e1251b; --hd-primary-hover: #c41f17; --hd-primary-rgb: 225, 37, 27; --hd-primary-soft: #fef2f2; --hd-primary-gradient: linear-gradient(135deg, #e1251b 0%, #c41f17 100%); --hd-sidebar-gradient: linear-gradient(180deg, #9b1c14 0%, #7a1610 100%); } [data-accent="dsl-orange"] { --hd-primary: #f18a21; --hd-primary-hover: #d97706; --hd-primary-rgb: 241, 138, 33; --hd-primary-soft: #fff7ed; --hd-primary-gradient: linear-gradient(135deg, #f18a21 0%, #d97706 100%); --hd-sidebar-gradient: linear-gradient(180deg, #b45309 0%, #92400e 100%); } [data-accent="dsl-terracotta"] { --hd-primary: #af3e2d; --hd-primary-hover: #933427; --hd-primary-rgb: 175, 62, 45; --hd-primary-soft: #fef2f0; --hd-primary-gradient: linear-gradient(135deg, #af3e2d 0%, #933427 100%); --hd-sidebar-gradient: linear-gradient(180deg, #7f2d21 0%, #632318 100%); } [data-accent="dsl-bronze"] { --hd-primary: #8b6638; --hd-primary-hover: #73542e; --hd-primary-rgb: 139, 102, 56; --hd-primary-soft: #f8f4ef; --hd-primary-gradient: linear-gradient(135deg, #8b6638 0%, #73542e 100%); --hd-sidebar-gradient: linear-gradient(180deg, #5c4526 0%, #4a3720 100%); } [data-accent="dsl-navy"] { --hd-primary: #1f4e79; --hd-primary-hover: #163a5c; --hd-primary-rgb: 31, 78, 121; --hd-primary-soft: #eef4f9; --hd-primary-gradient: linear-gradient(135deg, #1f4e79 0%, #163a5c 100%); --hd-sidebar-gradient: linear-gradient(180deg, #163a5c 0%, #0f2840 100%); } [data-theme="dark"] { --hd-bg: #0b1220; --hd-surface: #111827; --hd-surface-elevated: #1f2937; --hd-border: #334155; --hd-border-subtle: #1e293b; --hd-text: #f8fafc; --hd-text-secondary: #94a3b8; --hd-text-muted: #64748b; --hd-primary-soft: rgb(var(--hd-primary-rgb) / 0.15); --hd-success-soft: rgb(5 150 105 / 0.15); --hd-warning-soft: rgb(217 119 6 / 0.15); --hd-danger-soft: rgb(220 38 38 / 0.15); --hd-info-soft: rgb(2 132 199 / 0.15); --hd-sidebar-bg: #020617; --hd-sidebar-text: #e2e8f0; --hd-sidebar-muted: #64748b; --hd-sidebar-active: rgb(255 255 255 / 0.08); color-scheme: dark; } [data-density="compact"] { --hd-space-4: 0.75rem; --hd-space-6: 1.125rem; font-size: 0.9375rem; } body { font-family: var(--hd-font); background: var(--hd-bg); color: var(--hd-text); } .card { border-color: var(--hd-border); box-shadow: var(--hd-shadow-sm); background: var(--hd-surface); } [data-theme="dark"] .card, [data-theme="dark"] .dropdown-menu, [data-theme="dark"] .form-control, [data-theme="dark"] .form-select { background: var(--hd-surface); border-color: var(--hd-border); color: var(--hd-text); } [data-theme="dark"] .text-secondary { color: var(--hd-text-secondary) !important; } [data-theme="dark"] .table { --tblr-table-color: var(--hd-text); --tblr-table-bg: var(--hd-surface); --tblr-table-border-color: var(--hd-border); } .page-body { background: var(--hd-bg); }