/* ═══════════════════════════════════════════════════════════ EDC APP — Design Tokens / Theme Variables Light theme (default) + Dark theme overrides Palettes: blue (default) | green | purple | orange | teal ═══════════════════════════════════════════════════════════ */ /* ── Light Theme (default) ──────────────────────────────── */ :root, [data-theme="light"] { /* Brand */ --c-primary: #003DA5; --c-primary-dk: #002d7a; --c-primary-lt: #EBF1FF; --c-primary-rgb: 0, 61, 165; /* Backgrounds */ --c-bg: #F4F6FB; --c-bg-start: #E8EFFE; --c-bg-end: #F4F6FB; --c-surface: #FFFFFF; --c-surface-2: #F0F2F7; --c-surface-3: #E8EBF4; /* Text */ --c-text: #111827; --c-text-2: #374151; --c-muted: #6B7280; --c-muted-2: #9CA3AF; /* Border */ --c-border: #E5E7EB; --c-border-2: #D1D5DB; /* Status */ --c-success: #059669; --c-success-lt: #ECFDF5; --c-success-dk: #065F46; --c-warning: #D97706; --c-warning-lt: #FFFBEB; --c-error: #DC2626; --c-error-lt: #FEF2F2; --c-info: #2563EB; --c-info-lt: #EFF6FF; /* Status badges */ --c-paid: #059669; --c-paid-bg: #ECFDF5; --c-unpaid: #DC2626; --c-unpaid-bg: #FEF2F2; --c-pending: #D97706; --c-pending-bg: #FFFBEB; --c-disconnected: #6B7280; --c-disconnected-bg: #F3F4F6; /* Shadows */ --shadow-xs: 0 1px 2px rgba(0,0,0,0.04); --shadow-sm: 0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04); --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -2px rgba(0,0,0,0.04); --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.04); --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.08), 0 8px 10px -6px rgba(0,0,0,0.04); /* Overlay */ --c-overlay: rgba(0, 0, 0, 0.45); /* Navigation */ --c-nav-bg: #FFFFFF; --c-nav-border: #E5E7EB; /* Radius */ --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-2xl: 24px; --r-full: 9999px; /* Spacing */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; /* Bottom nav height */ --nav-h: 64px; /* App bar height */ --bar-h: 56px; /* Transition */ --transition: 0.2s ease; } /* ── Dark Theme ─────────────────────────────────────────── */ [data-theme="dark"] { --c-primary: #4D8FE0; --c-primary-dk: #3A7ACC; --c-primary-lt: #0D2040; --c-primary-rgb: 77, 143, 224; --c-bg: #0C0F16; --c-bg-start: #090C14; --c-bg-end: #0C0F16; --c-surface: #161A23; --c-surface-2: #1E2330; --c-surface-3: #252B3A; --c-text: #F0F3FA; --c-text-2: #C9D1E0; --c-muted: #8892A4; --c-muted-2: #5C6578; --c-border: #252B3A; --c-border-2: #2E3545; --c-success: #10B981; --c-success-lt: #052E1E; --c-success-dk: #34D399; --c-warning: #F59E0B; --c-warning-lt: #201200; --c-error: #EF4444; --c-error-lt: #2A0A0A; --c-info: #60A5FA; --c-info-lt: #0D1F3E; --c-paid: #10B981; --c-paid-bg: #052E1E; --c-unpaid: #EF4444; --c-unpaid-bg: #2A0A0A; --c-pending: #F59E0B; --c-pending-bg: #201200; --c-disconnected: #8892A4; --c-disconnected-bg: #1E2330; --shadow-xs: 0 1px 2px rgba(0,0,0,0.4); --shadow-sm: 0 1px 3px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.3); --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.5), 0 2px 4px -2px rgba(0,0,0,0.3); --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.6), 0 4px 6px -4px rgba(0,0,0,0.4); --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.6), 0 8px 10px -6px rgba(0,0,0,0.4); --c-overlay: rgba(0, 0, 0, 0.65); --c-nav-bg: #161A23; --c-nav-border: #252B3A; } /* ══════════════════════════════════════════════════════════ DESIGN STYLE OVERRIDES Controls radius, shadows, spacing, and border feel. Usage: Combines freely with data-theme and data-palette. ══════════════════════════════════════════════════════════ */ /* ── Rounded — pill-shaped, soft, friendly ──────────────── */ [data-style="rounded"] { --r-xs: 8px; --r-sm: 14px; --r-md: 20px; --r-lg: 28px; --r-xl: 36px; --r-2xl: 44px; --shadow-xs: 0 2px 6px rgba(0,0,0,0.06); --shadow-sm: 0 2px 8px rgba(0,0,0,0.08); --shadow-md: 0 6px 16px rgba(0,0,0,0.10); --shadow-lg: 0 12px 28px rgba(0,0,0,0.10); --shadow-xl: 0 24px 40px rgba(0,0,0,0.10); } [data-style="rounded"][data-theme="dark"] { --shadow-xs: 0 2px 6px rgba(0,0,0,0.30); --shadow-sm: 0 2px 8px rgba(0,0,0,0.40); --shadow-md: 0 6px 16px rgba(0,0,0,0.50); --shadow-lg: 0 12px 28px rgba(0,0,0,0.55); --shadow-xl: 0 24px 40px rgba(0,0,0,0.55); } /* ── Sharp — zero radius, flat, modern ─────────────────── */ [data-style="sharp"] { --r-xs: 0px; --r-sm: 0px; --r-md: 0px; --r-lg: 0px; --r-xl: 0px; --r-2xl: 0px; --r-full: 0px; --shadow-xs: none; --shadow-sm: none; --shadow-md: none; --shadow-lg: none; --shadow-xl: none; } /* ── Minimal — airy, thin borders, no shadows ───────────── */ [data-style="minimal"] { --r-xs: 2px; --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --r-xl: 10px; --r-2xl: 12px; --shadow-xs: none; --shadow-sm: none; --shadow-md: none; --shadow-lg: none; --shadow-xl: none; --space-xs: 4px; --space-sm: 10px; --space-md: 18px; --space-lg: 28px; --space-xl: 40px; } /* ── Bold — strong shadows, high contrast feel ──────────── */ [data-style="bold"] { --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-2xl: 24px; --shadow-xs: 0 2px 4px rgba(0,0,0,0.14); --shadow-sm: 0 3px 8px rgba(0,0,0,0.18), 0 1px 3px rgba(0,0,0,0.10); --shadow-md: 0 8px 16px rgba(0,0,0,0.20), 0 3px 6px rgba(0,0,0,0.12); --shadow-lg: 0 16px 32px rgba(0,0,0,0.22), 0 6px 12px rgba(0,0,0,0.14); --shadow-xl: 0 28px 48px rgba(0,0,0,0.24), 0 10px 20px rgba(0,0,0,0.14); } [data-style="bold"][data-theme="dark"] { --shadow-xs: 0 2px 4px rgba(0,0,0,0.55); --shadow-sm: 0 3px 8px rgba(0,0,0,0.65), 0 1px 3px rgba(0,0,0,0.45); --shadow-md: 0 8px 16px rgba(0,0,0,0.70), 0 3px 6px rgba(0,0,0,0.50); --shadow-lg: 0 16px 32px rgba(0,0,0,0.75), 0 6px 12px rgba(0,0,0,0.55); --shadow-xl: 0 28px 48px rgba(0,0,0,0.80), 0 10px 20px rgba(0,0,0,0.55); } /* ══════════════════════════════════════════════════════════ PALETTE OVERRIDES Only primary/accent tokens change per palette. Mode (light/dark) is controlled separately via data-theme. Usage: ══════════════════════════════════════════════════════════ */ /* ── Green Palette ──────────────────────────────────────── */ [data-palette="green"] { --c-primary: #0D7A4E; --c-primary-dk: #095C3A; --c-primary-lt: #E8F7F1; --c-primary-rgb: 13, 122, 78; } [data-palette="green"][data-theme="dark"] { --c-primary: #34C98A; --c-primary-dk: #27B578; --c-primary-lt: #052E1C; --c-primary-rgb: 52, 201, 138; } /* ── Purple Palette ─────────────────────────────────────── */ [data-palette="purple"] { --c-primary: #6B21A8; --c-primary-dk: #581C87; --c-primary-lt: #F3E8FF; --c-primary-rgb: 107, 33, 168; } [data-palette="purple"][data-theme="dark"] { --c-primary: #C084FC; --c-primary-dk: #A855F7; --c-primary-lt: #2D0A4E; --c-primary-rgb: 192, 132, 252; } /* ── Orange Palette ─────────────────────────────────────── */ [data-palette="orange"] { --c-primary: #C2410C; --c-primary-dk: #9A3412; --c-primary-lt: #FFF7ED; --c-primary-rgb: 194, 65, 12; } [data-palette="orange"][data-theme="dark"] { --c-primary: #FB923C; --c-primary-dk: #F97316; --c-primary-lt: #3B1200; --c-primary-rgb: 251, 146, 60; } /* ── Teal Palette ───────────────────────────────────────── */ [data-palette="teal"] { --c-primary: #0F766E; --c-primary-dk: #0D5F59; --c-primary-lt: #E6FFFC; --c-primary-rgb: 15, 118, 110; } [data-palette="teal"][data-theme="dark"] { --c-primary: #2DD4BF; --c-primary-dk: #14B8A6; --c-primary-lt: #042F2E; --c-primary-rgb: 45, 212, 191; } /* ── Sky Blue Palette ───────────────────────────────────── */ [data-palette="sky"] { --c-primary: #4E9FE5; --c-primary-dk: #3A8FD5; --c-primary-lt: #EBF5FD; --c-primary-rgb: 78, 159, 229; } [data-palette="sky"][data-theme="dark"] { --c-primary: #7EC8F5; --c-primary-dk: #6AB8EF; --c-primary-lt: #0A2A40; --c-primary-rgb: 126, 200, 245; } /* ══════════════════════════════════════════════════════════ SEASON THEMES Decorative layers — EDC brand colors are preserved. Only festive UI elements (banner, sparkles, fireworks) are added. ══════════════════════════════════════════════════════════ */ /* ── New Year — sparkle / decoration animations ─────────── */ @keyframes ny-twinkle { 0%, 100% { opacity: 0; transform: scale(0.2) rotate(0deg); } 40% { opacity: 1; transform: scale(1) rotate(160deg); } 60% { opacity: 0.8; transform: scale(0.9) rotate(200deg); } } @keyframes ny-glow-text { 0%, 100% { text-shadow: 0 0 8px rgba(255,215,0,0.3); } 50% { text-shadow: 0 0 20px rgba(255,215,0,0.95), 0 0 40px rgba(255,165,0,0.45); } } @keyframes ny-float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-5px); } } .ny-spark { position: absolute; border-radius: 50%; background: #FFD700; box-shadow: 0 0 5px #FFD700, 0 0 10px rgba(255,215,0,0.45); animation: ny-twinkle 2.2s ease-in-out infinite; pointer-events: none; } /* ══════════════════════════════════════════════════════════ CHINESE NEW YEAR — Full festive theme Primary → gold · Background → deep crimson ══════════════════════════════════════════════════════════ */ @keyframes cny-swing { 0%, 100% { transform: rotate(-5deg); transform-origin: top center; } 50% { transform: rotate(5deg); transform-origin: top center; } } @keyframes cny-glow-gold { 0%, 100% { text-shadow: 0 0 6px rgba(255,215,0,0.25); } 50% { text-shadow: 0 0 24px rgba(255,215,0,1), 0 0 48px rgba(255,165,0,0.5); } } @keyframes cny-petal-drift { 0% { transform: translateY(-10px) rotate(0deg); opacity: 0; } 10% { opacity: 0.75; } 90% { opacity: 0.5; } 100% { transform: translateY(120px) rotate(540deg); opacity: 0; } } .cny-lantern-wrap { animation: cny-swing 3.6s ease-in-out infinite; transform-origin: top center; display: inline-block; } .cny-glow-gold { animation: cny-glow-gold 2.6s ease-in-out infinite; } /* ── Chinese New Year — Full theme (light) ───────────────── */ [data-season="cny"] { /* Primary → bright gold (visible on dark red surfaces) */ --c-primary: #D4A820; --c-primary-dk: #A07B10; --c-primary-lt: rgba(212, 168, 32, 0.18); --c-primary-rgb: 212, 168, 32; /* Background → rich orange-red (full screen) */ --c-bg: #C04012; --c-bg-start: #C84812; --c-bg-end: #A03008; /* Surfaces → dark crimson (white text pops on dark cards) */ --c-surface: #4E0C06; --c-surface-2: #400A05; --c-surface-3: #340804; /* Borders → gold tint */ --c-border: rgba(255, 215, 0, 0.20); --c-border-2: rgba(255, 215, 0, 0.32); /* Text → warm white */ --c-text: rgba(255, 250, 225, 0.95); --c-text-2: rgba(255, 235, 200, 0.82); --c-muted: rgba(255, 210, 160, 0.70); --c-muted-2: rgba(255, 185, 120, 0.52); /* Shadows → warm tint */ --shadow-sm: 0 1px 3px rgba(80, 10, 0, 0.25), 0 1px 2px rgba(80, 10, 0, 0.15); --shadow-md: 0 4px 6px -1px rgba(80, 10, 0, 0.30), 0 2px 4px -2px rgba(80, 10, 0, 0.15); } /* ── Chinese New Year — Full theme (dark) ────────────────── */ [data-theme="dark"][data-season="cny"] { --c-primary: #D4A820; --c-primary-dk: #A07B10; --c-primary-lt: rgba(212, 168, 32, 0.16); --c-primary-rgb: 212, 168, 32; --c-bg: #1A0606; --c-bg-start: #1A0606; --c-bg-end: #0E0303; --c-surface: #2E1008; --c-surface-2: #3A1510; --c-surface-3: #461A12; --c-border: rgba(255, 140, 60, 0.12); --c-border-2: rgba(255, 140, 60, 0.20); --c-text: rgba(255, 235, 220, 0.92); --c-text-2: rgba(255, 210, 185, 0.78); --c-muted: rgba(255, 200, 170, 0.72); --c-muted-2: rgba(255, 180, 140, 0.50); } /* ══════════════════════════════════════════════════════════ KHMER NEW YEAR — Full festive theme Primary → warm gold · Background → sky blue + tropical green ══════════════════════════════════════════════════════════ */ @keyframes kny-sway { 0%, 100% { transform: rotate(-4deg) translateY(0); transform-origin: top center; } 50% { transform: rotate(4deg) translateY(-3px); transform-origin: top center; } } @keyframes kny-glow-gold { 0%, 100% { text-shadow: 0 0 8px rgba(228,158,0,0.35); } 50% { text-shadow: 0 0 22px rgba(228,158,0,1), 0 0 44px rgba(255,180,30,0.55); } } @keyframes kny-float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-6px); } } @keyframes kny-petal-drift { 0% { transform: translateY(-20px) translateX(0) rotate(0deg); opacity: 0; } 8% { opacity: 0.9; } 85% { opacity: 0.6; } 100% { transform: translateY(130px) translateX(30px) rotate(720deg); opacity: 0; } } .kny-sway { animation: kny-sway 4s ease-in-out infinite; transform-origin: top center; display: inline-block; } .kny-glow-gold { animation: kny-glow-gold 2.8s ease-in-out infinite; } .kny-float { animation: kny-float 3.2s ease-in-out infinite; } [data-season="kny"] { /* Primary → warm saffron/gold */ --c-primary: #C8740A; --c-primary-dk: #9E5706; --c-primary-lt: #FFF4E0; --c-primary-rgb: 200, 116, 10; /* Background → tropical sky blue fading to teal-green */ --c-bg: #0E6B72; --c-bg-start: #1A9BAD; --c-bg-end: #0B5257; /* Surfaces → warm ivory */ --c-surface: #FDFAF3; --c-surface-2: #F6F0E2; --c-surface-3: #EDE5CE; /* Text stays legible */ --c-text: #1A1200; --c-text-2: #3B2D00; --c-muted: #6B5A30; --c-muted-2: #A08C5A; /* Borders → warm sand */ --c-border: rgba(120, 90, 20, 0.18); --c-border-2: rgba(120, 90, 20, 0.30); /* Nav → deep teal */ --c-nav-bg: rgba(10, 65, 70, 0.95); --c-nav-border: rgba(228, 180, 60, 0.22); /* Nature-tinted shadows */ --shadow-sm: 0 1px 3px rgba(0,60,40,0.12), 0 1px 2px rgba(0,60,40,0.06); --shadow-md: 0 4px 6px -1px rgba(0,60,40,0.14), 0 2px 4px -2px rgba(0,60,40,0.06); --shadow-lg: 0 10px 15px -3px rgba(0,60,40,0.18), 0 4px 6px -4px rgba(0,60,40,0.08); }