/* App color palettes. Source of truth for the in-app theme picker AND for theming Clerk's embedded sign-in/sign-up forms. Default = dark. Theme is set via [data-theme="..."] on (JS-driven). */ :root { --bg: #08090A; --card: #131416; --surface-2: #1A1B1E; --text: #F4F4F5; --muted: #8A8F98; --line: #1F2023; --line-2: #2A2B2F; --accent: #6E79D6; --accent-hover: #5763C7; --accent-tint: rgba(110, 121, 214, 0.15); --good: #4CB782; --warn: #EB5757; --warn-tint: rgba(235, 87, 87, 0.12); --good-tint: rgba(76, 183, 130, 0.12); --shadow-card: 0 2px 14px rgba(0, 0, 0, 0.40); --shadow-modal: 0 24px 60px rgba(0, 0, 0, 0.60); --shadow-toast: 0 8px 24px rgba(0, 0, 0, 0.45); --column-pending-bg: #10121A; --column-pending-border: rgba(110, 121, 214, 0.35); --pill-other-bg: rgba(255, 255, 255, 0.06); --pill-other-fg: var(--muted); --pill-chase-bg: rgba(91, 155, 255, 0.10); --pill-chase-fg: #6FA0F5; --pill-bofa-bg: rgba(235, 87, 87, 0.12); --pill-bofa-fg: #FF8A8A; --pill-wells-bg: rgba(255, 165, 107, 0.10); --pill-wells-fg: #FFB17B; color-scheme: dark; } [data-theme="light"] { --bg: #FBF6EE; --card: #FFFFFF; --surface-2: #F4EEE2; --text: #2A2622; --muted: #8A7F73; --line: #EFE6D6; --line-2: #E1D5BD; --accent: #D78F6E; --accent-hover: #C57E5E; --accent-tint: rgba(215, 143, 110, 0.20); --good: #6FA08A; --warn: #E07A66; --warn-tint: rgba(224, 122, 102, 0.10); --good-tint: rgba(111, 160, 138, 0.10); --shadow-card: 0 2px 14px rgba(80, 60, 40, 0.04); --shadow-modal: 0 24px 60px rgba(0, 0, 0, 0.18); --shadow-toast: 0 8px 24px rgba(0, 0, 0, 0.18); --column-pending-bg: #FFF7EE; --column-pending-border: #E8C9A8; --pill-other-bg: #EEE8DD; --pill-other-fg: #7A6B53; --pill-chase-bg: #E0EAF7; --pill-chase-fg: #117ACA; --pill-bofa-bg: #FAE0E0; --pill-bofa-fg: #C32027; --pill-wells-bg: #FFEEDD; --pill-wells-fg: #B00000; color-scheme: light; } [data-theme="linear"] { --bg: #0A0A0B; --card: #111112; --surface-2: #161618; --text: #EEEEEF; --muted: #888890; --line: #1C1C1F; --line-2: #242427; --accent: #5E6AD2; --accent-hover: #4A56C2; --accent-tint: rgba(94, 106, 210, 0.15); --good: #4ADE80; --warn: #F87171; --warn-tint: rgba(248, 113, 113, 0.12); --good-tint: rgba(74, 222, 128, 0.12); --shadow-card: 0 2px 14px rgba(0,0,0,0.45); --shadow-modal: 0 24px 60px rgba(0,0,0,0.65); --shadow-toast: 0 8px 24px rgba(0,0,0,0.50); --column-pending-bg: #0E0E14; --column-pending-border: rgba(94, 106, 210, 0.35); --pill-other-bg: rgba(255,255,255,0.06); --pill-other-fg: #888890; --pill-chase-bg: rgba(91,155,255,0.10); --pill-chase-fg: #6FA0F5; --pill-bofa-bg: rgba(235,87,87,0.12); --pill-bofa-fg: #FF8A8A; --pill-wells-bg: rgba(255,165,107,0.10); --pill-wells-fg: #FFB17B; color-scheme: dark; } [data-theme="ocean"] { --bg: #060B10; --card: #0D1520; --surface-2: #111D2C; --text: #E2EDF7; --muted: #6B8DA8; --line: #162133; --line-2: #1E2F45; --accent: #38BDF8; --accent-hover: #0EA5E9; --accent-tint: rgba(56, 189, 248, 0.15); --good: #34D399; --warn: #F87171; --warn-tint: rgba(248, 113, 113, 0.12); --good-tint: rgba(52, 211, 153, 0.12); --shadow-card: 0 2px 14px rgba(0,0,0,0.45); --shadow-modal: 0 24px 60px rgba(0,0,0,0.65); --shadow-toast: 0 8px 24px rgba(0,0,0,0.50); --column-pending-bg: #091018; --column-pending-border: rgba(56, 189, 248, 0.30); --pill-other-bg: rgba(255,255,255,0.06); --pill-other-fg: #6B8DA8; --pill-chase-bg: rgba(56,189,248,0.12); --pill-chase-fg: #38BDF8; --pill-bofa-bg: rgba(248,113,113,0.12); --pill-bofa-fg: #F87171; --pill-wells-bg: rgba(251,191,36,0.10); --pill-wells-fg: #FBBF24; color-scheme: dark; } [data-theme="slate"] { --bg: #F8FAFC; --card: #FFFFFF; --surface-2: #F1F5F9; --text: #0F172A; --muted: #64748B; --line: #E2E8F0; --line-2: #CBD5E1; --accent: #6366F1; --accent-hover: #4F46E5; --accent-tint: rgba(99, 102, 241, 0.15); --good: #10B981; --warn: #EF4444; --warn-tint: rgba(239, 68, 68, 0.10); --good-tint: rgba(16, 185, 129, 0.10); --shadow-card: 0 2px 14px rgba(15,23,42,0.06); --shadow-modal: 0 24px 60px rgba(15,23,42,0.20); --shadow-toast: 0 8px 24px rgba(15,23,42,0.16); --column-pending-bg: #EEF2FF; --column-pending-border: #C7D2FE; --pill-other-bg: #F1F5F9; --pill-other-fg: #64748B; --pill-chase-bg: #DBEAFE; --pill-chase-fg: #2563EB; --pill-bofa-bg: #FEE2E2; --pill-bofa-fg: #DC2626; --pill-wells-bg: #FEF3C7; --pill-wells-fg: #D97706; color-scheme: light; }