@import "tailwindcss" source(none); @source "../src"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); @theme inline { --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --radius-2xl: calc(var(--radius) + 8px); --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-primary-glow: var(--primary-glow); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-success: var(--success); --color-success-foreground: var(--success-foreground); --color-warning: var(--warning); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } :root { --radius: 0.875rem; --background: oklch(0.985 0.005 240); --foreground: oklch(0.18 0.04 260); --card: oklch(1 0 0); --card-foreground: oklch(0.18 0.04 260); --popover: oklch(1 0 0); --popover-foreground: oklch(0.18 0.04 260); --primary: oklch(0.27 0.06 255); --primary-foreground: oklch(0.99 0.005 240); --primary-glow: oklch(0.38 0.10 255); --accent: oklch(0.78 0.16 230); --accent-foreground: oklch(0.18 0.04 260); --secondary: oklch(0.96 0.01 250); --secondary-foreground: oklch(0.27 0.06 255); --muted: oklch(0.96 0.005 250); --muted-foreground: oklch(0.5 0.02 255); --destructive: oklch(0.6 0.22 27); --destructive-foreground: oklch(0.99 0 0); --success: oklch(0.65 0.16 155); --success-foreground: oklch(0.99 0 0); --warning: oklch(0.78 0.16 75); --border: oklch(0.92 0.008 250); --input: oklch(0.92 0.008 250); --ring: oklch(0.38 0.10 255); --gradient-primary: linear-gradient(135deg, var(--primary), var(--primary-glow)); --gradient-accent: linear-gradient(135deg, var(--primary-glow), var(--accent)); --gradient-wallet: linear-gradient(135deg, oklch(from var(--primary) calc(l * 0.62) c h) 0%, var(--primary) 48%, var(--primary-glow) 100%); --shadow-card: 0 4px 24px -8px oklch(from var(--primary) l c h / 0.18); --shadow-elevated: 0 16px 48px -16px oklch(from var(--primary) l c h / 0.28); --sidebar: var(--primary); --sidebar-foreground: var(--primary-foreground); --sidebar-primary: var(--accent); --sidebar-primary-foreground: var(--primary); --sidebar-accent: var(--primary-glow); --sidebar-accent-foreground: var(--primary-foreground); --sidebar-border: var(--primary-glow); --sidebar-ring: var(--accent); } /* === 8 Professional Themes — switched via [data-theme=""] on === */ [data-theme="ocean"] { /* Billsline navy (default) */ --primary: oklch(0.27 0.06 255); --primary-glow: oklch(0.38 0.10 255); --accent: oklch(0.78 0.16 230); --ring: oklch(0.38 0.10 255); } [data-theme="emerald"] { --primary: oklch(0.42 0.13 158); --primary-glow: oklch(0.55 0.14 160); --accent: oklch(0.82 0.13 165); --ring: oklch(0.55 0.14 160); } [data-theme="royal"] { --primary: oklch(0.38 0.18 285); --primary-glow: oklch(0.50 0.21 290); --accent: oklch(0.78 0.16 320); --ring: oklch(0.50 0.21 290); } [data-theme="sunset"] { --primary: oklch(0.55 0.20 30); --primary-glow: oklch(0.68 0.19 45); --accent: oklch(0.85 0.14 80); --ring: oklch(0.68 0.19 45); } [data-theme="midnight"] { --primary: oklch(0.20 0.04 270); --primary-glow: oklch(0.32 0.07 270); --accent: oklch(0.72 0.18 210); --ring: oklch(0.32 0.07 270); } [data-theme="rose"] { --primary: oklch(0.50 0.18 10); --primary-glow: oklch(0.62 0.18 15); --accent: oklch(0.82 0.12 25); --ring: oklch(0.62 0.18 15); } [data-theme="opay"] { /* OPay-inspired teal/lime */ --primary: oklch(0.45 0.13 165); --primary-glow: oklch(0.58 0.15 160); --accent: oklch(0.85 0.16 130); --ring: oklch(0.58 0.15 160); } [data-theme="charcoal"] { --primary: oklch(0.25 0.01 240); --primary-glow: oklch(0.40 0.02 240); --accent: oklch(0.75 0.14 75); --ring: oklch(0.40 0.02 240); } .dark { --background: oklch(0.15 0.03 260); --foreground: oklch(0.98 0.005 240); --card: oklch(0.21 0.04 258); --card-foreground: oklch(0.98 0.005 240); --popover: oklch(0.21 0.04 258); --popover-foreground: oklch(0.98 0.005 240); --primary: oklch(0.78 0.16 230); --primary-foreground: oklch(0.15 0.03 260); --primary-glow: oklch(0.65 0.18 235); --secondary: oklch(0.26 0.04 258); --secondary-foreground: oklch(0.98 0.005 240); --muted: oklch(0.26 0.04 258); --muted-foreground: oklch(0.7 0.03 255); --accent: oklch(0.32 0.07 255); --accent-foreground: oklch(0.98 0.005 240); --destructive: oklch(0.65 0.22 27); --border: oklch(1 0 0 / 12%); --input: oklch(1 0 0 / 15%); --ring: oklch(0.78 0.16 230); } /* === Per-theme dark palettes — every light theme gets its own night mode, so no theme falls back to a single static dark colour set. === */ .dark[data-theme="ocean"] { --background: oklch(0.15 0.03 258); --card: oklch(0.21 0.04 258); --popover: oklch(0.21 0.04 258); --secondary: oklch(0.26 0.04 258); --muted: oklch(0.26 0.04 258); --muted-foreground: oklch(0.72 0.03 250); --primary: oklch(0.78 0.15 230); --primary-glow: oklch(0.66 0.17 235); --accent: oklch(0.34 0.07 245); --ring: oklch(0.78 0.15 230); } .dark[data-theme="emerald"] { --background: oklch(0.15 0.03 165); --card: oklch(0.20 0.04 165); --popover: oklch(0.20 0.04 165); --secondary: oklch(0.25 0.04 165); --muted: oklch(0.25 0.04 165); --muted-foreground: oklch(0.74 0.03 165); --primary: oklch(0.78 0.15 162); --primary-glow: oklch(0.66 0.15 160); --accent: oklch(0.33 0.06 165); --ring: oklch(0.78 0.15 162); } .dark[data-theme="royal"] { --background: oklch(0.16 0.04 290); --card: oklch(0.22 0.05 290); --popover: oklch(0.22 0.05 290); --secondary: oklch(0.27 0.05 290); --muted: oklch(0.27 0.05 290); --muted-foreground: oklch(0.75 0.04 292); --primary: oklch(0.76 0.16 295); --primary-glow: oklch(0.64 0.19 292); --accent: oklch(0.36 0.09 300); --ring: oklch(0.76 0.16 295); } .dark[data-theme="sunset"] { --background: oklch(0.16 0.03 40); --card: oklch(0.22 0.04 38); --popover: oklch(0.22 0.04 38); --secondary: oklch(0.27 0.04 38); --muted: oklch(0.27 0.04 38); --muted-foreground: oklch(0.76 0.04 50); --primary: oklch(0.78 0.16 55); --primary-glow: oklch(0.68 0.18 40); --accent: oklch(0.36 0.08 45); --ring: oklch(0.78 0.16 55); } .dark[data-theme="midnight"] { --background: oklch(0.12 0.03 270); --card: oklch(0.18 0.04 270); --popover: oklch(0.18 0.04 270); --secondary: oklch(0.23 0.04 270); --muted: oklch(0.23 0.04 270); --muted-foreground: oklch(0.72 0.03 265); --primary: oklch(0.74 0.16 212); --primary-glow: oklch(0.62 0.16 216); --accent: oklch(0.30 0.06 250); --ring: oklch(0.74 0.16 212); } .dark[data-theme="rose"] { --background: oklch(0.16 0.03 15); --card: oklch(0.22 0.04 14); --popover: oklch(0.22 0.04 14); --secondary: oklch(0.27 0.04 14); --muted: oklch(0.27 0.04 14); --muted-foreground: oklch(0.76 0.04 18); --primary: oklch(0.77 0.14 18); --primary-glow: oklch(0.66 0.16 15); --accent: oklch(0.35 0.08 20); --ring: oklch(0.77 0.14 18); } .dark[data-theme="opay"] { --background: oklch(0.14 0.03 168); --card: oklch(0.20 0.04 168); --popover: oklch(0.20 0.04 168); --secondary: oklch(0.25 0.04 168); --muted: oklch(0.25 0.04 168); --muted-foreground: oklch(0.74 0.03 165); --primary: oklch(0.82 0.17 145); --primary-glow: oklch(0.70 0.16 158); --accent: oklch(0.34 0.07 150); --ring: oklch(0.82 0.17 145); } .dark[data-theme="charcoal"] { --background: oklch(0.14 0.005 240); --card: oklch(0.20 0.008 240); --popover: oklch(0.20 0.008 240); --secondary: oklch(0.25 0.008 240); --muted: oklch(0.25 0.008 240); --muted-foreground: oklch(0.74 0.01 240); --primary: oklch(0.80 0.13 78); --primary-glow: oklch(0.68 0.13 72); --accent: oklch(0.32 0.02 240); --ring: oklch(0.80 0.13 78); } @layer base { * { border-color: var(--color-border); } body { background-color: var(--color-background); color: var(--color-foreground); font-feature-settings: "rlig" 1, "calt" 1; -webkit-font-smoothing: antialiased; } } @layer utilities { .bg-gradient-primary { background-image: var(--gradient-primary); } .bg-gradient-accent { background-image: var(--gradient-accent); } .bg-gradient-wallet { background-image: var(--gradient-wallet); } .shadow-card { box-shadow: var(--shadow-card); } .shadow-elevated { box-shadow: var(--shadow-elevated); } .safe-bottom { padding-bottom: max(env(safe-area-inset-bottom), 0.5rem); } @keyframes bl-pulse-ring { 0% { transform: scale(0.85); opacity: 0.7 } 70% { transform: scale(1.4); opacity: 0 } 100% { opacity: 0 } } .animate-pulse-ring { animation: bl-pulse-ring 1.6s cubic-bezier(0.215,0.61,0.355,1) infinite; } @keyframes bl-shimmer { 0% { transform: translateX(-120%) } 100% { transform: translateX(320%) } } .animate-brand-shimmer { animation: bl-shimmer 1.4s ease-in-out infinite; } }