/* ========================================================================== tokens/theme-default.css — LAYER 2: SEMANTIC TOKENS (the default theme) -------------------------------------------------------------------------- Every colour the UI is allowed to use, named by ROLE rather than by hue, so a theme swap never has to touch component CSS. Brand values were sampled from the ZAN Shopping reference mockup (720x1080 JPEG) rather than eyeballed — see ZANMARKETHTML_BUILD_LOG.md §6 for the measured medians behind each value. COLOUR MODE CONTRACT Every semantic colour is declared twice: once on `:root` (light, the default) and once on `:root[data-mode="dark"]`. Nothing else in the codebase may declare a colour — see tokens/components.css for the component layer that consumes these. There is deliberately no theme-switching JavaScript yet: setting `data-mode="dark"` on (devtools, or a future toggle) is the whole contract. `-rgb` twins exist only because Bootstrap 5.3 composes utilities as `rgba(var(--bs-*-rgb), )`; a hex value cannot be substituted there. ========================================================================== */ /* ------------------------------------------------------------------ LIGHT -- */ :root { /* ---- brand ---------------------------------------------------------- */ --color-brand-primary: #C60409; /* sampled: header/nav band median */ --color-brand-primary-rgb: 198, 4, 9; --color-brand-primary-contrast: #FFFFFF; --color-brand-primary-hover: #A50307; /* darkened primary, not an off-brand orange */ --color-brand-primary-subtle: #FDECEC; --color-brand-primary-raised: #DB0F1B; /* sampled: the lifted red of the count badges and the bottom-nav active pill, which sit ON a brand-primary surface and must read apart */ --color-brand-primary-deep: #A10203; /* sampled: the dark end of the hero card's gradient (Micro-prompt 29) */ /* Brand red tuned for use as TEXT/ICON on a surface, rather than as a surface itself. Identical to --color-brand-primary in light mode; lifted in dark, where the surface red only reaches ~3.9:1 against the dark page and fails WCAG AA. Added by Micro-prompt 35's contrast audit, which measured the product-card price failing in ALL FOUR themes (3.38-4.05:1 vs 4.5) — a pre-existing defect, not a glass one. See the build log §21.5. */ --color-brand-primary-text: #C60409; --color-accent: #FADF09; /* sampled: "Nunua Sasa" CTA fill */ --color-accent-rgb: 250, 223, 9; --color-accent-contrast: #1A1A1A; /* near-black on gold, as in the mockup */ --color-accent-hover: #E8CE08; --color-brand-secondary: #364127; /* the template's deep olive, kept for promo surfaces */ --color-brand-secondary-rgb: 54, 65, 39; --color-brand-secondary-contrast: #FFFFFF; /* ---- surfaces ------------------------------------------------------- */ --color-surface: #FFFFFF; --color-surface-alt: #F5F5F5; /* was #efefef / rgb(248,248,248) */ --color-surface-sunken: #FBFBFB; --color-surface-inverse: #1A1A1A; --color-surface-overlay: rgba(0, 0, 0, 0.4); /* ---- text ----------------------------------------------------------- */ --color-text: #222222; /* Was #747474. On white that is 4.29:1 — just under the WCAG AA floor, and it is the colour of the footer, card body copy and every "muted" label. Micro-prompt 36's contrast sweep measured it failing on the account page's footer in light mode. #6B6B6B is 5.33:1 on white: a 3% darkening that no one will notice and that clears AA with margin. Only the default theme needed it; neo-brutalism, material3 and liquid-glass already define darker muted colours and were passing. */ --color-text-muted: #6B6B6B; --color-text-subtle: #B5B5B5; --color-text-inverse: #FFFFFF; --color-link: #333333; --color-link-hover: #333333; /* ---- borders -------------------------------------------------------- */ --color-border: #F7F7F7; --color-border-strong: #E2E2E2; --color-border-rgb: 247, 247, 247; /* ---- state ---------------------------------------------------------- */ --color-danger: #CD0A12; /* sampled: discount-badge red */ --color-danger-rgb: 205, 10, 18; --color-danger-contrast: #FFFFFF; --color-danger-subtle: #FFEADA; --color-danger-subtle-hover: #ECCBAF; --color-success: #A3BE4C; /* the template's lime, kept */ --color-success-rgb: 163, 190, 76; --color-success-contrast: #FFFFFF; --color-success-subtle: #EEF5E4; --color-success-subtle-hover: #9DE3C2; --color-warning: #EFCE28; /* sampled: rating-star gold */ --color-warning-rgb: 239, 206, 40; --color-warning-contrast: #1A1A1A; --color-warning-subtle: #FCF7EB; --color-warning-subtle-hover: #FFECBE; --color-info: #0DCAF0; --color-info-rgb: 13, 202, 240; /* ---- elevation (theme-aware: dark surfaces need stronger shadows) ---- */ --shadow-color: rgba(0, 0, 0, 0.08); /* ---- translucent overlays ------------------------------------------- */ --overlay-white-80: rgba(255, 255, 255, 0.8); --overlay-white-65: rgba(255, 255, 255, 0.65); --overlay-white-50: rgba(255, 255, 255, 0.5); --overlay-white-30: rgba(255, 255, 255, 0.3); --overlay-white-20: rgba(255, 255, 255, 0.2); --overlay-white-10: rgba(255, 255, 255, 0.1); --overlay-black-20: rgba(0, 0, 0, 0.2); --overlay-black-05: rgba(0, 0, 0, 0.05); --overlay-transparent: rgba(0, 0, 0, 0); /* lightbox / gallery scrim. Deliberately the SAME in both modes (see the dark block): a scrim is black in light and dark alike, and the element's own opacity supplies the strength. */ --color-scrim: #000000; /* ---- typography ------------------------------------------------------ */ --heading-font: "Nunito", sans-serif; --bs-font-sans-serif: "Open Sans", sans-serif; --bs-body-font-family: var(--bs-font-sans-serif); --bs-body-font-size: 1rem; --bs-body-font-weight: var(--font-weight-body); --bs-body-line-height: 2; --bs-body-color: var(--color-text-muted); --bs-body-bg: var(--color-surface); /* ---- Bootstrap 5.3 bridge ------------------------------------------- Bootstrap's utilities (`bg-primary`, `text-danger`, `border-*`) read `--bs-*`, so the semantic tokens are projected onto them here. This is the only place `--bs-*` colour values are allowed to be written. */ --bs-primary: var(--color-brand-primary); --bs-primary-rgb: var(--color-brand-primary-rgb); --bs-secondary: var(--color-brand-secondary); --bs-secondary-rgb: var(--color-brand-secondary-rgb); --bs-danger: var(--color-danger); --bs-danger-rgb: var(--color-danger-rgb); --bs-success: var(--color-success); --bs-success-rgb: var(--color-success-rgb); --bs-warning: var(--color-warning); --bs-warning-rgb: var(--color-warning-rgb); --bs-info: var(--color-info); --bs-info-rgb: var(--color-info-rgb); --bs-body-color-rgb: 107, 107, 107; --bs-light-rgb: 245, 245, 245; --bs-dark: var(--color-text); --bs-dark-rgb: 34, 34, 34; --bs-border-color: var(--color-border); --bs-link-color: var(--color-link); --bs-link-hover-color: var(--color-link-hover); --bs-link-color-rgb: 51, 51, 51; --bs-link-hover-color-rgb: 51, 51, 51; --bs-primary-bg-subtle: var(--color-brand-primary-subtle); --bs-success-bg-subtle: var(--color-success-subtle); --bs-danger-bg-subtle: var(--color-danger-subtle); --bs-warning-bg-subtle: var(--color-warning-subtle); } /* ------------------------------------------------------------------- DARK -- */ :root[data-mode="dark"] { /* ---- brand: kept vivid, only the contrast surface flips -------------- */ --color-brand-primary: #E31E24; /* lifted slightly so it reads on dark */ --color-brand-primary-rgb: 227, 30, 36; --color-brand-primary-contrast: #FFFFFF; --color-brand-primary-hover: #F0353B; --color-brand-primary-subtle: #2A1013; --color-brand-primary-raised: #F0353B; /* badges / active pill on the brand surface */ --color-brand-primary-deep: #9E0A11; /* hero gradient, dark end */ /* The text-tuned brand red. On dark surfaces the surface red lands at ~3.9:1, below AA, so brand-coloured TEXT uses this lifted step instead. Declared here rather than in each theme file: every skin inherits it, and only the two values differ from --color-brand-primary. */ --color-brand-primary-text: #FF8A80; --color-accent: #FFDD09; --color-accent-rgb: 255, 221, 9; --color-accent-contrast: #1A1A1A; --color-accent-hover: #FFE64A; --color-brand-secondary: #4A5837; --color-brand-secondary-rgb: 74, 88, 55; --color-brand-secondary-contrast: #FFFFFF; /* ---- surfaces: dark, layered by elevation --------------------------- */ --color-surface: #14161A; --color-surface-alt: #1D2025; --color-surface-sunken: #0F1114; --color-surface-inverse: #F2F3F5; --color-surface-overlay: rgba(0, 0, 0, 0.65); /* ---- text: off-white, never pure #fff ------------------------------- */ --color-text: #F2F3F5; --color-text-muted: #A8ADB6; --color-text-subtle: #6E747E; --color-text-inverse: #14161A; --color-link: #E6E8EB; --color-link-hover: #FFFFFF; /* ---- borders -------------------------------------------------------- */ --color-border: #2A2E35; --color-border-strong: #3A3F48; --color-border-rgb: 42, 46, 53; /* ---- state ---------------------------------------------------------- */ --color-danger: #F0353B; --color-danger-rgb: 240, 53, 59; --color-danger-contrast: #FFFFFF; --color-danger-subtle: #2E1214; --color-danger-subtle-hover: #45201F; --color-success: #57C785; --color-success-rgb: 87, 199, 133; --color-success-contrast: #10241A; --color-success-subtle: #12251A; --color-success-subtle-hover: #1B3A28; --color-warning: #FFDD09; --color-warning-rgb: 255, 221, 9; --color-warning-contrast: #1A1A1A; --color-warning-subtle: #2A2410; --color-warning-subtle-hover: #3D3418; --color-info: #4DD8EC; --color-info-rgb: 77, 216, 236; /* ---- elevation ------------------------------------------------------ */ --shadow-color: rgba(0, 0, 0, 0.5); /* ---- overlays: dark mode tints toward black ------------------------- */ /* --overlay-transparent is deliberately NOT re-declared: rgba(0,0,0,0) is the same value in every mode, and duplicating it would be a no-op. */ --color-scrim: #000000; /* identical in both modes, on purpose */ --overlay-white-80: rgba(20, 22, 26, 0.85); --overlay-white-65: rgba(20, 22, 26, 0.7); --overlay-white-50: rgba(20, 22, 26, 0.55); --overlay-white-30: rgba(255, 255, 255, 0.12); --overlay-white-20: rgba(255, 255, 255, 0.08); --overlay-white-10: rgba(255, 255, 255, 0.06); --overlay-black-20: rgba(0, 0, 0, 0.45); --overlay-black-05: rgba(0, 0, 0, 0.3); /* ---- Bootstrap bridge: same projections, new values ------------------ */ --bs-body-color-rgb: 168, 173, 182; --bs-light-rgb: 29, 32, 37; --bs-dark: var(--color-text); --bs-dark-rgb: 242, 243, 245; --bs-link-color-rgb: 230, 232, 235; --bs-link-hover-color-rgb: 255, 255, 255; }