/* ═══════════════════════════════════════════════════════════ AqualekFSM Design Tokens Mapped from Brand Guidelines export (Feb 2026) All CSS custom properties for the app. Use --aq-* prefix. Theme switching via data-theme attribute on . Token naming: --aq-{category}-{element}-{modifier} The aq- prefix avoids collision with Bootstrap's --bs-* namespace. Stylesheet loading order (both hosts): bootstrap.min.css → tokens.css → app.css → scoped CSS bundle ═══════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════ Primitives & System (theme-independent) ═══════════════════════════════════════════════════════════ */ :root { /* ── Brand Primary ────────────────────────────────────── */ --aq-color-brand-primary: #E4017A; /* Magenta — CTAs, key UI elements */ --aq-color-brand-primary-dark: #C40170; /* Hover/secondary actions (5.85:1) */ --aq-color-brand-off-white: #F2F3EF; /* Background only — never as component bg on white */ /* ── Brand Secondary ──────────────────────────────────── */ --aq-color-brand-navy: #29335C; /* Headers, emphasis (12.19:1) */ --aq-color-brand-slate: #5A6675; /* Text, icons, borders (5.84:1) */ --aq-color-brand-lavender: #EFD8F2; /* Backgrounds, highlights — dark text only */ --aq-color-brand-light-blue: #BDCBF5; /* Backgrounds, info states — dark text only */ --aq-color-brand-cream: #EEEAD6; /* Backgrounds — dark text only */ /* ── Brand Accent (usability) ─────────────────────────── */ --aq-color-brand-accent-light: #FEE6F1; /* Button backgrounds, light accents */ --aq-color-brand-accent-medium: #F4C8E3; /* Button hover states, accents */ /* ── Interactive (form focus/selection — MUI blue, NOT brand) ── */ --aq-color-interactive: #2962FF; /* Checkboxes, radios, switches, input focus */ /* ── Legacy (gradient anchor) ─────────────────────────── */ --aq-color-brand-purple: #3a0647; /* ═══ 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 dark bg — theme-independent) ═══ */ --aq-color-nav-text: rgba(255, 255, 255, 0.87); --aq-color-nav-text-active: #FFFFFF; --aq-color-nav-active-bg: var(--aq-color-brand-primary); /* Magenta fill when active */ --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 ══════════════════════════════════════ */ /* Primary: Open Sans (Google Fonts) — add preconnect + link in host */ --aq-font-family-base: 'Open Sans', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif; /* Heading scale (1.176 ratio from 16px base) */ --aq-font-size-h1: 2.25rem; /* 36px — weight 500 (Medium) */ --aq-font-size-h2: 1.875rem; /* 30px — weight 500 (Medium) */ --aq-font-size-h3: 1.625rem; /* 26px — weight 400 (Regular) */ --aq-font-size-h4: 1.375rem; /* 22px — weight 400 (Regular) */ --aq-font-size-h5: 1.1875rem; /* 19px — weight 600 (Semi-Bold) */ --aq-font-size-h6: 1rem; /* 16px — weight 700 (Bold) */ --aq-font-size-lead: 1.5rem; /* 24px lead-in paragraph */ --aq-font-size-body: 1rem; /* 16px default */ --aq-font-size-body-compact: 0.9375rem; /* 15px secondary/compact */ --aq-font-size-body-small: 0.875rem; /* 14px — absolute minimum for body */ /* Font weights */ --aq-font-weight-regular: 400; --aq-font-weight-medium: 500; --aq-font-weight-semibold: 600; --aq-font-weight-bold: 700; /* Line heights */ --aq-line-height-base: 1.5; /* 24px at 16px base */ --aq-line-height-h1: 1.39; --aq-line-height-h2: 1.43; --aq-line-height-h3: 1.38; --aq-line-height-h4: 1.36; --aq-line-height-h5: 1.37; --aq-line-height-h6: 1.5; --aq-line-height-lead: 1.42; /* Component font sizes */ --aq-font-size-nav: 0.875rem; /* 14px sidebar nav */ --aq-font-size-navbar-brand: 1.1rem; --aq-font-size-divider: 0.875rem; /* ═══ Sizing ══════════════════════════════════════════ */ --aq-size-sidebar-width: 260px; /* Expanded — guidelines: 260px */ --aq-size-sidebar-collapsed: 80px; /* Collapsed — guidelines: 80px */ --aq-size-topbar-height: 4rem; /* 64px — guidelines: fixed 64px */ --aq-size-nav-link-height: 3.5rem; /* 56px default button height */ --aq-size-nav-link-condensed: 2.5rem; /* 40px condensed button height */ --aq-size-login-max-width: 440px; --aq-size-touch-target: 2.75rem; /* 44px — WCAG 2.5.5 minimum */ /* ═══ Border Radius ═══════════════════════════════════ */ /* Two-tier system: 8px structural / 16px emphasis */ --aq-radius-sm: 8px; /* Structural: cards, panels, dropdowns, nav, tables */ --aq-radius-lg: 16px; /* Emphasis: modals, hero cards, onboarding, highlights */ --aq-radius-input: 4px; /* Input fields, text areas */ --aq-radius-button: 8px; /* Buttons */ --aq-radius-pill: 9999px; /* Pills, avatars, full-round chips */ /* Semantic aliases (backward compat) */ --aq-radius-card: var(--aq-radius-sm); --aq-radius-panel: var(--aq-radius-sm); --aq-radius-nav-link: 4px; /* ═══ Status Colors (theme-independent) ═══════════════ */ --aq-color-success: #4CAF50; --aq-color-success-dark: #2E7D32; --aq-color-success-light: #E8F5E9; --aq-color-success-text: #1E4620; --aq-color-success-subtle: rgba(76, 175, 80, 0.12); --aq-color-warning: #FFC107; --aq-color-warning-dark: #ED6C02; --aq-color-warning-light: #FFF4E5; --aq-color-warning-text: #663C00; --aq-color-warning-subtle: rgba(255, 193, 7, 0.12); --aq-color-error: #D32F2F; --aq-color-error-dark: #B71C1C; --aq-color-error-light: #FDEDED; --aq-color-error-text: #5F2120; --aq-color-error-bg: #D32F2F; --aq-color-info: #2196F3; --aq-color-info-dark: #0288D1; --aq-color-info-light: #E5F6FD; --aq-color-info-text: #014361; --aq-color-info-subtle: rgba(33, 150, 243, 0.12); --aq-color-error-subtle: rgba(211, 47, 47, 0.1); --aq-color-primary-subtle: rgba(27, 110, 194, 0.12); --aq-color-method-patch-subtle: rgba(138, 43, 226, 0.1); /* Semantic aliases for component CSS */ --aq-color-danger: #C62828; /* Destructive / cancelled states */ --aq-color-text-muted: var(--aq-grey-600); /* #757575 — secondary inactive text */ /* ═══ Shadow Elevation (Material 0–24) ════════════════ */ /* Shadow color base — rgba(0,0,0,0.2) for all levels */ --aq-shadow-0: none; --aq-shadow-1: 0px 2px 1px 0px rgba(0, 0, 0, 0.2); --aq-shadow-2: 0px 3px 1px 0px rgba(0, 0, 0, 0.2); --aq-shadow-3: 0px 3px 3px 0px rgba(0, 0, 0, 0.2); --aq-shadow-4: 0px 2px 4px 0px rgba(0, 0, 0, 0.2); --aq-shadow-6: 0px 3px 5px 0px rgba(0, 0, 0, 0.2); --aq-shadow-8: 0px 5px 5px 0px rgba(0, 0, 0, 0.2); --aq-shadow-12: 0px 7px 8px 0px rgba(0, 0, 0, 0.2); --aq-shadow-16: 0px 8px 10px 0px rgba(0, 0, 0, 0.2); --aq-shadow-24: 0px 11px 15px 0px rgba(0, 0, 0, 0.2); /* Composite shadows (interactive states) */ --aq-shadow-default: 0px 1px 1px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); --aq-shadow-raised: 0px 5px 5px 0px rgba(0, 0, 0, 0.2), 0px 9px 10px 0px rgba(0, 0, 0, 0.14), 0px 5px 14px 0px rgba(0, 0, 0, 0.12); /* ═══ Text Opacity (Material) ═════════════════════════ */ --aq-opacity-primary: 0.87; --aq-opacity-secondary: 0.6; --aq-opacity-disabled: 0.38; --aq-opacity-hint: 0.38; --aq-opacity-divider: 0.12; /* ═══ Neutral Palette (Grey scale) ════════════════════ */ --aq-grey-50: #FAFAFA; --aq-grey-100: #F5F5F5; --aq-grey-200: #EEEEEE; --aq-grey-300: #E0E0E0; --aq-grey-400: #BDBDBD; --aq-grey-500: #9E9E9E; --aq-grey-600: #757575; --aq-grey-700: #616161; --aq-grey-800: #424242; --aq-grey-900: #212121; /* ═══ Input / Form Tokens ═════════════════════════════ */ --aq-input-border: #C4C4C4; --aq-input-border-hover: #9E9E9E; --aq-input-border-focus: var(--aq-color-interactive); /* #2962FF — NOT brand color */ --aq-input-border-error: var(--aq-color-error); --aq-input-border-disabled: var(--aq-grey-300); --aq-input-bg-filled: var(--aq-grey-100); --aq-input-bg-filled-hover: var(--aq-grey-200); --aq-input-bg-error: var(--aq-color-error-light); --aq-input-label: #666666; --aq-input-placeholder: var(--aq-grey-500); --aq-input-disabled-text: var(--aq-grey-500); /* ═══ Button Tokens ═══════════════════════════════════ */ --aq-btn-primary-bg: var(--aq-color-brand-primary); --aq-btn-primary-hover: var(--aq-color-brand-primary-dark); --aq-btn-primary-text: #FFFFFF; --aq-btn-secondary-border: var(--aq-color-brand-primary); --aq-btn-secondary-text: var(--aq-color-brand-primary); --aq-btn-secondary-hover-bg: rgba(228, 1, 122, 0.04); --aq-btn-tertiary-text: var(--aq-color-brand-primary); --aq-btn-tertiary-hover: var(--aq-color-brand-primary-dark); --aq-btn-disabled-bg: var(--aq-grey-300); --aq-btn-disabled-text: rgba(0, 0, 0, 0.38); --aq-color-warning-dark-hover: #e65100; /* Alt buttons (white on dark backgrounds) */ --aq-btn-alt-bg: #FFFFFF; --aq-btn-alt-text: var(--aq-color-brand-navy); --aq-color-on-color: #FFFFFF; /* ═══ Card Tokens ═════════════════════════════════════ */ --aq-card-bg: #FFFFFF; --aq-card-title: var(--aq-grey-900); /* #212121 */ --aq-card-subtitle: var(--aq-grey-600); /* #757575 */ --aq-card-body: var(--aq-grey-800); /* #424242 */ --aq-card-border: var(--aq-grey-300); /* #E0E0E0 */ --aq-card-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); --aq-card-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.15); /* ═══ Alert Tokens ════════════════════════════════════ */ --aq-alert-error-bg: #FDEDED; --aq-alert-error-full: #D32F2F; --aq-alert-error-text: #5F2120; --aq-alert-error-border: #D32F2F; --aq-alert-warning-bg: #FFF4E5; --aq-alert-warning-full: #ED6C02; --aq-alert-warning-text: #663C00; --aq-alert-warning-border: #ED6C02; --aq-alert-info-bg: #E5F6FD; --aq-alert-info-full: #0288D1; --aq-alert-info-text: #014361; --aq-alert-info-border: #0288D1; --aq-alert-success-bg: #EDF7ED; --aq-alert-success-full: #2E7D32; --aq-alert-success-text: #1E4620; --aq-alert-success-border: #2E7D32; /* ═══ Badge Tokens ════════════════════════════════════ */ --aq-color-method-patch: #8a2be2; /* HTTP PATCH method badge (blue-violet) */ --aq-badge-security: #c9302c; /* Security release badge */ --aq-badge-bugfix: #b87514; /* Bugfix release badge */ --aq-badge-security-bg: rgba(220, 53, 69, 0.12); --aq-badge-feature-bg: var(--aq-color-primary-subtle); --aq-badge-bugfix-bg: rgba(210, 130, 40, 0.12); --aq-badge-infra-bg: rgba(108, 117, 125, 0.12); } /* ═══════════════════════════════════════════════════════════ Light Theme (default) ═══════════════════════════════════════════════════════════ */ :root, [data-theme="light"] { /* Semantic Colors */ --aq-color-primary: var(--aq-color-brand-primary); --aq-color-primary-hover: var(--aq-color-brand-primary-dark); --aq-color-link: var(--aq-color-brand-primary); --aq-color-focus-ring: var(--aq-color-interactive); --aq-color-heading: var(--aq-color-brand-navy); --aq-color-heading-secondary: var(--aq-grey-900); --aq-color-muted: var(--aq-color-brand-slate); --aq-color-body-bg: #F2F3EF; --aq-color-body-text: rgba(0, 0, 0, 0.87); /* Surfaces — white sits ON TOP of off-white body for visual depth */ --aq-color-surface: #FFFFFF; --aq-color-surface-secondary: var(--aq-grey-100); --aq-color-surface-code: #f0f3f8; --aq-color-surface-topbar: var(--aq-grey-100); --aq-color-surface-error-ui: lightyellow; /* Borders */ --aq-color-border: var(--aq-grey-200); --aq-color-border-topbar: #d6d5d5; --aq-color-border-divider: #dee2e6; --aq-color-border-checkbox: #929292; /* Shadows (composed) */ --aq-shadow-card: var(--aq-shadow-default); --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: #F06292; /* Pink lighten-2 — accessible on dark */ --aq-color-primary-hover: #EC407A; /* Pink lighten-1 */ --aq-color-link: #F06292; --aq-color-focus-ring: #448AFF; /* Blue accent-2 — accessible on dark */ --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); /* Input overrides for dark */ --aq-input-border: #3a4050; --aq-input-border-hover: #5a6070; --aq-input-bg-filled: #1e2433; --aq-input-bg-filled-hover: #252a3a; --aq-input-label: #8892a0; --aq-input-placeholder: #5a6070; /* Card overrides for dark */ --aq-card-bg: var(--aq-color-surface); --aq-card-title: #e1e5ea; --aq-card-subtitle: #8892a0; --aq-card-body: #b0b8c4; --aq-card-border: #2a3040; --aq-card-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); --aq-card-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.4); /* Badge overrides for dark */ --aq-badge-security: #f07070; --aq-badge-bugfix: #e0a83a; --aq-color-primary-subtle: rgba(77, 163, 255, 0.15); --aq-color-error-subtle: rgba(229, 0, 0, 0.15); --aq-color-warning-subtle: rgba(229, 161, 0, 0.15); --aq-color-method-patch-subtle: rgba(138, 43, 226, 0.15); --aq-badge-security-bg: rgba(220, 53, 69, 0.18); --aq-badge-feature-bg: rgba(77, 163, 255, 0.15); --aq-badge-bugfix-bg: rgba(210, 160, 60, 0.18); --aq-badge-infra-bg: rgba(136, 146, 160, 0.18); /* 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; } } /* High contrast fallback — shadows may not render */ @media (forced-colors: active) { [class*="shadow-"] { border: 1px solid CanvasText; } } /* Smooth theme transition (subtle, not jarring) */ body { transition: background-color 0.2s ease, color 0.2s ease; }