/* ============================================================ brand.css — the brand design tokens for the whole site. Loaded FIRST by every layout, before any other stylesheet. HOW THEMING WORKS ----------------- 1. This file declares the DEFAULT value of every --brand-* token. Those defaults are the colours the site shipped with, so a brand that configures no theme renders exactly as before. 2. Views/Shared/_BrandContext.cshtml inlines a :root block at the END of — after every stylesheet — carrying the values from Brands/{id}/Assets/Theme. Because it comes last, it overrides the defaults here. 3. Everything downstream reads var(--brand-*), so it re-resolves automatically. No page, component or script needs to know a brand changed. RULE: never write a brand colour as a literal hex in a stylesheet. Use the token. Neutral greys, whites and pure-black UI chrome are NOT brand colours and stay literal. ============================================================ */ :root { /* ── Core palette (the spec's names; these are what the Theme document sets) ── */ /* The dominant brand colour: buttons, active states, prices, links. */ --brand-primary: #E21B22; /* Colour that sits ON primary — button text, icons inside filled pills. */ --brand-secondary: #FFFFFF; /* Highlight for badges, offer flashes and promos. Defaults to primary so a brand that sets only PrimaryColor still looks coherent. CURRENTLY UNUSED BY ANY RULE, on purpose: every candidate element is a filled badge with fixed white text, and AccentColor carries no guarantee of contrast against it (pt sets it to #FDECEE, a near-white tint, which would render those badges invisible). Wiring it needs a paired ink token — see --brand-warning-soft / --brand-warning-ink for the pattern. */ --brand-accent: var(--brand-primary); /* ── Status colours ── Semantic, NOT brand identity: a brand may override them, but the defaults are deliberately conventional so success stays green and danger stays red. */ --brand-success: #16a34a; --brand-warning: #f59e0b; --brand-danger: #b91c1c; /* ── Surfaces & text ── */ --brand-text: #1a1a1a; --brand-background: #FFFFFF; --brand-border: #e5e7eb; /* ── Roles that default to primary ── Split out so a brand can colour its buttons differently from its prices without overriding every one of them. */ --brand-button: var(--brand-primary); --brand-button-hover: var(--brand-primary-dark); --brand-price: var(--brand-primary); --brand-link: var(--brand-primary); /* ── Typography & shape ── */ --brand-font-family: 'Roboto', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif; --brand-radius: 12px; --brand-button-radius: 8px; /* ── Derived shades ── Every hover and soft-tint in the stylesheets chains through these, so they MUST follow --brand-primary / --brand-success. Otherwise a brand that sets a blue primary still gets the shipped red on every :hover and .is-active tint. Declared twice on purpose: the literal first, then color-mix(). An engine without color-mix() ignores the second declaration and keeps the exact shipped shade; everywhere else the derived value wins. The server (BrandThemeCss.MixToward) additionally emits an exact hex when the brand's colour is a plain hex, which overrides both. The percentages are tuned so the derived value reproduces the literal above it for the default palette — this is a no-op until a brand actually sets a colour. */ --brand-primary-dark: #c8161d; --brand-primary-dark: color-mix(in srgb, var(--brand-primary) 88%, #000); --brand-primary-soft: #FDECEE; --brand-primary-soft: color-mix(in srgb, var(--brand-primary) 8%, #fff); --brand-success-dark: #15803d; --brand-success-dark: color-mix(in srgb, var(--brand-success) 80%, #000); --brand-success-soft: #f0fdf4; --brand-success-soft: color-mix(in srgb, var(--brand-success) 6%, #fff); /* Warning needs a RAMP, not one colour: --brand-warning at full strength is a bright amber that is legible as a border or icon but fails contrast as body text on a light tint. So the tint and the readable ink are their own tokens, and warning UI uses -soft for the surface and -ink for the text. (Using the bright amber as text on a pale surface is exactly the ~2:1 contrast bug this ramp exists to prevent.) */ --brand-warning-soft: #fef3c7; --brand-warning-soft: color-mix(in srgb, var(--brand-warning) 22%, #fff); --brand-warning-ink: #92400e; --brand-warning-ink: color-mix(in srgb, var(--brand-warning) 55%, #000); /* ── Legacy aliases ──────────────────────────────────────── The stylesheets were written against --brand-red / --brand-green long before the Theme document existed. Re-pointing them here means those ~230 existing usages become brand-driven with no edit to the rules themselves. New CSS should use the semantic tokens above; these stay for the existing rules. */ --brand-red: var(--brand-primary); /* Through --brand-button-hover, so a brand that sets ButtonHoverColor drives every hover; unset, it falls through to the derived dark shade exactly as before. */ --brand-red-dark: var(--brand-button-hover, var(--brand-primary-dark)); --brand-red-hover: var(--brand-button-hover, var(--brand-primary-dark)); --brand-red-soft: var(--brand-primary-soft); --brand-green: var(--brand-success); --brand-green-dark: var(--brand-success-dark); --brand-green-soft: var(--brand-success-soft); /* A muted brand red used by the order-type and location ICONS only. Intentionally NOT chained to --brand-primary: it is a DESATURATED red, not a darkened one, so no single colour-mix of --brand-primary reproduces it (mixing toward black keeps the saturation and visibly shifts these icons). Deriving it is therefore a colour-design decision, not a mechanical repoint — left for the Phase 2 colour sweep. A brand can still theme it today by setting a "--brand-red-muted" field on its Theme document. */ --brand-red-muted: #b32222; }