/* GENERATED from design/tokens/tokens.json — do not edit by hand (run: dotnet run --project design/TokenGen) */ :root { --mileage-brand: #2563EB; --mileage-business-color: #2563EB; --mileage-business-bg: #EFF6FF; --mileage-personal-color: #059669; --mileage-personal-bg: #F0FDF4; --mileage-unclassified-color: #D97706; --mileage-unclassified-bg: #FFFBEB; --mileage-error: #B32121; --mileage-success: #2E7D32; --mileage-warning: #D97706; --mileage-info: #0288D1; --mileage-text-primary: #111827; --mileage-text-secondary: #6B7280; --mileage-page-bg: #F9FAFB; --mileage-surface: #FFFFFF; --mileage-surface-variant: #F3F4F6; --mileage-outline: #E5E7EB; --mileage-sync-pending: #6B7280; --mileage-route-pill-bg: #F3F4F6; --mileage-drive-row-hover: #F9FAFB; --mileage-drive-row-selected: #EFF6FF; --mileage-map-bg: #E8F0D8; --mileage-space-1: 4px; --mileage-space-2: 8px; --mileage-space-3: 12px; --mileage-space-4: 16px; --mileage-space-6: 24px; --mileage-space-8: 32px; --mileage-radius-sm: 6px; --mileage-radius-md: 8px; --mileage-radius-lg: 12px; --mileage-radius-pill: 999px; --mileage-shadow-card: 0 1px 2px rgba(16,24,40,0.06), 0 1px 3px rgba(16,24,40,0.08); } /* Dark theme — follows the OS by default; opt out/in via . */ @media (prefers-color-scheme: dark) { :root { --mileage-brand: #60A5FA; --mileage-business-color: #60A5FA; --mileage-business-bg: #1E293B; --mileage-personal-color: #34D399; --mileage-personal-bg: #14241D; --mileage-unclassified-color: #FBBF24; --mileage-unclassified-bg: #2A2113; --mileage-error: #F87171; --mileage-success: #34D399; --mileage-warning: #FBBF24; --mileage-info: #38BDF8; --mileage-text-primary: #F3F4F6; --mileage-text-secondary: #9CA3AF; --mileage-page-bg: #0B0F14; --mileage-surface: #1F2937; --mileage-surface-variant: #374151; --mileage-outline: #374151; --mileage-sync-pending: #9CA3AF; --mileage-route-pill-bg: #374151; --mileage-drive-row-hover: #111827; --mileage-drive-row-selected: #1E293B; --mileage-map-bg: #1A2417; --mileage-shadow-card: 0 1px 2px rgba(0,0,0,0.4); } } /* Manual override hook — forces dark regardless of OS. */ :root[data-theme="dark"] { --mileage-brand: #60A5FA; --mileage-business-color: #60A5FA; --mileage-business-bg: #1E293B; --mileage-personal-color: #34D399; --mileage-personal-bg: #14241D; --mileage-unclassified-color: #FBBF24; --mileage-unclassified-bg: #2A2113; --mileage-error: #F87171; --mileage-success: #34D399; --mileage-warning: #FBBF24; --mileage-info: #38BDF8; --mileage-text-primary: #F3F4F6; --mileage-text-secondary: #9CA3AF; --mileage-page-bg: #0B0F14; --mileage-surface: #1F2937; --mileage-surface-variant: #374151; --mileage-outline: #374151; --mileage-sync-pending: #9CA3AF; --mileage-route-pill-bg: #374151; --mileage-drive-row-hover: #111827; --mileage-drive-row-selected: #1E293B; --mileage-map-bg: #1A2417; --mileage-shadow-card: 0 1px 2px rgba(0,0,0,0.4); }