/* ============================================================ TRUE COST Pro — theme.css (Dark Premium Automotive) ============================================================ */ :root { /* ── Dark premium base ── */ --color-bg: #0B1220; --color-bg-alt: #0D1526; --color-surface: #141E2E; --color-surface-2: #1A2640; --color-surface-3: #1F2D4A; /* ── Borders ── */ --color-border: rgba(255,255,255,0.08); --color-border-strong: rgba(255,255,255,0.15); --color-border-focus: #3B82F6; /* ── Typography ── */ --color-text: #F0F4FF; --color-text-secondary: rgba(240,244,255,0.70); --color-text-muted: rgba(240,244,255,0.45); --color-text-subtle: rgba(240,244,255,0.28); --color-text-inverse: #0B1220; /* ── Brand ── */ --color-primary: #3B82F6; --color-primary-light: rgba(59,130,246,0.15); --color-primary-dark: #2563EB; --color-accent: #F59E0B; --color-accent-hover: #D97706; --color-accent-muted: #FEF3C7; --color-accent-light: rgba(245,158,11,0.12); /* ── Semantic ── */ --color-success: #10B981; --color-success-light: rgba(16,185,129,0.12); --color-warning: #F59E0B; --color-error: #EF4444; --color-error-light: rgba(239,68,68,0.12); /* ── Hero / Dark header ── */ --color-hero-bg: #0B1220; --color-hero-bg2: #0D1B36; /* ── Nav ── */ --color-nav-bg: #0B1220; --color-nav-active: #3B82F6; --color-nav-inactive: rgba(240,244,255,0.35); /* ── Legacy card colours (keep for existing components) ── */ --color-bg-card: #141E2E; --color-bg-input: #1A2640; --color-bg-nav: #0B1220; --color-bg-secondary: #1A2640; /* ── Fuel type colours ── */ --color-ev: #3B82F6; --color-petrol: #F97316; --color-diesel: #8B7355; --color-hybrid: #10B981; --color-phev: #06B6D4; /* ── Typography ── */ --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-size-xs: 11px; --font-size-sm: 13px; --font-size-base: 15px; --font-size-md: 17px; --font-size-lg: 22px; --font-size-xl: 26px; --font-size-2xl: 32px; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --line-height-tight: 1.2; --line-height-normal: 1.5; --line-height-relaxed: 1.65; /* ── Spacing ── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; /* ── Border radius ── */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-card: 16px; --radius-pill: 9999px; --radius-full: 9999px; /* ── Shadows ── */ --shadow-sm: 0 1px 4px rgba(0,0,0,0.25); --shadow-md: 0 4px 16px rgba(0,0,0,0.35); --shadow-lg: 0 8px 32px rgba(0,0,0,0.45); --shadow-xl: 0 16px 48px rgba(0,0,0,0.55); --shadow-card: 0 4px 24px rgba(0,0,0,0.40); --shadow-blue: 0 4px 16px rgba(59,130,246,0.25); --shadow-gold: 0 4px 16px rgba(245,158,11,0.25); /* ── Transitions ── */ --transition-fast: 0.12s ease; --transition-normal: 0.22s ease; /* ── Layout ── */ --nav-height: 62px; --hero-height: 0px; --max-width: 520px; /* Height of the system furniture along the bottom edge — Android's gesture pill or 3-button bar, iOS's home indicator. Non-zero only when the app draws edge-to-edge AND the viewport is viewport-fit=cover; both are true in the Capacitor build (targetSdk 36 forces edge-to-edge) and in an installed PWA. */ --safe-bottom: env(safe-area-inset-bottom, 0px); /* What anything anchored ABOVE the bottom nav must clear. Read this, never --nav-height, or it will sit behind the system bar on a phone. */ --nav-total: calc(var(--nav-height) + var(--safe-bottom)); } /* Where the platform reports no inset at all (desktop, older non-edge-to-edge WebViews) the labels would otherwise sit flush against the viewport edge, so floor it at a few px of breathing room. Where a real inset exists it is always larger than the floor, so max() is a no-op there. The @supports guard is for iOS 11.0–11.2, which shipped env() before it shipped max(). */ @supports (padding: max(0px)) { :root { --safe-bottom: max(env(safe-area-inset-bottom, 0px), 10px); } } /* ============================================================ Light theme overrides (applied via data-theme="light" on ) Palette matches the original TrueCost non-pro app (warm clean white). ============================================================ */ [data-theme="light"] { /* ── Base — warm white matching original app ── */ --color-bg: #F2F4F8; --color-bg-alt: #EBEEf5; --color-surface: #FFFFFF; --color-surface-2: #EEF1F7; --color-surface-3: #E4E8F2; /* ── Borders ── */ --color-border: #DDE2EC; --color-border-strong: #C5CDD9; --color-border-focus: #3B82F6; /* ── Typography — dark navy from original app ── */ --color-text: #0F1828; --color-text-secondary: #4A5568; --color-text-muted: #8A96A6; --color-text-subtle: #B0BAC8; --color-text-inverse: #FFFFFF; /* ── Brand stays the same — blue/gold work on both themes ── */ --color-primary-light: rgba(59,130,246,0.12); --color-accent-light: rgba(245,158,11,0.10); --color-success-light: rgba(16,185,129,0.10); --color-error-light: rgba(239,68,68,0.10); /* ── Hero keeps dark gradient for visual contrast ── */ --color-hero-bg: #08101E; --color-hero-bg2: #0D1E3A; /* ── Nav ── */ --color-nav-bg: #FFFFFF; --color-nav-inactive: rgba(15,24,40,0.38); /* ── Legacy aliases ── */ --color-bg-card: #FFFFFF; --color-bg-input: #EEF1F7; --color-bg-nav: #FFFFFF; --color-bg-secondary: #EEF1F7; /* ── Shadows (softer in day mode) ── */ --shadow-sm: 0 1px 4px rgba(0,0,0,0.06); --shadow-md: 0 4px 16px rgba(0,0,0,0.08); --shadow-lg: 0 8px 32px rgba(0,0,0,0.10); --shadow-xl: 0 16px 48px rgba(0,0,0,0.13); --shadow-card: 0 2px 16px rgba(0,0,0,0.07); --shadow-blue: 0 4px 16px rgba(59,130,246,0.15); --shadow-gold: 0 4px 16px rgba(245,158,11,0.15); } /* Smooth theme transition */ html { transition: background-color var(--transition-normal), color var(--transition-normal); }