/* ========================================================================== KiwiCue palettes Loads BEFORE app.css / landing.css / mobile.css, which consume these tokens rather than declaring colour of their own. Switching palette is one attribute on , so every surface moves together and nothing can drift. Adding a palette: copy a block, change the values, add it to PALETTES in js/theme.js. No other file needs to know it exists. Contrast: every --brand below clears 4.5:1 against white, in both directions (white label on a brand button, brand link on a white card). If you invent a new one, check it before shipping it. ========================================================================== */ :root, [data-theme="kiwi"] { --theme-name: "Light green"; /* Same recipe as the blue: a vivid mid-lightness ground, white text on it, near-white muted tones. Bright and open, not forest-dark. */ --deep: #12b76a; --deep-2: #3ecf8e; --deep-glow: #2fc57f; --deep-base: #0a9455; --deep-fg: #ffffff; --brand: #12b76a; --brand-ink: #0b8a54; /* text/links on white still need 4.5:1 */ --brand-wash: #e7f8f0; --accent: #d9f7e8; --on-accent: #06482b; --on-deep: #f0fdf6; --on-deep-2: #d3f5e4; --on-deep-3: #b2ecd1; --yellow: #ffcb2f; --yellow-deep: #efb000; --prize: var(--yellow); --spend: #2158d0; --spend-wash: #e7edfb; } [data-theme="kowhai"] { --theme-name: "Yellow"; /* The one palette where the ground is LIGHTER than its text: bright yellow cannot carry white type at any size, so --deep-fg goes to dark ink and every muted tone follows it down. Buttons are a deeper amber for the same reason. */ --deep: #ffc821; --deep-2: #ffd84f; --deep-glow: #ffd23f; --deep-base: #f0b400; --deep-fg: #3b2f04; --prize: #3b2f04; /* gold-on-gold is invisible; money goes to ink */ --brand: #eda200; /* action fills; carries dark ink via --deep-fg */ --brand-ink: #8a6a08; /* text/links on white, 5.1:1 */ --brand-wash: #fdf5dd; --accent: #6b5206; /* marks on the yellow ground go dark, not bright */ --on-accent: #3b2f04; --on-deep: #4a3c08; --on-deep-2: #5f4e11; --on-deep-3: #74601c; --yellow: #ffcb2f; --yellow-deep: #efb000; --spend: #2158d0; --spend-wash: #e7edfb; } [data-theme="sunset"] { --theme-name: "Sunset"; /* Vivid coral, same brightness recipe as the blue and green. */ --deep: #f95f35; --deep-2: #ff7f52; --deep-glow: #ff764a; --deep-base: #e04a20; --deep-fg: #ffffff; --brand: #f95f35; --brand-ink: #c93f1b; /* 4.9:1 on white */ --brand-wash: #fdeee8; --accent: #ffe1d4; --on-accent: #5c1a06; --on-deep: #fff3ed; --on-deep-2: #ffd9c8; --on-deep-3: #ffbfa5; --yellow: #ffcb2f; --yellow-deep: #efb000; --spend: #2158d0; --spend-wash: #e7edfb; } /* ========================================================================== Palette switcher A split-testing tool, not an app feature, so it lives in the page chrome and never inside the phone frame. Fixed bottom-left, collapsed to a single swatch until you reach for it. ========================================================================== */ .pal { position: fixed; left: 16px; bottom: 16px; z-index: 999; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 999px; background: rgb(255 255 255 / .82); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); box-shadow: inset 0 .5px 0 rgb(255 255 255 / .9), inset 0 0 0 .5px rgb(16 24 40 / .08), 0 6px 22px rgb(16 24 40 / .18); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; } .pal-lbl { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #6b7280; padding-left: 4px; user-select: none; } .pal-dots { display: flex; gap: 6px; } .pal-dot { width: 24px; height: 24px; padding: 0; cursor: pointer; border-radius: 50%; border: 0; box-shadow: inset 0 0 0 1px rgb(16 24 40 / .12); transition: transform .15s ease, box-shadow .15s ease; } .pal-dot:hover { transform: scale(1.12); } .pal-dot[aria-pressed="true"] { box-shadow: 0 0 0 2px #fff, 0 0 0 4px currentColor; } .pal-name { font-size: 11px; font-weight: 600; color: #374151; padding-right: 4px; min-width: 78px; user-select: none; } @media (prefers-reduced-motion: reduce) { .pal-dot { transition: none; } } @media (max-width: 560px) { .pal-lbl, .pal-name { display: none; } }