/* ────────────────────────────────────────────────────────── BRAD palette tokens — shared by splash, finance, fund, login. RGB triplets so Tailwind opacity-modifier syntax works: style="color: rgb(var(--text) / 0.6)" Default = verdigris dark. Set data-theme="light" on to switch. Set data-palette="" to swap to another palette (rose-gold, copper, gold, silver, platinum, rhodium). ────────────────────────────────────────────────────────── */ :root { --bg: 8 18 16; --bg-1: 13 28 24; --bg-2: 19 39 33; --bg-3: 28 54 44; --border: 35 70 57; --border-soft: 15 38 32; --text: 216 239 231; --text-muted: 124 181 160; --text-faint: 78 133 115; --accent: 42 138 112; --accent-hot: 122 229 201; --accent-soft: 20 58 48; --on-accent: 8 18 16; --glass-bg: 13 28 24; --glass-border: 35 70 57; } [data-palette="rose-gold"] { --bg: 20 15 15; --bg-1: 30 23 23; --bg-2: 42 32 32; --bg-3: 54 40 40; --border: 74 52 52; --border-soft: 45 33 33; --text: 245 231 228; --text-muted: 200 165 160; --text-faint: 143 111 107; --accent: 217 112 130; --accent-hot: 255 194 188; --accent-soft: 106 58 66; } [data-palette="copper"] { --bg: 20 12 6; --bg-1: 31 20 10; --bg-2: 42 28 16; --bg-3: 56 38 24; --border: 77 52 24; --border-soft: 42 28 14; --text: 245 228 207; --text-muted: 192 154 102; --text-faint: 138 109 66; --accent: 192 106 38; --accent-hot: 242 193 103; --accent-soft: 74 45 16; } [data-palette="gold"] { --bg: 18 15 5; --bg-1: 28 23 10; --bg-2: 38 31 16; --bg-3: 50 41 24; --border: 67 55 36; --border-soft: 37 30 16; --text: 244 236 214; --text-muted: 185 165 122; --text-faint: 135 118 84; --accent: 229 200 91; --accent-hot: 247 223 125; --accent-soft: 74 61 26; } [data-palette="verdigris"] { --bg: 8 18 16; --bg-1: 13 28 24; --bg-2: 19 39 33; --bg-3: 28 54 44; --border: 35 70 57; --border-soft: 15 38 32; --text: 216 239 231; --text-muted: 124 181 160; --text-faint: 78 133 115; --accent: 42 138 112; --accent-hot: 122 229 201; --accent-soft: 20 58 48; } [data-palette="silver"] { --bg: 13 16 22; --bg-1: 21 26 34; --bg-2: 30 37 49; --bg-3: 43 53 67; --border: 56 70 90; --border-soft: 26 33 48; --text: 231 238 246; --text-muted: 152 168 191; --text-faint: 101 115 137; --accent: 106 143 176; --accent-hot: 226 235 244; --accent-soft: 42 57 76; } [data-palette="platinum"] { --bg: 12 14 21; --bg-1: 21 24 35; --bg-2: 29 33 48; --bg-3: 43 49 66; --border: 60 68 100; --border-soft: 25 30 47; --text: 232 236 248; --text-muted: 156 167 200; --text-faint: 106 117 158; --accent: 106 122 166; --accent-hot: 218 224 239; --accent-soft: 40 46 72; } [data-palette="rhodium"] { --bg: 17 8 26; --bg-1: 28 16 40; --bg-2: 39 24 55; --bg-3: 55 35 72; --border: 74 52 95; --border-soft: 31 18 48; --text: 236 224 245; --text-muted: 178 156 197; --text-faint: 127 104 145; --accent: 138 106 176; --accent-hot: 226 209 240; --accent-soft: 58 42 80; } /* Light overlays — verified contrast. */ [data-theme="light"] { --on-accent: 255 255 255; } [data-theme="light"][data-palette="rose-gold"] { --bg: 253 244 243; --bg-1: 255 255 255; --bg-2: 250 236 234; --bg-3: 245 222 220; --border: 234 213 210; --border-soft: 245 229 226; --text: 42 26 26; --text-muted: 106 76 74; --text-faint: 154 126 124; --accent: 184 85 102; --accent-hot: 217 112 130; --accent-soft: 250 209 207; } [data-theme="light"][data-palette="copper"] { --bg: 253 246 236; --bg-1: 255 255 255; --bg-2: 250 238 216; --bg-3: 244 226 192; --border: 232 208 168; --border-soft: 245 231 207; --text: 42 30 14; --text-muted: 106 80 48; --text-faint: 154 125 78; --accent: 160 84 24; --accent-hot: 192 106 38; --accent-soft: 245 220 180; } [data-theme="light"][data-palette="gold"] { --bg: 253 249 237; --bg-1: 255 255 255; --bg-2: 250 241 212; --bg-3: 242 230 181; --border: 230 214 136; --border-soft: 245 236 200; --text: 42 35 16; --text-muted: 106 90 48; --text-faint: 154 138 84; --accent: 168 139 28; --accent-hot: 201 146 22; --accent-soft: 245 232 168; } [data-theme="light"], [data-theme="light"][data-palette="verdigris"] { --bg: 238 250 245; --bg-1: 255 255 255; --bg-2: 216 241 230; --bg-3: 189 231 211; --border: 141 208 180; --border-soft: 213 240 227; --text: 14 38 32; --text-muted: 48 106 88; --text-faint: 90 154 132; --accent: 26 112 85; --accent-hot: 42 138 112; --accent-soft: 198 236 218; } [data-theme="light"][data-palette="silver"] { --bg: 243 246 251; --bg-1: 255 255 255; --bg-2: 229 236 245; --bg-3: 210 220 233; --border: 168 187 210; --border-soft: 220 227 238; --text: 16 22 32; --text-muted: 64 90 120; --text-faint: 112 138 168; --accent: 74 109 144; --accent-hot: 106 143 176; --accent-soft: 218 228 240; } [data-theme="light"][data-palette="platinum"] { --bg: 242 243 249; --bg-1: 255 255 255; --bg-2: 228 231 241; --bg-3: 209 213 230; --border: 168 175 207; --border-soft: 220 224 236; --text: 16 18 37; --text-muted: 61 69 112; --text-faint: 106 115 160; --accent: 74 85 133; --accent-hot: 106 122 166; --accent-soft: 218 223 240; } [data-theme="light"][data-palette="rhodium"] { --bg: 248 241 250; --bg-1: 255 255 255; --bg-2: 239 226 243; --bg-3: 225 206 232; --border: 196 165 207; --border-soft: 236 219 240; --text: 31 14 42; --text-muted: 80 54 106; --text-faint: 128 96 151; --accent: 106 74 144; --accent-hot: 138 106 176; --accent-soft: 232 214 240; } html { color-scheme: dark; } html[data-theme="light"] { color-scheme: light; } body.brad-themed { background-color: rgb(var(--bg)); color: rgb(var(--text)); transition: background-color 200ms ease, color 200ms ease; } /* Utility classes */ .bg-app { background-color: rgb(var(--bg)); } .bg-1 { background-color: rgb(var(--bg-1)); } .bg-2 { background-color: rgb(var(--bg-2)); } .bg-3 { background-color: rgb(var(--bg-3)); } .t { color: rgb(var(--text)); } .tm { color: rgb(var(--text-muted)); } .tf { color: rgb(var(--text-faint)); } .ta { color: rgb(var(--accent)); } .ta-hot { color: rgb(var(--accent-hot)); } .border-app { border-color: rgb(var(--border)); } .border-soft { border-color: rgb(var(--border-soft)); } .border-top-soft { border-top: 1px solid rgb(var(--border-soft)); } .border-accent-40 { border-color: rgb(var(--accent) / 0.4); } .btn-primary { background-color: rgb(var(--accent)); color: rgb(var(--on-accent)); transition: background-color 160ms ease; } .btn-primary:hover { background-color: rgb(var(--accent-hot)); } /* Theme toggle pill — used by all themed pages */ .brad-theme-toggle { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.65rem; border-radius: 9999px; border: 1px solid rgb(var(--border)); background: rgb(var(--bg-1) / 0.7); color: rgb(var(--text-muted)); font-size: 0.7rem; cursor: pointer; transition: background-color 160ms, color 160ms, border-color 160ms; backdrop-filter: blur(6px); } .brad-theme-toggle:hover { background: rgb(var(--bg-2)); color: rgb(var(--text)); border-color: rgb(var(--accent) / 0.4); } .brad-theme-toggle svg { width: 0.95rem; height: 0.95rem; } /* Palette popover (optional — only some pages enable) */ .brad-palette-pop { display: none; position: absolute; top: 2.5rem; right: 0; background: rgb(var(--bg-1)); border: 1px solid rgb(var(--border)); border-radius: 0.75rem; padding: 0.6rem; z-index: 50; box-shadow: 0 12px 24px rgb(0 0 0 / 0.25); } .brad-palette-pop.open { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.4rem; } .brad-palette-chip { width: 1.4rem; height: 1.4rem; border-radius: 9999px; border: 2px solid rgb(var(--border-soft)); cursor: pointer; transition: transform 120ms; } .brad-palette-chip:hover { transform: scale(1.12); } .brad-palette-chip.active { border-color: rgb(var(--accent-hot)); }