/* ============================================================================ TIER 2 — BRAND Source: design-system/DESIGN.md §4.2 (brand aliases), §7 (shape) Resolved by the BRAND switch: [data-brand="bigheart" | "bwhi"] on . Light and Dark are SEPARATE variables here — the theme switch happens one tier up, in tokens.semantic.css. That is what the DS documents, and it is why a brand switch and a theme switch never interfere. NEVER reference --brand-* from component code. Use Semantic/Color and Semantic/Shape. See CLAUDE.md non-negotiable #3. ========================================================================== */ :root, [data-brand="bigheart"] { /* Solid */ --brand-solid-default-light: var(--palette-bigheart-600); --brand-solid-hover-light: var(--palette-bigheart-500); --brand-solid-pressed-light: var(--palette-bigheart-700); --brand-solid-default-dark: var(--palette-bigheart-400); --brand-solid-hover-dark: var(--palette-bigheart-350); --brand-solid-pressed-dark: var(--palette-bigheart-500); /* On-Solid — white in both modes; brand solids stay mid-lightness. */ --brand-on-solid-light: var(--palette-base-white); --brand-on-solid-dark: var(--palette-base-white); /* Soft */ --brand-soft-default-light: var(--palette-bigheart-soft-light); --brand-soft-hover-light: var(--palette-bigheart-soft-light-hover); --brand-soft-pressed-light: var(--palette-bigheart-soft-light-pressed); --brand-soft-default-dark: var(--palette-bigheart-soft-dark); --brand-soft-hover-dark: var(--palette-bigheart-soft-dark-hover); --brand-soft-pressed-dark: var(--palette-bigheart-soft-dark-pressed); /* On-Soft — unlike On-Solid, this flips between modes. */ --brand-on-soft-light: var(--palette-bigheart-600); --brand-on-soft-dark: var(--palette-bigheart-200); /* Content, Border, Indicator, Focus */ --brand-content-light: var(--palette-bigheart-600); --brand-content-dark: var(--palette-bigheart-200); --brand-border-light: var(--palette-bigheart-600); --brand-border-dark: var(--palette-bigheart-300); --brand-indicator-light: var(--palette-bigheart-600); --brand-indicator-dark: var(--palette-bigheart-400); --brand-focus-light: var(--palette-bigheart-600); --brand-focus-dark: var(--palette-bigheart-300); } [data-brand="bwhi"] { --brand-solid-default-light: var(--palette-bwhi-600); --brand-solid-hover-light: var(--palette-bwhi-500); --brand-solid-pressed-light: var(--palette-bwhi-700); /* Different ramp step per brand so both clear a 4.5:1 white label. */ --brand-solid-default-dark: var(--palette-bwhi-500); --brand-solid-hover-dark: var(--palette-bwhi-450); --brand-solid-pressed-dark: var(--palette-bwhi-600); --brand-on-solid-light: var(--palette-base-white); --brand-on-solid-dark: var(--palette-base-white); --brand-soft-default-light: var(--palette-bwhi-soft-light); --brand-soft-hover-light: var(--palette-bwhi-soft-light-hover); --brand-soft-pressed-light: var(--palette-bwhi-soft-light-pressed); --brand-soft-default-dark: var(--palette-bwhi-soft-dark); --brand-soft-hover-dark: var(--palette-bwhi-soft-dark-hover); --brand-soft-pressed-dark: var(--palette-bwhi-soft-dark-pressed); --brand-on-soft-light: var(--palette-bwhi-600); --brand-on-soft-dark: var(--palette-bwhi-300); --brand-content-light: var(--palette-bwhi-600); --brand-content-dark: var(--palette-bwhi-300); --brand-border-light: var(--palette-bwhi-600); --brand-border-dark: var(--palette-bwhi-400); --brand-indicator-light: var(--palette-bwhi-600); --brand-indicator-dark: var(--palette-bwhi-500); --brand-focus-light: var(--palette-bwhi-600); --brand-focus-dark: var(--palette-bwhi-400); } /* --- Brand/Shape — the per-brand geometry hook --------------------------- Shape aliases Brand, which aliases Semantic/Radius + Semantic/Border. Both brands resolve identically today; the hook exists so a brand can change its corner language without touching a single component. */ :root, [data-brand="bigheart"], [data-brand="bwhi"] { --brand-shape-radius-button: var(--radius-sm); --brand-shape-radius-input: var(--radius-sm); --brand-shape-radius-card: var(--radius-md); --brand-shape-radius-modal: var(--radius-md); --brand-shape-radius-menu: var(--radius-sm); --brand-shape-radius-chip: var(--radius-sm); --brand-shape-radius-tooltip: var(--radius-sm); --brand-shape-radius-avatar: var(--radius-full); --brand-shape-border-default: var(--border-width-thin); --brand-shape-border-emphasis: var(--border-width-thick); --brand-shape-focus-width: var(--border-width-thick); --brand-shape-focus-offset: var(--space-px); }