/* ========================================================================== tokens/theme-material3.css — THEME SKIN: MATERIAL 3 (Micro-prompt 34) -------------------------------------------------------------------------- Selected by `data-theme="material3"` on , set by js/theme/theme-engine.js from the `zan_theme` setting. Linked after theme-default.css. Same three-block shape as theme-neo-brutalism.css, and for the same reason (see §19.2): the light block is scoped with `:not([data-mode="dark"])` so it cannot tie with theme-default.css's `:root[data-mode="dark"]` block, which is the same 0-2-0 specificity. Without the guard, source order alone would decide and the light tones would bleed into dark. WHAT "MATERIAL 3" MEANS HERE 1. TONAL SURFACES. M3's surfaces are not neutral greys — they are tints of the seed colour, laid out as a tone ladder (surface = tone 98, surface-container = 94, and so on). Here the seed is the brand red, so every surface carries a faint warm cast and the page, the alt sections and the cards sit at DIFFERENT tones rather than all being flat white. 2. ELEVATION AS A NAMED SCALE. `--elevation-1/2/3` are M3's official shadow stacks, tinted from the primary, and they are mapped onto the layer-1 `--shadow-*` scale so all 225 component aliases follow. 3. SHAPE. M3 buttons and chips are stadium/pill shapes, so `--radius-*` is pushed to the M3 scale (small 8, medium 12, large 16, extra-large 28) and buttons are set to `--radius-pill`. 4. TYPE. M3 headlines are LIGHT (400-500), not bold. `--font-weight- heading` drops to 500 — the deliberate opposite of neo-brutalism's 900. DOCUMENTED SIMPLIFICATION — the tonal palette is HAND-AUTHORED A real M3 implementation runs the seed through HCT colour-space tone generation to produce tones 0-100. That is a build-time algorithm (or a runtime library), and this project has no build step and no dependencies. So the tones below are authored by hand to M3's published values for a red seed, and are documented as such rather than pretending to be generated. Consequence: they are fixed, not derived — changing the seed does not regenerate them. Every value is a layer-2 token, so a future generator can replace this file without touching a single component rule. DEVIATION FROM STRICT M3 — dark primary stays vivid M3's own dark scheme uses tone 80 for primary (a soft pink on dark). The brief for this prompt asks for the primary to stay vivid, not desaturated, so dark primary is the brand red lifted to #E31E24. Noted, not hidden. ========================================================================== */ /* ============================================================ STRUCTURE ==== */ /* Mode-independent: shape, elevation geometry, type weights, the Bootstrap geometry bridge. theme-default.css's dark block declares none of these, so they compete only with base.css's `:root` (0-1-0). */ :root[data-theme="material3"] { /* ---- shape: the M3 corner scale ------------------------------------- */ --radius-none: 0; --radius-sm: 8px; /* M3 small */ --radius-md: 12px; /* M3 medium */ --radius-lg: 16px; /* M3 large */ --radius-xl: 28px; /* M3 extra-large */ --radius-pill: 999px; /* M3 full */ /* ---- elevation: M3's official shadow stacks, tinted from the primary -- The two colour tokens below are the only mode-dependent part; the three compositions are `var()` references, so they resolve per mode at the point of use and the dark block only has to re-declare the two colours. Alpha note: color-mix() blends premultiplied alpha, so `14% opaque primary + 86% of rgba(0,0,0,0.16)` lands at ~28% alpha — close to M3's 30% key shadow, which is exactly the intent. */ --elevation-shadow-key: color-mix(in srgb, var(--color-brand-primary) 14%, rgba(0, 0, 0, 0.16)); --elevation-shadow-ambient: color-mix(in srgb, var(--color-brand-primary) 7%, rgba(0, 0, 0, 0.08)); --elevation-1: 0 1px 2px 0 var(--elevation-shadow-key), 0 1px 3px 1px var(--elevation-shadow-ambient); --elevation-2: 0 1px 2px 0 var(--elevation-shadow-key), 0 2px 6px 2px var(--elevation-shadow-ambient); --elevation-3: 0 1px 3px 0 var(--elevation-shadow-key), 0 4px 8px 3px var(--elevation-shadow-ambient); /* Mapped onto layer 1 so every `--shadow-*` consumer — and every component alias built on one — becomes an M3 elevation level. All five are consumed (5 / 1 / 5 / 6 / 3 sites respectively). */ --shadow-xs: var(--elevation-1); --shadow-sm: var(--elevation-1); --shadow-md: var(--elevation-2); --shadow-lg: var(--elevation-3); --shadow-overlay: var(--elevation-3); /* M3 has no inset "pressed" treatment; the state layer carries the press. */ --shadow-pressed: none; /* ---- type: M3 headlines are light ----------------------------------- */ --font-weight-body: 400; --font-weight-heading: 500; /* ---- shape, applied to the layer-3 aliases that ARE consumed --------- */ --badge-radius: var(--radius-pill); /* chips */ --bnav-active-radius: var(--radius-pill); /* nav indicator */ /* Carousel prev/next arrows (style.css:254). M3's icon buttons are circular, so these become pills. Without this the swiper arrows stayed at `--radius-md` — the only buttons on the site that were not stadium-shaped. */ --carousel-control-radius: var(--radius-pill); /* ---- cards: elevated, not outlined ---------------------------------- M3's "elevated card" has no border and separates by tone + shadow, so the card border is switched off here. `--card-bg` / `--pcard-bg` are declared in the colour blocks because they are tones, not geometry. */ --card-border-width: 0; --card-border: transparent; --pcard-border: transparent; /* ---- Bootstrap geometry bridge -------------------------------------- Bootstrap components take their corners from `--bs-*` and several apply them with `!important`. This is the only way to round them without `!important` of our own. Measured baseline before this file: buttons, inputs, selects, dropdowns and cards all sat at Bootstrap's 6px, because `--button-radius` / `--input-radius` / `--modal-radius` are declared in components.css but never consumed by any rule (see §19.8 #2). */ --bs-border-radius: var(--radius-md); --bs-border-radius-sm: var(--radius-sm); --bs-border-radius-lg: var(--radius-lg); --bs-border-radius-xl: var(--radius-xl); --bs-border-radius-xxl: var(--radius-xl); /* 5.3.0-alpha naming */ --bs-border-radius-2xl: var(--radius-xl); /* 5.3.x final naming */ --bs-border-radius-pill: var(--radius-pill); /* NOTE — `--bs-btn-border-radius` and `--bs-card-border-radius` are NOT set here on purpose. Bootstrap 5.3 declares both ON `.btn` / `.card` themselves, so a `:root` value is shadowed by the element's own declaration and never applies (measured: buttons stayed at 12px and `img.card-img-top` at 11px = 12px card radius minus the 1px border). `--bs-btn-border-radius` is therefore set in the VENDOR REACH-AROUNDS section below; the card radius is left at `--bs-border-radius` (12px), which is M3's own card radius, so no reach-around is needed for it. */ /* M3 outlines are visible (tone 50), unlike the default theme's near-invisible #F7F7F7 hairline, so Bootstrap's components read as outlined controls. */ --bs-border-color: var(--color-border-strong); } /* ================================================================ LIGHT ==== */ :root[data-theme="material3"]:not([data-mode="dark"]) { /* ---- primary: the brand red kept as the seed (tone 40) --------------- */ --color-brand-primary: #C60409; --color-brand-primary-rgb: 198, 4, 9; --color-brand-primary-contrast: #FFFFFF; --color-brand-primary-hover: #A50307; /* tone 30 */ --color-brand-primary-subtle: #FFDAD6; /* primary-container, tone 90 */ --color-brand-primary-raised: #E31E24; /* must read on the brand band */ --color-brand-primary-deep: #A10203; --color-accent: #FADF09; /* the brand gold, kept */ --color-accent-rgb: 250, 223, 9; --color-accent-contrast: #1A1A1A; --color-accent-hover: #E8CE08; --color-brand-secondary: #364127; /* the brand olive, kept */ --color-brand-secondary-rgb: 54, 65, 39; --color-brand-secondary-contrast: #FFFFFF; /* ---- tonal surfaces: a warm tone ladder from the red seed ------------ Tone 100 (cards) sits ABOVE tone 98 (page) sits above tone 94 (alt sections) — the M3 stacking, not one flat white. */ --color-surface: #FFF8F7; /* tone 98 — page */ --color-surface-alt: #F6EDEC; /* tone 94 — containers */ --color-surface-sunken: #F1E5E4; /* tone 92 */ --color-surface-inverse: #3A2E2D; /* tone 20 */ --color-surface-overlay: rgba(0, 0, 0, 0.4); /* Cards lift off the tinted page (tone 100). */ --card-bg: #FFFFFF; --pcard-bg: #FFFFFF; /* ---- text: M3's on-surface / on-surface-variant --------------------- */ --color-text: #1D1B1A; /* tone 10 */ --color-text-muted: #534341; /* tone 30 */ --color-text-subtle: #857371; /* tone 50 (outline) */ --color-text-inverse: #FFFFFF; --color-link: #1D1B1A; --color-link-hover: #C60409; /* ---- outlines: M3 has TWO, and both are visible --------------------- */ --color-border: #E8DAD8; /* outline-variant — dividers */ --color-border-strong: #857371; /* outline — control borders */ --color-border-rgb: 232, 218, 216; /* ---- state: M3 error / success / warning tones ---------------------- */ --color-danger: #BA1A1A; /* error, tone 40 */ --color-danger-rgb: 186, 26, 26; --color-danger-contrast: #FFFFFF; --color-danger-subtle: #FFDAD6; /* error-container, tone 90 */ --color-danger-subtle-hover: #FFB4AB; --color-success: #386A20; --color-success-rgb: 56, 106, 32; --color-success-contrast: #FFFFFF; --color-success-subtle: #B7F397; --color-success-subtle-hover: #9CD67D; /* Kept gold-ish: this token is the rating-star colour, and a tone-40 amber would make the stars read as brown. */ --color-warning: #DBA400; --color-warning-rgb: 219, 164, 0; --color-warning-contrast: #1A1A1A; --color-warning-subtle: #FFDF9E; --color-warning-subtle-hover: #FFD180; --color-info: #00639B; --color-info-rgb: 0, 99, 155; /* ---- Bootstrap colour projections this theme moves ------------------ theme-default.css maps the `-rgb` twins that are `var()` references, so those follow automatically; only the five it hardcodes need restating. */ --bs-body-color-rgb: 83, 67, 65; --bs-light-rgb: 246, 237, 236; --bs-dark-rgb: 29, 27, 26; --bs-link-color-rgb: 29, 27, 26; --bs-link-hover-color-rgb: 198, 4, 9; } /* ================================================================= DARK ==== */ :root[data-theme="material3"][data-mode="dark"] { /* ---- primary: vivid, per this prompt's brief (see the header note) --- */ --color-brand-primary: #E31E24; --color-brand-primary-rgb: 227, 30, 36; --color-brand-primary-contrast: #FFFFFF; --color-brand-primary-hover: #F0353B; --color-brand-primary-subtle: #93000A; /* primary-container, tone 30 */ --color-brand-primary-raised: #F0353B; --color-brand-primary-deep: #B3141A; --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; /* ---- tonal surfaces: dark warm neutrals, cards ABOVE the page ------- */ --color-surface: #171314; /* tone 6 — page */ --color-surface-alt: #241D1E; /* tone 12 — containers */ --color-surface-sunken: #110E0F; /* tone 4 */ --color-surface-inverse: #EFE0DE; --color-surface-overlay: rgba(0, 0, 0, 0.7); /* Dark mode inverts the ladder: cards are the HIGHER tone. */ --card-bg: #241D1E; --pcard-bg: #241D1E; /* ---- text ------------------------------------------------------------ */ --color-text: #EFE0DE; /* tone 90 */ --color-text-muted: #D8C2C0; /* tone 80 */ --color-text-subtle: #A08C8A; /* tone 60 */ --color-text-inverse: #171314; --color-link: #EFE0DE; --color-link-hover: #FFFFFF; /* ---- outlines -------------------------------------------------------- */ --color-border: #4A3F3E; /* outline-variant, tone 30 */ --color-border-strong: #A08C8A; /* outline, tone 60 */ --color-border-rgb: 74, 63, 62; /* ---- state ----------------------------------------------------------- The discount badge is small bold text on `--color-danger`, so the contrast token is the dark on-error tone rather than white. */ --color-danger: #FFB4AB; /* error, tone 80 */ --color-danger-rgb: 255, 180, 171; --color-danger-contrast: #690005; --color-danger-subtle: #93000A; --color-danger-subtle-hover: #B3151B; --color-success: #9CD67D; --color-success-rgb: 156, 214, 125; --color-success-contrast: #0A3900; --color-success-subtle: #205107; --color-success-subtle-hover: #2E6B12; --color-warning: #FFD180; --color-warning-rgb: 255, 209, 128; --color-warning-contrast: #3F2E00; --color-warning-subtle: #5C4200; --color-warning-subtle-hover: #7A5900; --color-info: #93CCFF; --color-info-rgb: 147, 204, 255; /* ---- elevation: a black shadow is invisible on a dark surface, so the key/ambient alphas lift. The three `--elevation-*` compositions above reference these, so they follow with no second declaration. */ --elevation-shadow-key: color-mix(in srgb, var(--color-brand-primary) 20%, rgba(0, 0, 0, 0.55)); --elevation-shadow-ambient: color-mix(in srgb, var(--color-brand-primary) 10%, rgba(0, 0, 0, 0.40)); /* ---- Bootstrap colour projections, dark values ----------------------- */ --bs-body-color-rgb: 216, 194, 192; --bs-light-rgb: 36, 29, 30; --bs-dark-rgb: 239, 224, 222; --bs-link-color-rgb: 239, 224, 222; --bs-link-hover-color-rgb: 255, 255, 255; } /* ============================================ VENDOR REACH-AROUNDS ======= */ /* Two Bootstrap rules that a `:root` token override cannot reach. Both were found by the Micro-prompt 34 leakage sweep, not by reading — see §20.5. Every selector is scoped to this theme, so no other theme or mode is affected. This is the same narrow exception §19.5 established. */ /* `.btn` declares `--bs-btn-border-radius` ON ITSELF (not on `:root`), so the value set in the structure block above is shadowed by Bootstrap's own element-level declaration and never applied — measured: buttons stayed at `--bs-border-radius` (12px) instead of the M3 stadium shape. Re-declaring it on the same element is the only way through; there is no `!important` involved and nothing else inherits it. */ :root[data-theme="material3"] .btn { --bs-btn-border-radius: var(--radius-pill); } /* `.btn-close` hardcodes `border-radius: .375rem` with no variable at all (the same literal neo-brutalism overrides in §19.5). M3's icon buttons are circular, so this becomes a pill. */ :root[data-theme="material3"] .btn-close { border-radius: var(--radius-pill); } /* ACCEPTED, NOT OVERRIDDEN: `.form-check-input` hardcodes `border-radius: .25em` (4px). M3's checkbox corner radius is 2dp, so Bootstrap's 4px is already closer to the spec than any step in the M3 shape scale — overriding it to 8px would move it further from Material, not nearer. Left alone on purpose, and listed here so the sweep's 4px reading is not mistaken for a leak. */