/* ══════════════════════════════════════════════════════════ FleetSpartan Identity Portal — Theme System ══════════════════════════════════════════════════════════ Uses [data-theme] on for explicit toggle. Falls back to OS preference via prefers-color-scheme. Extend with additional themes by adding new selectors. ══════════════════════════════════════════════════════════ */ /* ── Light theme (default) ────────────────────────────── */ :root { color-scheme: light dark; /* Page */ --fs-page-bg: #f5f5f5; --fs-body-bg: #f8f9fa; /* Card / surface */ --fs-card-bg: #ffffff; --fs-card-border: #d1fae5; --fs-card-shadow: 0 2px 10px rgba(0, 0, 0, 0.06); /* Surfaces (subtle backgrounds) */ --fs-surface-subtle: #f9fafb; --fs-surface-alt: #f8f9fa; /* Borders */ --fs-border: #ddd; --fs-border-subtle: #e5e7eb; --fs-border-light: #eee; --fs-border-medium: #dee2e6; /* Text */ --fs-text-primary: #333333; --fs-text-secondary: #4b5563; --fs-text-muted: #666666; --fs-text-faint: #888888; --fs-text-on-dark: #ffffff; /* Brand green */ --fs-green-700: #0E7732; --fs-green-800: #0A5F29; --fs-green-600: #16a34a; --fs-green-500: #22c55e; --fs-green-400: #4ade80; --fs-green-deep: #065f46; /* Brand green — semantic */ --fs-title-color: #065f46; --fs-btn-primary: #0E7732; --fs-btn-primary-hover: #0A5F29; --fs-btn-secondary: #6b7280; --fs-btn-secondary-hover: #4b5563; --fs-input-focus-border: #22c55e; --fs-input-focus-border-soft: #4ade80; --fs-input-focus-ring: rgba(34, 197, 94, 0.25); --fs-spinner-color: #4ade80; /* Accent blue (2FA pages) */ --fs-accent: #1976d2; --fs-accent-hover: #1565c0; --fs-accent-dark: #0d47a1; --fs-accent-light: #90caf9; --fs-accent-bg: #e3f2fd; --fs-accent-bg-end: #bbdefb; --fs-accent-ring: rgba(25, 118, 210, 0.15); --fs-accent-shadow: rgba(25, 118, 210, 0.2); --fs-accent-checkbox: #1976d2; /* Error */ --fs-error-bg: #fef2f2; --fs-error-border: #fee2e2; --fs-error-accent: #dc2626; --fs-error-text: #991b1b; /* Success */ --fs-success-bg: #f0fdf4; --fs-success-border: #bbf7d0; --fs-success-accent: #22c55e; --fs-success-text: #166534; /* Warning / info */ --fs-warning-bg: #fff3cd; --fs-warning-border: #ffc107; --fs-warning-text: #856404; --fs-info-bg: #e7f3ff; --fs-info-border: #007bff; --fs-info-text: #004085; --fs-info-heading: #002752; /* Overlay */ --fs-overlay-bg: rgba(255, 255, 255, 0.8); --fs-overlay-heavy: rgba(255, 255, 255, 0.95); /* Footer */ --fs-footer-text: #666666; --fs-footer-border: #eeeeee; --fs-version-label: #65a30d; --fs-version-number: #166534; /* Sidebar (identity layout) */ --fs-sidebar-gradient-start: rgb(5, 39, 103); --fs-sidebar-gradient-end: #3a0647; --fs-toprow-bg: #f7f7f7; --fs-toprow-border: #d6d5d5; /* Nav */ --fs-nav-link-color: #d7d7d7; --fs-nav-active-bg: rgba(255, 255, 255, 0.37); --fs-nav-hover-bg: rgba(255, 255, 255, 0.1); --fs-nav-toprow-bg: rgba(0, 0, 0, 0.4); /* Manage 2FA */ --fs-method-primary-border: #28a745; --fs-method-primary-bg: #f0f9f4; --fs-badge-primary-bg: #28a745; --fs-backup-border: #ffc107; --fs-backup-bg: #fff8e1; --fs-action-primary: #007bff; --fs-action-primary-hover: #0056b3; --fs-action-danger: #dc3545; --fs-action-danger-hover: #c82333; /* Enroll 2FA */ --fs-qr-bg: #f8f9fa; --fs-qr-border: #dee2e6; --fs-secret-bg: #fff3cd; --fs-secret-border: #ffc107; --fs-secret-text: #856404; --fs-backup-code-bg: #f8f9fa; --fs-backup-code-border: #dee2e6; --fs-backup-container-border: #28a745; --fs-backup-title-color: #28a745; --fs-manual-entry-bg: #fff9e6; --fs-manual-entry-border: #ffd700; /* Conditions */ --fs-condition-btn-bg: #373737; --fs-condition-btn-hover: #272727; --fs-condition-btn-active: #171717; --fs-condition-btn-border: #606060; --fs-condition-label-text: #444; /* Checkbox */ --fs-checkbox-border: #929292; /* Alternate methods (blue pages) */ --fs-alt-method-bg: #fafafa; --fs-alt-method-border: #e0e0e0; --fs-alt-method-hover-bg: #f5f5f5; --fs-alt-method-strong: #212121; --fs-alt-method-small: #757575; --fs-link-disabled: #9e9e9e; /* Resend countdown */ --fs-countdown-bg: #f5f5f5; --fs-countdown-text: #666; /* Code input placeholder */ --fs-placeholder: #bdbdbd; /* Code input error */ --fs-code-error-border: #ef5350; --fs-code-error-bg: #ffebee; --fs-code-error-focus: #d32f2f; /* Validation */ --fs-valid-outline: #26b050; --fs-invalid-outline: #e50000; --fs-validation-text: #e50000; } /* ── Dark theme ───────────────────────────────────────── */ html[data-theme="dark"] { color-scheme: dark; /* Page */ --fs-page-bg: #121212; --fs-body-bg: #121212; /* Card / surface */ --fs-card-bg: #1e1e1e; --fs-card-border: #2a3a2e; --fs-card-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); /* Surfaces */ --fs-surface-subtle: #262626; --fs-surface-alt: #1e1e1e; /* Borders */ --fs-border: #3a3a3a; --fs-border-subtle: #333333; --fs-border-light: #2a2a2a; --fs-border-medium: #3a3a3a; /* Text */ --fs-text-primary: #e0e0e0; --fs-text-secondary: #b0b0b0; --fs-text-muted: #999999; --fs-text-faint: #777777; /* Brand green — semantic */ --fs-title-color: #6ee7a0; --fs-btn-primary: #1a8a3e; --fs-btn-primary-hover: #0E7732; --fs-btn-secondary: #555d66; --fs-btn-secondary-hover: #6b7280; --fs-input-focus-border: #34d058; --fs-input-focus-border-soft: #2db553; --fs-input-focus-ring: rgba(52, 208, 88, 0.3); --fs-spinner-color: #34d058; /* Accent blue (2FA pages) */ --fs-accent: #64b5f6; --fs-accent-hover: #42a5f5; --fs-accent-dark: #90caf9; --fs-accent-light: #3a6a96; --fs-accent-bg: #1e3a5f; --fs-accent-bg-end: #2c5282; --fs-accent-ring: rgba(100, 181, 246, 0.2); --fs-accent-shadow: rgba(100, 181, 246, 0.25); --fs-accent-checkbox: #64b5f6; /* Error */ --fs-error-bg: #3d1f1f; --fs-error-border: #5c2626; --fs-error-accent: #f87171; --fs-error-text: #fca5a5; /* Success */ --fs-success-bg: #1a3a24; --fs-success-border: #2a5a34; --fs-success-accent: #34d058; --fs-success-text: #6ee7a0; /* Warning / info */ --fs-warning-bg: #3d3520; --fs-warning-border: #b8860b; --fs-warning-text: #fcd34d; --fs-info-bg: #1a2a3d; --fs-info-border: #3b82f6; --fs-info-text: #93c5fd; --fs-info-heading: #bfdbfe; /* Overlay */ --fs-overlay-bg: rgba(0, 0, 0, 0.7); --fs-overlay-heavy: rgba(0, 0, 0, 0.85); /* Footer */ --fs-footer-text: #888888; --fs-footer-border: #333333; --fs-version-label: #84cc16; --fs-version-number: #6ee7a0; /* Sidebar */ --fs-sidebar-gradient-start: #0a1628; --fs-sidebar-gradient-end: #1a0a22; --fs-toprow-bg: #1e1e1e; --fs-toprow-border: #333333; /* Nav */ --fs-nav-link-color: #b0b0b0; --fs-nav-active-bg: rgba(255, 255, 255, 0.15); --fs-nav-hover-bg: rgba(255, 255, 255, 0.08); --fs-nav-toprow-bg: rgba(0, 0, 0, 0.6); /* Manage 2FA */ --fs-method-primary-border: #2db553; --fs-method-primary-bg: #1a3a24; --fs-badge-primary-bg: #1a8a3e; --fs-backup-border: #b8860b; --fs-backup-bg: #3d3520; --fs-action-primary: #3b82f6; --fs-action-primary-hover: #2563eb; --fs-action-danger: #ef4444; --fs-action-danger-hover: #dc2626; /* Enroll 2FA */ --fs-qr-bg: #262626; --fs-qr-border: #3a3a3a; --fs-secret-bg: #3d3520; --fs-secret-border: #b8860b; --fs-secret-text: #fcd34d; --fs-backup-code-bg: #262626; --fs-backup-code-border: #3a3a3a; --fs-backup-container-border: #2db553; --fs-backup-title-color: #34d058; --fs-manual-entry-bg: #3d3520; --fs-manual-entry-border: #b8860b; /* Conditions */ --fs-condition-btn-bg: #2a2a2a; --fs-condition-btn-hover: #333333; --fs-condition-btn-active: #1a1a1a; --fs-condition-btn-border: #555; --fs-condition-label-text: #b0b0b0; /* Checkbox */ --fs-checkbox-border: #666; /* Alternate methods */ --fs-alt-method-bg: #262626; --fs-alt-method-border: #3a3a3a; --fs-alt-method-hover-bg: #333333; --fs-alt-method-strong: #e0e0e0; --fs-alt-method-small: #999; --fs-link-disabled: #555; /* Resend countdown */ --fs-countdown-bg: #262626; --fs-countdown-text: #999; /* Code input placeholder */ --fs-placeholder: #555; /* Code input error */ --fs-code-error-border: #e53e3e; --fs-code-error-bg: #3d1f1f; --fs-code-error-focus: #f56565; /* Validation */ --fs-valid-outline: #34d058; --fs-invalid-outline: #f87171; --fs-validation-text: #f87171; } /* ── Auto-detect OS preference when no explicit theme set ─ */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; --fs-page-bg: #121212; --fs-body-bg: #121212; --fs-card-bg: #1e1e1e; --fs-card-border: #2a3a2e; --fs-card-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); --fs-surface-subtle: #262626; --fs-surface-alt: #1e1e1e; --fs-border: #3a3a3a; --fs-border-subtle: #333333; --fs-border-light: #2a2a2a; --fs-border-medium: #3a3a3a; --fs-text-primary: #e0e0e0; --fs-text-secondary: #b0b0b0; --fs-text-muted: #999999; --fs-text-faint: #777777; --fs-title-color: #6ee7a0; --fs-btn-primary: #1a8a3e; --fs-btn-primary-hover: #0E7732; --fs-btn-secondary: #555d66; --fs-btn-secondary-hover: #6b7280; --fs-input-focus-border: #34d058; --fs-input-focus-border-soft: #2db553; --fs-input-focus-ring: rgba(52, 208, 88, 0.3); --fs-spinner-color: #34d058; --fs-accent: #64b5f6; --fs-accent-hover: #42a5f5; --fs-accent-dark: #90caf9; --fs-accent-light: #3a6a96; --fs-accent-bg: #1e3a5f; --fs-accent-bg-end: #2c5282; --fs-accent-ring: rgba(100, 181, 246, 0.2); --fs-accent-shadow: rgba(100, 181, 246, 0.25); --fs-accent-checkbox: #64b5f6; --fs-error-bg: #3d1f1f; --fs-error-border: #5c2626; --fs-error-accent: #f87171; --fs-error-text: #fca5a5; --fs-success-bg: #1a3a24; --fs-success-border: #2a5a34; --fs-success-accent: #34d058; --fs-success-text: #6ee7a0; --fs-warning-bg: #3d3520; --fs-warning-border: #b8860b; --fs-warning-text: #fcd34d; --fs-info-bg: #1a2a3d; --fs-info-border: #3b82f6; --fs-info-text: #93c5fd; --fs-info-heading: #bfdbfe; --fs-overlay-bg: rgba(0, 0, 0, 0.7); --fs-overlay-heavy: rgba(0, 0, 0, 0.85); --fs-footer-text: #888888; --fs-footer-border: #333333; --fs-version-label: #84cc16; --fs-version-number: #6ee7a0; --fs-sidebar-gradient-start: #0a1628; --fs-sidebar-gradient-end: #1a0a22; --fs-toprow-bg: #1e1e1e; --fs-toprow-border: #333333; --fs-nav-link-color: #b0b0b0; --fs-nav-active-bg: rgba(255, 255, 255, 0.15); --fs-nav-hover-bg: rgba(255, 255, 255, 0.08); --fs-nav-toprow-bg: rgba(0, 0, 0, 0.6); --fs-method-primary-border: #2db553; --fs-method-primary-bg: #1a3a24; --fs-badge-primary-bg: #1a8a3e; --fs-backup-border: #b8860b; --fs-backup-bg: #3d3520; --fs-action-primary: #3b82f6; --fs-action-primary-hover: #2563eb; --fs-action-danger: #ef4444; --fs-action-danger-hover: #dc2626; --fs-qr-bg: #262626; --fs-qr-border: #3a3a3a; --fs-secret-bg: #3d3520; --fs-secret-border: #b8860b; --fs-secret-text: #fcd34d; --fs-backup-code-bg: #262626; --fs-backup-code-border: #3a3a3a; --fs-backup-container-border: #2db553; --fs-backup-title-color: #34d058; --fs-manual-entry-bg: #3d3520; --fs-manual-entry-border: #b8860b; --fs-condition-btn-bg: #2a2a2a; --fs-condition-btn-hover: #333333; --fs-condition-btn-active: #1a1a1a; --fs-condition-btn-border: #555; --fs-condition-label-text: #b0b0b0; --fs-checkbox-border: #666; --fs-alt-method-bg: #262626; --fs-alt-method-border: #3a3a3a; --fs-alt-method-hover-bg: #333333; --fs-alt-method-strong: #e0e0e0; --fs-alt-method-small: #999; --fs-link-disabled: #555; --fs-countdown-bg: #262626; --fs-countdown-text: #999; --fs-placeholder: #555; --fs-code-error-border: #e53e3e; --fs-code-error-bg: #3d1f1f; --fs-code-error-focus: #f56565; --fs-valid-outline: #34d058; --fs-invalid-outline: #f87171; --fs-validation-text: #f87171; } } /* ── Smooth transitions when toggling themes ──────────── */ html[data-theme-transition], html[data-theme-transition] *, html[data-theme-transition] *::before, html[data-theme-transition] *::after { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important; }