/* ============================================================ MYDROP AMBIENT THEME TOKENS (app) ============================================================ Same system as mydrop-site/src/theme.css — single control point for the ambient color mood. Brand colors (buttons, --brand-gradient, --purple-dark accents, selected states) are NOT themed and stay in menu.css. Ambient = atmosphere only: body floor glow, loading screen radials, auth/pricing page washes, public portal backgrounds, hover sheens. Channels are space-separated R G B triplets consumed as rgb(var(--amb-x) / alpha). THE ONE-WORD TOGGLE lives in server.py (AMBIENT_THEME) and is injected as data-ambient on in every template. Values: "graphite" | "pink" | "violet" | "blue" (graphite is also the default when the attribute is absent or unknown). Live-test in the console: document.documentElement.dataset.ambient = "violet" Presets restore the dominant layers exactly; micro-tints reuse graphite-tuned alphas and stay close. ============================================================ */ :root { /* ---- ambient channels: GRAPHITE (default) ---- */ --amb-1: 170 180 212; /* primary ambient (was brand pink) */ --amb-2: 148 163 255; /* secondary ambient (was brand purple) */ --amb-3: 154 216 255; /* tertiary ambient (was brand blue) */ --amb-sheen: 190 200 230; /* hover/focus borders, card sheens */ --amb-deep: 100 116 139; /* accents sitting on light surfaces */ /* ---- body floor glow trio (bottom ellipses) ---- */ --amb-floor-a1: 0.26; --amb-floor-a2: 0.24; --amb-floor-a3: 0.2; /* ---- tinted white for light surfaces ---- */ --surface-tint: 251 252 254; } html[data-theme="light"] { --amb-1: 120 134 180; --amb-2: 120 134 180; --amb-3: 120 134 180; --amb-sheen: 120 134 180; --amb-floor-a1: 0.1; --amb-floor-a2: 0.09; --amb-floor-a3: 0.08; } /* "graphite" is the default — this block just documents it as an explicit data-ambient value; unknown values also fall back here. */ html[data-ambient="graphite"] { } /* ============================================================ PRESET: CREAM — warm sand. The chat wallpaper reads like paper with it, and --amb-deep stays dark enough to carry white text. ============================================================ */ html[data-ambient="cream"] { --amb-1: 214 190 160; --amb-2: 198 168 133; --amb-3: 232 214 190; --amb-sheen: 226 205 178; --amb-deep: 138 106 79; --amb-floor-a1: 0.34; --amb-floor-a2: 0.3; --amb-floor-a3: 0.26; --surface-tint: 253 250 245; } html[data-theme="light"][data-ambient="cream"] { --amb-1: 186 158 124; --amb-2: 186 158 124; --amb-3: 186 158 124; --amb-sheen: 186 158 124; --amb-floor-a1: 0.12; --amb-floor-a2: 0.1; --amb-floor-a3: 0.09; } /* ============================================================ PRESET: PINK — the original look, for comparison/rollback ============================================================ */ html[data-ambient="pink"] { --amb-1: 230 52 108; --amb-2: 192 0 245; --amb-3: 29 155 240; --amb-sheen: 245 125 255; --amb-deep: 230 52 108; --amb-floor-a1: 0.58; --amb-floor-a2: 0.52; --amb-floor-a3: 0.5; --surface-tint: 255 247 253; } html[data-theme="light"][data-ambient="pink"] { /* original app had no light softening of the floor glow */ --amb-floor-a1: 0.58; --amb-floor-a2: 0.52; --amb-floor-a3: 0.5; } /* ============================================================ PRESET: VIOLET — purple end of the brand gradient, deepened ============================================================ */ html[data-ambient="violet"] { --amb-1: 99 102 241; --amb-2: 139 92 246; --amb-3: 154 216 255; --amb-sheen: 167 160 255; --amb-deep: 109 40 217; --amb-floor-a1: 0.52; --amb-floor-a2: 0.46; --amb-floor-a3: 0.42; --surface-tint: 248 247 255; } html[data-theme="light"][data-ambient="violet"] { --amb-floor-a1: 0.12; --amb-floor-a2: 0.11; --amb-floor-a3: 0.1; } /* ============================================================ PRESET: BLUE — brand blue leads, maximum CTA contrast ============================================================ */ html[data-ambient="blue"] { --amb-1: 29 155 240; --amb-2: 79 70 229; --amb-3: 154 216 255; --amb-sheen: 150 190 255; --amb-deep: 0 86 214; --amb-floor-a1: 0.5; --amb-floor-a2: 0.44; --amb-floor-a3: 0.4; --surface-tint: 246 249 255; } html[data-theme="light"][data-ambient="blue"] { --amb-floor-a1: 0.1; --amb-floor-a2: 0.09; --amb-floor-a3: 0.08; } /* ============================================================ AMBIENT ACCENT — secondary emphasis follows the App Style ============================================================ The brand gradient stays fixed and is reserved for identity moments (main Create CTA, logo, upgrade CTAs). Everything of lesser importance — active states, meters, section icons, chart lines, focus rings — reads these instead, so the app follows the user's App Style choice. Two accent roles, because one value cannot do both jobs: --accent-ui text, icons, strokes, chart lines, bar fills — nothing sits on top of it, so it wants to be BRIGHT on dark and DEEP on light. --accent-ui-fill solid fills that carry WHITE text. Always --amb-deep: measured across all 4 presets it is the only channel clearing 4.1:1 against white in BOTH themes (--amb-1 drops to 2.06:1 on graphite and 3.0:1 on blue, which would be unreadable). Measured white-on-fill: blue 6.36, graphite 4.76, violet 7.10, pink 4.14. Measured --accent-ui as text: dark 3.65–7.91, light 4.14–7.10. ============================================================ */ /* --accent-ui is the workhorse. The old fixed accent had to serve BOTH as a mark (text/icon/border on a dark surface) AND as a filled button carrying white text. Neither ambient channel alone does both on dark: --amb-1 is bright (great as a mark, but only 2.06:1 under white text on graphite) and --amb-deep is deep (great under white text, 1.8:1 as a mark). The dark value below is a 50/50 blend of the two, which clears ~3:1 in both roles for every preset. Measured (mark on #1D1F2E / white text on it): blue #0E78E3 3.76 / 4.34 graphite #8794B0 5.35 / 3.05 violet #6847E5 2.81 / 5.80 pink #E6346C 3.94 / 4.14 On light surfaces --amb-deep is correct for every role, so it is used as-is. Written as explicit hex, NOT color-mix(): mydropReport.js reads --accent through getComputedStyle and hands it to Chart.js, which cannot parse a color-mix() token stream. Keep these literal. Use --accent-ui-mark / --accent-ui-fill when a spot is clearly one role only and deserves the stronger value. */ :root { --accent-ui: #8794B0; /* graphite, dark */ --accent-ui-mark: rgb(var(--amb-1)); --accent-ui-fill: rgb(var(--amb-deep)); --accent-ui-soft: rgb(var(--amb-1) / 0.12); --accent-ui-border: rgb(var(--amb-1) / 0.35); --accent-ui-glow: rgb(var(--amb-1) / 0.28); } html[data-theme="light"] { --accent-ui: #64748B; /* graphite, light */ --accent-ui-mark: rgb(var(--amb-deep)); --accent-ui-fill: rgb(var(--amb-deep)); --accent-ui-soft: rgb(var(--amb-deep) / 0.10); --accent-ui-border: rgb(var(--amb-deep) / 0.30); --accent-ui-glow: rgb(var(--amb-deep) / 0.20); } /* Per-preset accents. The light value must live in the more specific [data-theme][data-ambient] block: html[data-ambient=X] and html[data-theme=light] have equal specificity, and the ambient block comes later in this file, so it would otherwise win in light mode too. */ /* Ambient gradient for accent surfaces. Anchored on --amb-deep because EVERY consumer carries white text/glyphs on it (feature primary buttons, the light-theme icon tile). An --amb-1 first stop measured 2.06:1 under white on graphite and 3.00:1 on blue. Reaching 25% toward --amb-2 keeps a real two-hue sweep without dropping the second stop below the pink baseline's own 4.14:1. Measured white-on-stops: graphite 4.76/3.94 · pink 4.14/4.43 violet 7.10/6.29 · blue 6.36/6.47 */ :root { --accent-ui-gradient: linear-gradient(135deg, rgb(var(--amb-deep)), color-mix(in srgb, rgb(var(--amb-deep)) 75%, rgb(var(--amb-2)))); } html[data-ambient="graphite"] { --accent-ui: #8794B0; } html[data-theme="light"][data-ambient="graphite"] { --accent-ui: #64748B; } html[data-ambient="pink"] { --accent-ui: #E6346C; } html[data-theme="light"][data-ambient="pink"] { --accent-ui: #E6346C; } html[data-ambient="violet"] { --accent-ui: #7355E8; } /* mark 3.26 · white-on 5.01 (was #6847E5 = 2.81) */ html[data-theme="light"][data-ambient="violet"] { --accent-ui: #6D28D9; } html[data-ambient="cream"] { --accent-ui: #A98363; } html[data-theme="light"][data-ambient="cream"] { --accent-ui: #8A6A4F; } /* white-on 4.79 */ html[data-ambient="blue"] { --accent-ui: #0E78E3; } html[data-theme="light"][data-ambient="blue"] { --accent-ui: #0056D6; }