/* 3 Clicks Cloud brand theme – light. Extracted from live Wix site (theme palette --color_16..20, --color_40..43) plus supplied logo SVG. Hex literals permitted here: this file is a token definition block, same role as stylechain-tokens.css :root. Applied when CloudFront sets . */ :root[data-brand="3clicks"]{ /* ---- Brand ---- */ --blue:#004AAD; /* Wix color_18 – confirmed CTA/button colour */ --blue-hover:#003A96; /* Wix color_19 */ --blue-deep:#001D4B; /* Wix color_20 */ --blue-tint:#037FFF; --link-on-surface:#0056C7; /* link on light surface – 6.0:1 on white */ /* logo blue dot – bright accent */ --blue-rgb:0,74,173; --blue-tint-rgb:3,127,255; /* ---- Surfaces (light) ---- */ --bg:#FFFFFF; --bg-2:#F7F9FC; --bg-deep:#E5F0FE; /* Wix color_16 */ --bg-tile:#F2F6FD; --card:#FFFFFF; --border:#C7C7C7; --bar-dim:#E0E0E0; /* inactive chart bar – keeps 11px label at 5.31:1 */ /* Wix color_13 */ --bg-rgb:255,255,255; --border-rgb:199,199,199; /* ---- Type ---- NOTE: --white is the HEADING colour token. On a light theme its role inverts to near-black. Do not read the token name literally. WARNING: --white is ALSO the foreground on blue fills (.btn-primary, .bub.user, .intg-tile .badge, .quote .av, .sc-btn) and the background of .marquee / .brand-tile. Those two roles split on light, so the alpha ramp below keeps a real-white basis and --white-on-fill / --surface-white carry the literal-white role. */ --white:#1E1E1E; /* headings – matches logo wordmark, 16.67:1 on white */ --white-on-fill:#FFFFFF; /* fg on --blue fills – 8.13:1 on #004AAD */ --surface-white:#FFFFFF; /* literal white plate: marquee band, brand tiles */ --white-rgb:255,255,255; /* stays real white: feeds --white-fade + --white-NN veils */ --ink-rgb:30,30,30; /* near-black basis for light-theme scrims/shadows */ --text:#595959; /* Wix color_40 – 7.00:1 on white, AAA */ --text-dim:#666666; /* #8F8F8F was 3.23:1 – fails AA. 5.10:1 on white */ --text-quote:#1E1E1E; --text-chat:#595959; /* 7.00:1 on --card */ --text-chat-muted:#2F6B15; /* 6.49:1 on white (was a pale mint) */ --text-muted-blue:#00306E; /* 10.43:1 on --blue-12 tint */ /* ---- Status (kept accessible on light) ---- Each is used BOTH as text and as the basis of its own --*-15 / --*-10 chip background, so values are tuned to clear 4.5:1 in both places. */ --ok:#357200; /* logo green #4DA300 was 3.20:1 – fails. 5.90:1 on white, 5.03:1 on --ok-15 */ --ok-bright:#357200; /* status dots + chip text, same basis */ --warn:#845000; /* #B26A00 was 4.24:1 / 3.52:1 on chip – fails. 6.71:1 / 5.36:1 */ --warn-bright:#845000; --error:#D40700; /* logo red – 5.48:1 on white, 4.59:1 on --error-10 */ --status-ok:#357200; /* activity-feed dots */ --status-warn:#845000; --ok-rgb:53,114,0; --ok-alt-rgb:53,114,0; --warn-rgb:132,80,0; --error-rgb:212,7,0; /* ---- Fonts ---- */ --display:'Poppins',system-ui,sans-serif; --body:'Poppins',system-ui,sans-serif; /* ---- Depth: dark-theme glows must become light-theme shadows ---- Dark shadows are near-opaque black glows; on white those read as smudges. Light theme needs shallower, cooler, genuinely lower alphas. */ --scrim:rgba(30,30,30,.55); /* modal scrim stays DARK on light theme – it dims the page behind a dialog */ --bg-glass:rgba(255,255,255,.85); --bg-glass-solid:rgba(255,255,255,.98); --bg-veil:rgba(255,255,255,.93); --bg-overlay:rgba(var(--bg-deep-rgb),.55); /* was white-on-white = invisible panel */ --bg-overlay-strong:rgba(255,255,255,.92); --bg-deep-rgb:229,240,254; /* Drop shadows, not glows. Dark used .28/.6/.7/.8 black – far too heavy here. */ --shadow-sm:rgba(var(--ink-rgb),.08); --shadow-lg:rgba(var(--ink-rgb),.14); --shadow-xl:rgba(var(--ink-rgb),.16); --shadow-2xl:rgba(var(--ink-rgb),.18); --blue-shadow:rgba(var(--blue-rgb),.32); /* .6 glow -> restrained lift */ /* ---- Veils built on --white-rgb ---- These are lightening washes over dark plates. On light surfaces a white veil is invisible, so they invert to faint ink hairlines. --white-fade stays transparent-white: it fades the marquee band, which is still white. */ --white-06:rgba(var(--ink-rgb),.08); --white-12:rgba(var(--ink-rgb),.10); --white-15:rgba(var(--ink-rgb),.12); --white-fade:rgba(255,255,255,0); /* ---- Gradients / fades ---- --mock-top-fade is the transparent stop of a gradient into --bg-2; it must match --bg-2 at zero alpha or the card gets a grey cast. */ --mock-top-fade:rgba(247,249,252,0); /* ---- Misc surfaces ---- */ --shot-bg:#F2F6FD; /* screenshot plate – was #eef0f4, keep in-family */ --surface-light:#FFFFFF; --border-track:rgba(var(--border-rgb),.9); --swatch-neutral:#E7E9EE; /* fabric swatch, already light – safe */ }