/* ============================================================ THEME VARIABLES — Airlinksin Default theme is now "futurist" (deep void · cyan/magenta neon). Other themes remain available via . ============================================================ */ :root { /* ===== FUTURIST DEFAULTS ===== */ /* Brand — electric cyan with violet partner */ --color-primary: #00E5FF; --color-primary-dark: #00B8D4; --color-accent: #FF2E8B; /* magenta neon accent */ --color-accent-2: #7C3AED; /* violet neon */ --color-accent-3: #00FFA3; /* mint neon */ /* Surfaces — deep space with subtle blue/violet wash */ --color-bg-page: #05060D; --color-bg-card: rgba(20, 22, 38, 0.72); /* glass */ --color-bg-secondary: rgba(30, 34, 56, 0.6); /* deeper glass */ --color-bg-muted: rgba(255, 255, 255, 0.04); /* Semantic surfaces — neon-tinted glass */ --color-bg-info: rgba(0, 229, 255, 0.10); --color-bg-success: rgba(0, 255, 163, 0.10); --color-bg-warning: rgba(255, 184, 0, 0.10); --color-bg-danger: rgba(255, 46, 139, 0.10); --color-bg-error: rgba(255, 46, 139, 0.10); /* Text — bright white with cool gray secondary */ --color-text-primary: #F0F4FF; --color-text-secondary: #9CA3B8; --color-text-muted: #6B7290; --color-text-info: #00E5FF; --color-text-success: #00FFA3; --color-text-warning: #FFB800; --color-text-danger: #FF2E8B; --color-text-error: #FF2E8B; /* Borders — glowing edges */ --color-border: rgba(0, 229, 255, 0.14); --color-border-strong: rgba(0, 229, 255, 0.32); --color-success: rgba(0, 255, 163, 0.4); --color-error: rgba(255, 46, 139, 0.4); --color-warning: rgba(255, 184, 0, 0.4); /* Geometry — sharper edges for a tech feel */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-xl: 16px; --radius-pill: 999px; /* Typography — geometric sans + mono for data */ --font-sans: "Space Grotesk", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo, monospace; --font-display: "Space Grotesk", "Inter", sans-serif; /* Shadows — soft glows, not drop-shadows */ --shadow-sm: 0 0 0 1px rgba(0, 229, 255, 0.06), 0 2px 8px rgba(0, 0, 0, 0.4); --shadow-md: 0 0 0 1px rgba(0, 229, 255, 0.10), 0 8px 24px rgba(0, 0, 0, 0.5); --shadow-lg: 0 0 0 1px rgba(0, 229, 255, 0.14), 0 16px 48px rgba(0, 0, 0, 0.6); --shadow-glow: 0 0 24px rgba(0, 229, 255, 0.35); --shadow-glow-strong: 0 0 40px rgba(0, 229, 255, 0.55); --shadow-glow-pink: 0 0 24px rgba(255, 46, 139, 0.4); --shadow-glow-violet: 0 0 24px rgba(124, 58, 237, 0.4); /* Brand gradients */ --gradient-primary: linear-gradient(135deg, #00E5FF 0%, #7C3AED 100%); --gradient-accent: linear-gradient(135deg, #FF2E8B 0%, #7C3AED 100%); --gradient-cosmic: linear-gradient(135deg, #00E5FF 0%, #7C3AED 50%, #FF2E8B 100%); --gradient-success: linear-gradient(135deg, #00FFA3 0%, #00E5FF 100%); /* Layout */ --container: 1200px; --header-height: 64px; /* Animation */ --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --duration-fast: 160ms; --duration-base: 240ms; --duration-slow: 400ms; } /* ============================================================ ALTERNATIVE THEMES (opt-in via ) ============================================================ */ /* ----- Light (classic clean) ----- */ [data-theme="light"] { --color-primary: #185FA5; --color-primary-dark: #0C447C; --color-accent: #D85A30; --color-accent-2: #534AB7; --color-accent-3: #0F6E56; --color-bg-page: #FAFAF7; --color-bg-card: #FFFFFF; --color-bg-secondary: #F1EFE8; --color-bg-muted: rgba(0,0,0,0.03); --color-bg-info: #E6F1FB; --color-bg-success: #E1F5EE; --color-bg-warning: #FAEEDA; --color-bg-danger: #FCEBEB; --color-text-primary: #1B1B19; --color-text-secondary: #6B6A65; --color-text-muted: #9A9A95; --color-text-info: #185FA5; --color-text-success: #0F6E56; --color-text-warning: #854F0B; --color-text-danger: #A32D2D; --color-border: rgba(0,0,0,0.10); --color-border-strong: rgba(0,0,0,0.18); --shadow-sm: 0 1px 3px rgba(0,0,0,0.05); --shadow-md: 0 4px 16px rgba(0,0,0,0.07); --shadow-lg: 0 12px 32px rgba(0,0,0,0.10); --shadow-glow: var(--shadow-md); --gradient-primary: linear-gradient(135deg, #185FA5 0%, #534AB7 100%); } /* ----- Sepia ----- */ [data-theme="sepia"] { --color-primary: #993C1D; --color-primary-dark: #712B13; --color-bg-page: #FAF3E7; --color-bg-card: #FFFBF2; --color-bg-secondary: #F1EAD8; --color-text-primary: #3C2A1F; --color-text-secondary: #7A6A55; --color-text-info: #993C1D; --color-bg-info: #FAEEDA; --color-border: rgba(60,42,31,0.12); } /* ----- Ocean ----- */ [data-theme="ocean"] { --color-primary: #0F6E56; --color-primary-dark: #085041; --color-bg-page: #F0F7F5; --color-bg-card: #FFFFFF; --color-bg-secondary: #DCEDE6; --color-text-primary: #062B23; --color-text-secondary: #4F6E66; --color-text-info: #0F6E56; --color-bg-info: #DCEDE6; } /* ----- Midnight (violet on near-black) ----- */ [data-theme="midnight"] { --color-primary: #7F77DD; --color-primary-dark: #534AB7; --color-bg-page: #06070C; --color-bg-card: #131521; --color-bg-secondary: #1E2236; --color-text-primary: #EEEDFE; --color-text-secondary: #9A95B8; --color-text-info: #AFA9EC; --color-bg-info: #2A2554; --color-border: rgba(255,255,255,0.08); --color-border-strong: rgba(255,255,255,0.16); } /* ============================================================ SERVICE COLOR PALETTES — neon-tinted for futurist default ============================================================ */ :root { --svc-flights: #00E5FF; --svc-flights-bg: rgba(0, 229, 255, 0.10); --svc-hotels: #7C3AED; --svc-hotels-bg: rgba(124, 58, 237, 0.10); --svc-airportTransfer: #FFB800; --svc-airportTransfer-bg: rgba(255, 184, 0, 0.10); --svc-schoolDrop: #00FFA3; --svc-schoolDrop-bg: rgba(0, 255, 163, 0.10); --svc-intlSupport: #00E5FF; --svc-intlSupport-bg: rgba(0, 229, 255, 0.10); --svc-travelInsurance: #FF2E8B; --svc-travelInsurance-bg: rgba(255, 46, 139, 0.10); --svc-discover: #FF2E8B; --svc-discover-bg: rgba(255, 46, 139, 0.10); } [data-theme="light"] { --svc-flights: #185FA5; --svc-flights-bg: #E6F1FB; --svc-hotels: #534AB7; --svc-hotels-bg: #EEEDFE; --svc-airportTransfer: #D85A30; --svc-airportTransfer-bg: #FAEEDA; --svc-schoolDrop: #0F6E56; --svc-schoolDrop-bg: #E1F5EE; --svc-intlSupport: #185FA5; --svc-intlSupport-bg: #E6F1FB; --svc-travelInsurance: #A32D2D; --svc-travelInsurance-bg: #FCEBEB; --svc-discover: #993C1D; --svc-discover-bg: #FAECE7; }