/* ═══════════════════════════════════════════════════════════ AqualekFSM Design Tokens All CSS custom properties for the app. Use --aq-* prefix. Theme switching via data-theme attribute on . ═══════════════════════════════════════════════════════════ */ /* ═══ Brand Primitives (theme-independent) ═══ */ :root { --aq-color-brand-navy: rgb(5, 39, 103); --aq-color-brand-purple: #3a0647; --aq-color-brand-blue: #1b6ec2; --aq-color-brand-blue-dark: #1861ac; --aq-color-brand-blue-link: #006bb7; --aq-color-brand-blue-focus: #258cfb; /* ═══ Gradients ═══ */ --aq-gradient-brand: linear-gradient(180deg, var(--aq-color-brand-navy) 0%, var(--aq-color-brand-purple) 70%); --aq-gradient-brand-diagonal: linear-gradient(135deg, var(--aq-color-brand-navy) 0%, var(--aq-color-brand-purple) 100%); /* ═══ Sidebar / Navigation (on gradient — theme-independent) ═══ */ --aq-color-nav-text: #d7d7d7; --aq-color-nav-text-active: #fff; --aq-color-nav-active-bg: rgba(255, 255, 255, 0.37); --aq-color-nav-hover-bg: rgba(255, 255, 255, 0.1); --aq-color-nav-toprow-bg: rgba(0, 0, 0, 0.4); --aq-color-nav-toggler-border: rgba(255, 255, 255, 0.1); --aq-color-nav-toggler-bg: rgba(255, 255, 255, 0.1); --aq-color-nav-toggler-checked: rgba(255, 255, 255, 0.5); /* ═══ Typography ═══ */ --aq-font-family-base: 'Helvetica Neue', Helvetica, Arial, sans-serif; --aq-font-size-nav: 0.9rem; --aq-font-size-navbar-brand: 1.1rem; --aq-font-size-divider: 0.875rem; /* ═══ Sizing ═══ */ --aq-size-sidebar-width: 250px; --aq-size-topbar-height: 3.5rem; --aq-size-nav-link-height: 3rem; --aq-size-login-max-width: 440px; /* ═══ Border Radius ═══ */ --aq-radius-card: 12px; --aq-radius-panel: 8px; --aq-radius-nav-link: 4px; /* ═══ Status Colors (theme-independent) ═══ */ --aq-color-success: #26b050; --aq-color-error: #e50000; --aq-color-error-bg: #b32121; } /* ═══════════════════════════════════════════════════════════ Light Theme (default) ═══════════════════════════════════════════════════════════ */ :root, [data-theme="light"] { /* Semantic Colors */ --aq-color-primary: var(--aq-color-brand-blue); --aq-color-primary-hover: var(--aq-color-brand-blue-dark); --aq-color-link: var(--aq-color-brand-blue-link); --aq-color-focus-ring: var(--aq-color-brand-blue-focus); --aq-color-heading: var(--aq-color-brand-navy); --aq-color-heading-secondary: #333; --aq-color-muted: #6c757d; --aq-color-body-bg: #ffffff; --aq-color-body-text: #212529; /* Surfaces */ --aq-color-surface: #ffffff; --aq-color-surface-secondary: #f8f9fa; --aq-color-surface-code: #f0f3f8; --aq-color-surface-topbar: #f7f7f7; --aq-color-surface-error-ui: lightyellow; /* Borders */ --aq-color-border: #e9ecef; --aq-color-border-topbar: #d6d5d5; --aq-color-border-divider: #dee2e6; --aq-color-border-checkbox: #929292; /* Shadows */ --aq-shadow-card: 0 4px 24px rgba(0, 0, 0, 0.15); --aq-shadow-focus: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--aq-color-focus-ring); --aq-shadow-error-ui: 0 -1px 2px rgba(0, 0, 0, 0.2); /* Bootstrap Overrides */ --bs-primary: var(--aq-color-primary); --bs-body-font-family: var(--aq-font-family-base); --bs-body-color: var(--aq-color-body-text); --bs-body-bg: var(--aq-color-body-bg); --bs-link-color: var(--aq-color-link); } /* ═══════════════════════════════════════════════════════════ Dark Theme ═══════════════════════════════════════════════════════════ */ [data-theme="dark"] { /* Semantic Colors */ --aq-color-primary: #4da3ff; --aq-color-primary-hover: #2a7fd4; --aq-color-link: #4da3ff; --aq-color-focus-ring: #4da3ff; --aq-color-heading: #e1e5ea; --aq-color-heading-secondary: #b0b8c4; --aq-color-muted: #8892a0; --aq-color-body-bg: #0f1419; --aq-color-body-text: #e1e5ea; /* Surfaces */ --aq-color-surface: #1a1f2e; --aq-color-surface-secondary: #141922; --aq-color-surface-code: #1e2433; --aq-color-surface-topbar: #1a1f2e; --aq-color-surface-error-ui: #3a2a00; /* Borders */ --aq-color-border: #2a3040; --aq-color-border-topbar: #2a3040; --aq-color-border-divider: #2a3040; --aq-color-border-checkbox: #5a6070; /* Shadows */ --aq-shadow-card: 0 4px 24px rgba(0, 0, 0, 0.4); --aq-shadow-focus: 0 0 0 0.1rem rgba(30, 40, 60, 0.8), 0 0 0 0.25rem var(--aq-color-focus-ring); --aq-shadow-error-ui: 0 -1px 2px rgba(0, 0, 0, 0.4); /* Bootstrap Overrides */ --bs-primary: var(--aq-color-primary); --bs-body-font-family: var(--aq-font-family-base); --bs-body-color: var(--aq-color-body-text); --bs-body-bg: var(--aq-color-body-bg); --bs-link-color: var(--aq-color-link); --bs-table-bg: var(--aq-color-surface); --bs-table-striped-bg: var(--aq-color-surface-secondary); --bs-card-bg: var(--aq-color-surface); --bs-border-color: var(--aq-color-border); } /* ═══════════════════════════════════════════════════════════ Accessibility ═══════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* Smooth theme transition (subtle, not jarring) */ body { transition: background-color 0.2s ease, color 0.2s ease; }