/* SmallModern brand core — design system v2.1, Main Street. ONE token vocabulary (--rs-*), the chosen brand ([data-brand="main-street"]) and THREE sub-styles ([data-expression]). Components read brand tokens (--rs-*), sub-style settings (--rs-x-*) and surface roles (--rs-fg, --rs-surface, --rs-cta-*), so a brand is a block of root variables and nothing else. The two options not chosen (notebook, plan) live in options.css, which only the picker (/design-system/) loads. Sub-styles: website | editorial | offer (editorial is a reading variant of website; offer is the loud one) Every page sets both on : A wrapper with data-brand and no data-expression falls back to website. Tiers, read top to bottom: 1. Shared scale (:root) --rs-step-*, --rs-space-*, --rs-measure … 2. Brand block ([data-brand]) --rs-bg, --rs-brand, --rs-font-display … --rs-web-* / --rs-ed-* / --rs-offer-* roles 3. Sub-style mapping ([data-expression]) --rs-x-* = the active sub-style's roles 4. Surface roles (defaults here; flipped by --rs-surface, --rs-fg, --rs-fg-2, --rs-fg-bad, --rs-rule, bands, the footer and .sm-on-dark in --rs-fg-accent, --rs-cta-*, --rs-focus components.css) Components read tiers 2–4 only; they never name a colour, font or brand. Layers: sm.tokens < sm.base < sm.components < sm.page. Page files (/css/pages/*.css) use sm.page for layout that belongs to one page only. */ @layer sm.tokens, sm.base, sm.components, sm.page; @layer sm.tokens { /* ── 1. Shared scale (brand-independent) ──────────────────── */ :root { --rs-step--2: clamp(0.8125rem, 0.79rem + 0.1vw, 0.85rem); /* labels, badges: 13–13.6px */ --rs-step--1: clamp(0.9375rem, 0.92rem + 0.1vw, 0.97rem); /* small text: 15–15.5px */ --rs-step-0: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem); --rs-step-1: clamp(1.2rem, 1.13rem + 0.3vw, 1.33rem); --rs-step-2: clamp(1.44rem, 1.3rem + 0.6vw, 1.77rem); --rs-step-3: clamp(1.73rem, 1.5rem + 1vw, 2.37rem); --rs-step-4: clamp(2.07rem, 1.7rem + 1.6vw, 3.16rem); --rs-step-5: clamp(2.49rem, 1.9rem + 2.6vw, 4.2rem); --rs-step-6: clamp(3rem, 2rem + 4.4vw, 5.6rem); --rs-step-numeral: clamp(5rem, 3rem + 9vw, 10rem); --rs-leading-tight: 1.08; --rs-leading-body: 1.6; --rs-space-1: 0.25rem; --rs-space-2: 0.5rem; --rs-space-3: 0.75rem; --rs-space-4: 1rem; --rs-space-5: 1.5rem; --rs-space-6: 2rem; --rs-space-7: 3rem; --rs-space-8: 4.5rem; --rs-space-9: 7rem; --rs-gutter: clamp(1rem, 0.6rem + 2vw, 2rem); --rs-measure: 31em; --rs-measure-narrow: 24em; /* em, not ch: 60–70 characters in all three faces */ --rs-width-content: 72rem; --rs-width-wide: 88rem; --rs-width-reading: 42rem; /* reading column: fits a 31em measure at editorial body size */ --rs-border: 1px; --rs-target: 2.75rem; /* 44px: primary controls and nav links */ --rs-ease: cubic-bezier(0.2, 0.7, 0.2, 1); --rs-duration: 220ms; --rs-duration-quick: 110ms; /* hover colour changes: a button or card answers the pointer at once */ /* Shared data assets (alpha masks; colour comes from tokens) */ --rs-asset-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --rs-asset-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* ══════════════════════════════════════════════════════════════ OPTION 3 · MAIN STREET — cream, espresso, a green awning, one red pill, butter stickers. The shop with the green awning you trust before you've read the menu. Everything is rounded; everything is grown-up. Owns: the awning on every hero, sticker badges, pill buttons with a press, white cards on cream, the price card under its awning, and the open-light dot on section labels. Rules: one poppy fill per screen (on offer pages it is the button); the 7px open light on section labels is exempt. No red small text. Red and green meet only through cream. Stickers tilt (±2°) in the offer sub-style only. No serif anywhere. ══════════════════════════════════════════════════════════════ */ [data-brand="main-street"] { --rs-step-0: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem); --rs-bg: oklch(97.5% 0.02 90); /* cream #fcf7e8 */ --rs-bg-2: oklch(94.5% 0.03 90); /* cream-2 */ --rs-bg-3: color-mix(in oklch, var(--rs-hi) 22%, var(--rs-bg)); /* butter wash */ --rs-card: #ffffff; /* white cards on cream */ --rs-ink: oklch(28% 0.035 50); /* espresso #372419 */ --rs-ink-2: oklch(46% 0.03 50); /* #665349 6.8:1 */ --rs-ink-3: oklch(50% 0.03 50); /* #725f54 5.6:1 */ --rs-brand: oklch(40% 0.11 150); /* forest #005725 white 8.8:1, cream 8.2:1, butter on it 6.6:1 — a deep awning green, well clear of Notebook's ink-teal */ --rs-brand-hover: oklch(35% 0.095 150); /* #02481d: the fill on hover, one clear step darker, no glow */ --rs-brand-deep: oklch(32% 0.088 150); /* #003f18: deep forest (text on light grounds, the button on a cream band) */ --rs-brand-ledge: oklch(21% 0.055 150); /* #011f0a: the ledge under the forest pill, 2.0:1 below the fill and 1.6:1 below the hover fill, so they never merge */ --rs-brand-tint: oklch(94% 0.035 150); /* mint wash, forest 7.4:1 */ --rs-accent: oklch(53% 0.185 29); /* poppy #c02d22 white on it 5.8 */ --rs-accent-hover: oklch(46.5% 0.17 28); /* #a31d19: the poppy fill on hover, one clear step darker; white on it 7.6:1 */ --rs-accent-deep: oklch(30% 0.1 27); /* #55110f poppy-deep: the ledge under the poppy pill, 2.5:1 below the fill and 1.9:1 below the hover fill (butter's: 2.8:1 and 2.5:1) */ --rs-accent-fg: #ffffff; --rs-accent-text: var(--rs-brand-deep); /* no small red text: the one red is the button */ --rs-accent-tint: oklch(95% 0.025 29); --rs-hi: oklch(90.4% 0.147 94.5); /* butter #ffde60 espresso 11.1 (in sRGB) */ --rs-hi-hover: oklch(87% 0.15 90); /* the butter fill on hover */ --rs-hi-deep: oklch(62% 0.12 80); /* #ac7d1b: the press under a butter pill, 3.7:1 on white */ --rs-hi-press: var(--rs-hi-deep); --rs-hi-fg: var(--rs-ink); --rs-marker: var(--rs-hi); --rs-night: var(--rs-ink); /* espresso is the dark */ --rs-night-fg: var(--rs-bg); --rs-night-accent: var(--rs-hi); --rs-dark: var(--rs-ink); --rs-dark-fg: var(--rs-bg); --rs-dark-fg-2: color-mix(in oklch, var(--rs-dark-fg) 78%, var(--rs-dark)); /* 8.5:1 */ --rs-dark-accent: var(--rs-hi); /* butter labels on espresso: allowed on dark grounds */ --rs-dark-cta-bg: var(--rs-hi); --rs-dark-cta-fg: var(--rs-ink); --rs-dark-cta-hover: var(--rs-hi-hover); --rs-dark-cta-press: var(--rs-hi-deep); --rs-dark-bad: oklch(80% 0.1 25); --rs-on-brand-accent: var(--rs-hi); /* butter on forest 5.3:1; the open light turns butter here, never red on green */ --rs-line: color-mix(in oklch, var(--rs-ink) 14%, transparent); --rs-line-strong: color-mix(in oklch, var(--rs-ink) 30%, transparent); --rs-control-border: var(--rs-brand); --rs-focus-ring: var(--rs-brand); --rs-focus-on-dark: var(--rs-hi); --rs-ok: oklch(50% 0.09 175); /* #107460 a blue-green, so "confirmed" never reads as brand decoration */ --rs-ok-tint: color-mix(in oklab, var(--rs-ok) 14%, var(--rs-card)); --rs-warn: oklch(62% 0.13 70); --rs-warn-text: oklch(47% 0.10 70); --rs-warn-tint: color-mix(in oklab, var(--rs-warn) 18%, var(--rs-card)); --rs-bad: oklch(45% 0.15 12); /* #96233f wine, ΔE 10 from poppy: an error never looks like the CTA */ --rs-bad-tint: color-mix(in oklab, var(--rs-bad) 12%, var(--rs-card)); --rs-info: var(--rs-brand); --rs-info-tint: var(--rs-brand-tint); --rs-font-display: "Outfit", "Segoe UI", system-ui, sans-serif; --rs-font-sans: "Figtree", "Segoe UI", system-ui, sans-serif; --rs-font-mono: "DM Mono", ui-monospace, Consolas, monospace; --rs-font-quote: var(--rs-font-sans); --rs-quote-style: italic; --rs-quote-weight: 400; --rs-label-font: var(--rs-font-sans); --rs-label-weight: 700; --rs-label-tracking: 0.10em; --rs-label-transform: uppercase; --rs-label-before-display: block; /* the red "open" light — section labels only */ --rs-label-before-w: 0.6em; --rs-label-before-h: 0.6em; --rs-label-before-radius: 50%; --rs-label-before-bg: var(--rs-accent); --rs-card-label-before-display: none; /* no open light inside cards: keeps the red count at one */ --rs-label-before-bg-tint: var(--rs-brand); /* on tinted grounds (the mint editorial panels) the light turns forest */ --rs-label-idx-display: none; --rs-section-rule-display: none; --rs-ui-weight: 700; --rs-radius-s: 10px; --rs-radius-m: 16px; --rs-radius-l: 24px; --rs-shadow-1: 0 1px 2px color-mix(in oklch, var(--rs-brand) 12%, transparent); --rs-shadow-2: 0 8px 24px color-mix(in oklch, var(--rs-brand) 14%, transparent); --rs-shadow-3: 0 20px 48px color-mix(in oklch, var(--rs-brand) 18%, transparent); --rs-btn-weight: 700; --rs-btn-transform: none; --rs-btn-tracking: 0; --rs-btn-rest-press: 4px; --rs-btn-rest-press-hover: 4px; --rs-btn-min-h: 3rem; --rs-btn-hi-bg: var(--rs-hi); --rs-btn-hi-fg: var(--rs-hi-fg); --rs-btn-hi-border: transparent; --rs-btn-hi-hover: var(--rs-hi-hover); --rs-sticker-bg: var(--rs-hi); --rs-sticker-fg: var(--rs-hi-fg); --rs-sticker-ring: inset 0 0 0 1px color-mix(in oklch, var(--rs-brand) 45%, transparent); --rs-card-border: 1.5px solid var(--rs-line); --rs-card-shadow: none; --rs-card-link-shadow: 0 4px 0 transparent; --rs-card-hover-shadow: 0 4px 0 var(--rs-line-strong); --rs-card-hover-transform: none; --rs-card-hover-border: var(--rs-brand); /* sturdy: the ledge is there at rest in a clear colour and only takes a colour on hover; no lift, no glow, nothing grows */ --rs-card-raised-shadow: var(--rs-shadow-2); --rs-card-raised-rule: transparent; --rs-card-hover-rule: transparent; --rs-feature-bg: var(--rs-card); --rs-feature-border: 1.5px solid var(--rs-line); --rs-feature-rule: var(--rs-feature-border); --rs-feature-radius: var(--rs-radius-l); /* white shop-window cards */ --rs-feature-index-display: none; --rs-feature-icon-display: grid; --rs-feature-icon-bg: var(--rs-hi); --rs-feature-icon-fg: var(--rs-ink); --rs-feature-icon-radius: 50%; --rs-feature-icon-size: 2.75rem; --rs-feature-pad: var(--rs-space-5); --rs-h2-rule: none; --rs-h2-pad: 0; --rs-h2-underline-display: block; --rs-numeral-font: var(--rs-font-display); --rs-numeral-weight: 800; --rs-numeral-tracking: -0.05em; --rs-numeral-lh: 0.85; --rs-numeral-vf: normal; --rs-numeral-border: 0 solid transparent; --rs-numeral-pad: 0; --rs-numeral-caption-display: none; --rs-numeral-caption-font: var(--rs-label-font); --rs-numeral-trim: normal; --rs-numeral-rule: 0 solid transparent; --rs-asset-marker: none; --rs-highlight-bg: none; --rs-highlight-bg-tint: none; --rs-highlight-pad: 0px; --rs-highlight-radius: 0; --rs-highlight-decoration: underline; --rs-highlight-thickness: 0.12em; --rs-highlight-offset: 0.1em; --rs-highlight-color: var(--rs-brand); --rs-highlight-skip-ink: none; --rs-prompt-bg: var(--rs-card); --rs-prompt-border: 2px solid var(--rs-brand); --rs-prompt-radius: var(--rs-radius-l); --rs-prompt-shadow: var(--rs-shadow-2); --rs-prompt-rule: 2px solid var(--rs-brand); --rs-prompt-bar-bg: var(--rs-ink); --rs-prompt-bar-fg: var(--rs-bg); --rs-prompt-bar-font: var(--rs-font-sans); --rs-prompt-bar-transform: none; --rs-prompt-bar-tracking: 0; --rs-prompt-bar-focus: var(--rs-hi); --rs-prompt-copy-bg: var(--rs-hi); --rs-prompt-copy-fg: var(--rs-ink); --rs-prompt-copy-radius: 999px; --rs-prompt-copy-done-bg: var(--rs-brand); --rs-prompt-copy-done-fg: var(--rs-bg); --rs-prompt-text-bg: transparent; --rs-prompt-mark-bg: transparent; --rs-prompt-mark-decoration: underline; --rs-prompt-mark-color: var(--rs-brand); --rs-prompt-mark-thickness: 3px; /* the forest underline, never Notebook's yellow block */ --rs-weak-bg: var(--rs-bg-2); --rs-weak-border: 2px dashed var(--rs-ink-2); --rs-weak-fg: var(--rs-ink-2); --rs-strong-bg: var(--rs-card); --rs-strong-border: 2px solid var(--rs-brand); --rs-strong-shadow: var(--rs-shadow-1); --rs-price-bg: var(--rs-card); --rs-price-border: 2px solid var(--rs-brand); --rs-price-radius: var(--rs-radius-l); --rs-price-shadow: var(--rs-shadow-2); --rs-price-amount-font: var(--rs-font-display); --rs-price-amount-weight: 800; --rs-price-amount-tracking: -0.04em; --rs-price-awning-display: block; --rs-price-awning-h: 18px; --rs-price-band-display: none; --rs-price-leaders: none; /* the price card hangs under its own awning (the scallop strip's height) */ --rs-price-flag-bg: var(--rs-hi); --rs-price-flag-fg: var(--rs-ink); --rs-price-flag-radius: 999px; --rs-price-flag-transform: uppercase; --rs-price-flag-tracking: var(--rs-label-tracking); --rs-price-label-display: inline-flex; /* a butter sticker */ --rs-badge-bg: var(--rs-card); --rs-badge-radius: 999px; --rs-badge-ring: inset 0 0 0 2px var(--rs-bg); --rs-badge-shadow: 0 0 0 1px var(--rs-line-strong), 0 2px 0 color-mix(in oklch, var(--rs-ink) 20%, transparent); --rs-badge-weight: 700; --rs-pill-radius: 999px; --rs-pill-border-w: 1.5px; --rs-table-featured-bg: color-mix(in oklch, var(--rs-hi) 25%, var(--rs-card)); --rs-table-featured-head: var(--rs-hi); --rs-table-featured-rule: 0 0 0 transparent; --rs-media-radius: var(--rs-radius-l); --rs-media-border: 6px solid var(--rs-card); --rs-media-shadow: var(--rs-shadow-2); --rs-media-marks-display: none; --rs-media-marks-size: 0px; --rs-media-marks-w: 0px; --rs-play-radius: 50%; --rs-photo-hero: url("/assets/moodboard/main-street/ui-owner.jpg"); --rs-photo-2: url("/assets/moodboard/main-street/ui-montreal.jpg"); --rs-photo-3: url("/assets/moodboard/main-street/ui-open.jpg"); --rs-photo-filter: none; --rs-input-radius: var(--rs-radius-s); --rs-input-border-w: 2px; --rs-input-bg: var(--rs-card); --rs-select-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23665349' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); --rs-step-radius: 50%; --rs-check-radius: 50%; --rs-faq-marker: ""; --rs-faq-marker-open: rotate(180deg); --rs-faq-mask: var(--rs-asset-chevron); --rs-faq-mask-fill: currentColor; --rs-nav-font: var(--rs-font-sans); --rs-nav-weight: 700; --rs-nav-transform: none; --rs-nav-tracking: 0; --rs-nav-size: var(--rs-step--1); --rs-awning-display: block; --rs-header-bg: var(--rs-card); --rs-header-rule: 1.5px solid var(--rs-line-strong); /* a white sign board with a firm edge: clear against cream as the page scrolls */ --rs-hero-measure: 16ch; /* Texture & pattern: no ground texture — cream stays flat so white cards and stickers read cleanly — and no panel pattern. The awning (.sm-awning) is Main Street's pattern, and it only ever appears as a scalloped band. */ --rs-texture: none; --rs-texture-size: auto; --rs-texture-layer: none; --rs-pattern: none; --rs-cover-pattern: none; --rs-cover-inset: 7.5%; --rs-pdf-num-font: var(--rs-font-sans); --rs-email-rule: var(--rs-brand); --rs-wordmark-font: var(--rs-font-display); --rs-wordmark-weight: 700; --rs-wordmark-tracking: -0.02em; --rs-wordmark-transform: none; --rs-wordmark-accent: var(--rs-brand); --rs-logo-radius: 18px; --rs-logo-dot: var(--rs-hi); --rs-logo-body: var(--rs-brand); /* butter sun on forest: red never touches green */ --rs-web-heading-font: var(--rs-font-display); --rs-web-heading-weight: 600; --rs-web-heading-tracking: -0.01em; --rs-web-heading-lh: 1.1; --rs-web-heading-vf: normal; --rs-web-body: var(--rs-step-0); --rs-web-cta-bg: var(--rs-brand); --rs-web-cta-fg: var(--rs-card); --rs-web-cta-hover: var(--rs-brand-hover); --rs-web-cta-border: transparent; --rs-web-cta-radius: 999px; --rs-web-cta-press: var(--rs-brand-ledge); --rs-web-surface-2: var(--rs-bg-2); --rs-web-accent: var(--rs-brand); --rs-web-radius: var(--rs-radius-m); --rs-web-density: 1; --rs-web-hero-bg: var(--rs-bg); --rs-web-hero-fg: var(--rs-ink); --rs-web-hero-rule: none; --rs-web-hero-title: var(--rs-step-5); --rs-web-hero-pattern: none; --rs-web-press-x: 0px; --rs-web-press-y: 4px; --rs-web-press-x-hover: 0px; --rs-web-press-y-hover: 4px; --rs-web-btn-hover-shadow: 0 0 0 transparent; --rs-web-btn-hover-transform: none; --rs-web-btn-active-transform: translateY(2px); --rs-web-hero-plate: 0 0 0 transparent; --rs-web-awning-stripe: var(--rs-brand); --rs-web-badge-rotate: 0deg; --rs-web-numeral-color: var(--rs-brand); --rs-web-prompt-cutline: none; --rs-ed-heading-font: var(--rs-font-display); --rs-ed-heading-weight: 500; --rs-ed-heading-tracking: -0.005em; --rs-ed-heading-lh: 1.15; --rs-ed-heading-vf: normal; --rs-ed-body: var(--rs-step-1); --rs-ed-cta-bg: var(--rs-brand); --rs-ed-cta-fg: var(--rs-card); --rs-ed-cta-hover: var(--rs-brand-hover); --rs-ed-cta-border: transparent; --rs-ed-cta-radius: 999px; --rs-ed-cta-press: var(--rs-brand-ledge); --rs-ed-surface-2: var(--rs-brand-tint); --rs-ed-accent: var(--rs-brand); --rs-ed-radius: var(--rs-radius-m); --rs-ed-density: 1.2; --rs-ed-hero-bg: var(--rs-bg); --rs-ed-hero-fg: var(--rs-ink); --rs-ed-hero-rule: none; --rs-ed-hero-title: var(--rs-step-5); --rs-ed-hero-pattern: none; --rs-ed-press-x: 0px; --rs-ed-press-y: 4px; --rs-ed-press-x-hover: 0px; --rs-ed-press-y-hover: 4px; --rs-ed-btn-hover-shadow: 0 0 0 transparent; --rs-ed-btn-hover-transform: none; --rs-ed-btn-active-transform: translateY(2px); --rs-ed-hero-plate: 0 0 0 transparent; --rs-ed-awning-stripe: var(--rs-brand); --rs-ed-badge-rotate: 0deg; --rs-ed-numeral-color: var(--rs-brand); --rs-ed-prompt-cutline: none; /* Offer: a butter-washed shop front under the awning, an 800 headline, the one poppy pill with its press, and stickers that tilt. Labels and numerals stay forest. */ --rs-offer-heading-font: var(--rs-font-display); --rs-offer-heading-weight: 800; --rs-offer-heading-tracking: -0.03em; --rs-offer-heading-lh: 1.06; --rs-offer-heading-vf: normal; --rs-offer-body: var(--rs-step-1); --rs-offer-cta-bg: var(--rs-accent); --rs-offer-cta-fg: var(--rs-accent-fg); --rs-offer-cta-hover: var(--rs-accent-hover); --rs-offer-cta-border: transparent; --rs-offer-cta-radius: 999px; --rs-offer-cta-press: var(--rs-accent-deep); --rs-offer-surface-2: var(--rs-bg-3); --rs-offer-accent: var(--rs-brand); --rs-offer-radius: var(--rs-radius-l); --rs-offer-density: 0.9; --rs-offer-hero-bg: var(--rs-bg-3); --rs-offer-hero-fg: var(--rs-ink); --rs-offer-hero-rule: none; --rs-offer-hero-title: var(--rs-step-6); --rs-offer-hero-pattern: none; --rs-offer-press-x: 0px; --rs-offer-press-y: 4px; --rs-offer-press-x-hover: 0px; --rs-offer-press-y-hover: 4px; --rs-offer-btn-hover-shadow: 0 0 0 transparent; --rs-offer-btn-hover-transform: none; --rs-offer-btn-active-transform: translateY(2px); --rs-offer-hero-plate: 0 0 0 transparent; --rs-offer-awning-stripe: var(--rs-brand); --rs-offer-badge-rotate: -2deg; --rs-offer-numeral-color: var(--rs-brand); --rs-offer-prompt-cutline: none; } /* ══════════════════════════════════════════════════════════════ 3. Sub-styles map brand roles onto the --rs-x-* settings components read. A brand scope without data-expression falls back to website in its own brand. ══════════════════════════════════════════════════════════════ */ [data-brand]:not([data-expression]), [data-expression="website"] { --rs-x-heading-font: var(--rs-web-heading-font); --rs-x-heading-weight: var(--rs-web-heading-weight); --rs-x-heading-tracking: var(--rs-web-heading-tracking); --rs-x-heading-lh: var(--rs-web-heading-lh); --rs-x-heading-vf: var(--rs-web-heading-vf); --rs-x-body-size: var(--rs-web-body); --rs-x-cta-bg: var(--rs-web-cta-bg); --rs-x-cta-fg: var(--rs-web-cta-fg); --rs-x-cta-hover: var(--rs-web-cta-hover); --rs-x-cta-border: var(--rs-web-cta-border); --rs-x-cta-radius: var(--rs-web-cta-radius); --rs-x-cta-press: var(--rs-web-cta-press); --rs-x-press-x: var(--rs-web-press-x); --rs-x-press-y: var(--rs-web-press-y); --rs-x-press-x-hover: var(--rs-web-press-x-hover); --rs-x-press-y-hover: var(--rs-web-press-y-hover); --rs-x-btn-hover-shadow: var(--rs-web-btn-hover-shadow); --rs-x-btn-hover-transform: var(--rs-web-btn-hover-transform); --rs-x-btn-active-transform: var(--rs-web-btn-active-transform); --rs-x-awning-stripe: var(--rs-web-awning-stripe); --rs-x-badge-rotate: var(--rs-web-badge-rotate); --rs-x-numeral-color: var(--rs-web-numeral-color); --rs-x-prompt-cutline: var(--rs-web-prompt-cutline); --rs-x-surface-2: var(--rs-web-surface-2); --rs-x-accent: var(--rs-web-accent); --rs-x-radius: var(--rs-web-radius); --rs-x-density: var(--rs-web-density); --rs-x-hero-bg: var(--rs-web-hero-bg); --rs-x-hero-fg: var(--rs-web-hero-fg); --rs-x-hero-rule: var(--rs-web-hero-rule); --rs-x-hero-title: var(--rs-web-hero-title); --rs-x-hero-pattern: var(--rs-web-hero-pattern); --rs-x-hero-plate: var(--rs-web-hero-plate); } [data-expression="editorial"] { --rs-x-heading-font: var(--rs-ed-heading-font); --rs-x-heading-weight: var(--rs-ed-heading-weight); --rs-x-heading-tracking: var(--rs-ed-heading-tracking); --rs-x-heading-lh: var(--rs-ed-heading-lh); --rs-x-heading-vf: var(--rs-ed-heading-vf); --rs-x-body-size: var(--rs-ed-body); --rs-x-cta-bg: var(--rs-ed-cta-bg); --rs-x-cta-fg: var(--rs-ed-cta-fg); --rs-x-cta-hover: var(--rs-ed-cta-hover); --rs-x-cta-border: var(--rs-ed-cta-border); --rs-x-cta-radius: var(--rs-ed-cta-radius); --rs-x-cta-press: var(--rs-ed-cta-press); --rs-x-press-x: var(--rs-ed-press-x); --rs-x-press-y: var(--rs-ed-press-y); --rs-x-press-x-hover: var(--rs-ed-press-x-hover); --rs-x-press-y-hover: var(--rs-ed-press-y-hover); --rs-x-btn-hover-shadow: var(--rs-ed-btn-hover-shadow); --rs-x-btn-hover-transform: var(--rs-ed-btn-hover-transform); --rs-x-btn-active-transform: var(--rs-ed-btn-active-transform); --rs-x-awning-stripe: var(--rs-ed-awning-stripe); --rs-x-badge-rotate: var(--rs-ed-badge-rotate); --rs-x-numeral-color: var(--rs-ed-numeral-color); --rs-x-prompt-cutline: var(--rs-ed-prompt-cutline); --rs-x-surface-2: var(--rs-ed-surface-2); --rs-x-accent: var(--rs-ed-accent); --rs-x-radius: var(--rs-ed-radius); --rs-x-density: var(--rs-ed-density); --rs-x-hero-bg: var(--rs-ed-hero-bg); --rs-x-hero-fg: var(--rs-ed-hero-fg); --rs-x-hero-rule: var(--rs-ed-hero-rule); --rs-x-hero-title: var(--rs-ed-hero-title); --rs-x-hero-pattern: var(--rs-ed-hero-pattern); --rs-x-hero-plate: var(--rs-ed-hero-plate); } [data-expression="offer"] { --rs-x-heading-font: var(--rs-offer-heading-font); --rs-x-heading-weight: var(--rs-offer-heading-weight); --rs-x-heading-tracking: var(--rs-offer-heading-tracking); --rs-x-heading-lh: var(--rs-offer-heading-lh); --rs-x-heading-vf: var(--rs-offer-heading-vf); --rs-x-body-size: var(--rs-offer-body); --rs-x-cta-bg: var(--rs-offer-cta-bg); --rs-x-cta-fg: var(--rs-offer-cta-fg); --rs-x-cta-hover: var(--rs-offer-cta-hover); --rs-x-cta-border: var(--rs-offer-cta-border); --rs-x-cta-radius: var(--rs-offer-cta-radius); --rs-x-cta-press: var(--rs-offer-cta-press); --rs-x-press-x: var(--rs-offer-press-x); --rs-x-press-y: var(--rs-offer-press-y); --rs-x-press-x-hover: var(--rs-offer-press-x-hover); --rs-x-press-y-hover: var(--rs-offer-press-y-hover); --rs-x-btn-hover-shadow: var(--rs-offer-btn-hover-shadow); --rs-x-btn-hover-transform: var(--rs-offer-btn-hover-transform); --rs-x-btn-active-transform: var(--rs-offer-btn-active-transform); --rs-x-awning-stripe: var(--rs-offer-awning-stripe); --rs-x-badge-rotate: var(--rs-offer-badge-rotate); --rs-x-numeral-color: var(--rs-offer-numeral-color); --rs-x-prompt-cutline: var(--rs-offer-prompt-cutline); --rs-x-surface-2: var(--rs-offer-surface-2); --rs-x-accent: var(--rs-offer-accent); --rs-x-radius: var(--rs-offer-radius); --rs-x-density: var(--rs-offer-density); --rs-x-hero-bg: var(--rs-offer-hero-bg); --rs-x-hero-fg: var(--rs-offer-hero-fg); --rs-x-hero-rule: var(--rs-offer-hero-rule); --rs-x-hero-title: var(--rs-offer-hero-title); --rs-x-hero-pattern: var(--rs-offer-hero-pattern); --rs-x-hero-plate: var(--rs-offer-hero-plate); } /* ══════════════════════════════════════════════════════════════ 4. Surface roles: what sits ON a surface reads these, so the same component works on the page, a tint, a brand band or a dark band. Declared wherever a brand or sub-style is (re)declared; bands, the footer, .sm-on-dark and light islands (cards, dialogs, notices…) re-declare them in components.css. ══════════════════════════════════════════════════════════════ */ :where([data-brand], [data-expression]) { --rs-surface: var(--rs-bg); --rs-fg: var(--rs-ink); --rs-fg-2: var(--rs-ink-2); --rs-fg-3: var(--rs-ink-3); --rs-fg-bad: var(--rs-bad); --rs-rule: var(--rs-line); --rs-rule-strong: var(--rs-line-strong); --rs-fg-accent: var(--rs-x-accent); --rs-cta-bg: var(--rs-x-cta-bg); --rs-cta-fg: var(--rs-x-cta-fg); --rs-cta-hover: var(--rs-x-cta-hover); --rs-cta-border: var(--rs-x-cta-border); --rs-cta-press: var(--rs-x-cta-press); --rs-focus: var(--rs-focus-ring); --rs-focus-halo: var(--rs-bg); } }