/* uPaid theme tokens — light (:root) and dark (.dark on ). Values are R G B channels so Tailwind's rgb(var(--x) / ) opacity utilities keep working. */ :root { --primary: 0 97 97; --primary-container: 14 124 123; --on-primary: 255 255 255; --on-primary-container: 195 255 253; --primary-fixed: 152 242 240; --secondary: 174 49 21; --secondary-container: 253 106 73; --on-secondary: 255 255 255; --on-secondary-container: 100 15 0; --tertiary: 0 101 41; --tertiary-container: 0 129 55; --on-tertiary: 255 255 255; --on-tertiary-container: 212 255 212; --error: 186 26 26; --error-container: 255 218 214; --on-error: 255 255 255; --on-error-container: 147 0 10; --background: 250 248 255; --on-background: 19 27 46; --surface: 250 248 255; --surface-container-lowest: 255 255 255; --surface-container-low: 242 243 255; --surface-container: 234 237 255; --surface-container-high: 226 231 255; --surface-container-highest: 218 226 253; --on-surface: 19 27 46; --on-surface-variant: 62 73 72; --outline: 110 121 121; --outline-variant: 189 201 200; } .dark { --primary: 124 213 211; --primary-container: 0 80 79; --on-primary: 0 32 32; --on-primary-container: 195 255 253; --primary-fixed: 152 242 240; --secondary: 255 180 163; --secondary-container: 253 106 73; --on-secondary: 255 255 255; --on-secondary-container: 255 218 210; --tertiary: 98 223 125; --tertiary-container: 0 129 55; --on-tertiary: 255 255 255; --on-tertiary-container: 212 255 212; --error: 255 180 171; --error-container: 147 0 10; --on-error: 105 0 5; --on-error-container: 255 218 214; --background: 16 20 26; --on-background: 225 229 236; --surface: 16 20 26; --surface-container-lowest: 11 14 18; --surface-container-low: 24 29 36; --surface-container: 28 33 41; --surface-container-high: 36 42 51; --surface-container-highest: 44 51 61; --on-surface: 225 229 236; --on-surface-variant: 178 187 195; --outline: 138 147 155; --outline-variant: 66 74 82; } /* page frame background (outside the phone) */ body { background: #eef0f5; } .dark body { background: #05070a; } /* liquid-glass bottom nav needs a dark surface in dark mode */ .dark nav.fixed { background: rgb(28 33 41 / 0.78) !important; border-top-color: rgb(66 74 82 / 0.6) !important; } /* keep white QR panels readable in dark */ .dark .qr-keep-light { background: #ffffff !important; }