/* -------------------------------------------------------------- Per-brand color tokens. Each brand overrides --color-brand-* tokens scoped via [data-brand=""] on the element. All v2 components (btn-brand, badge-verified, kicker text, focus rings, sticky-cta shadow, link colors etc.) automatically pick up the brand identity through these CSS variables — no per-component selectors needed. Primary accent extracted from the legacy `css/brands/.css` files. Darker/lighter shades derived empirically (≈ 12% lighter for 400, 12% darker for 600, 24% darker for 700) to keep the contrast pattern used in v2 components. -------------------------------------------------------------- */ /* ===== alfapak — deep purple ===== */ html[data-brand="alfapak"] { --color-brand-50: #f1eef9; --color-brand-100: #d9d0ee; --color-brand-200: #b09cdb; --color-brand-300: #836bc7; --color-brand-400: #5a3eaa; --color-brand-500: #29166f; --color-brand-600: #211158; --color-brand-700: #1b0d51; --color-brand-800: #15083f; --color-brand-900: #100632; --color-brand-950: #080318; } /* ===== avangard — red ===== */ html[data-brand="avangard"] { --color-brand-50: #fceaeb; --color-brand-100: #f9c5c8; --color-brand-200: #ee8a90; --color-brand-300: #d95057; --color-brand-400: #c3262e; --color-brand-500: #a51119; --color-brand-600: #8e0d14; --color-brand-700: #82060c; --color-brand-800: #66050a; --color-brand-900: #4b0407; --color-brand-950: #260203; } /* ===== festo — sky blue ===== */ html[data-brand="festo"] { --color-brand-50: #e6f5fc; --color-brand-100: #bee5f7; --color-brand-200: #7fcaef; --color-brand-300: #44ade5; --color-brand-400: #1d9cdf; --color-brand-500: #0091dc; --color-brand-600: #0080c4; --color-brand-700: #0077b5; --color-brand-800: #005d8d; --color-brand-900: #00466b; --color-brand-950: #002335; } /* ===== griggio — dark teal ===== */ html[data-brand="griggio"] { --color-brand-50: #e1efef; --color-brand-100: #b6d5d6; --color-brand-200: #79b0b2; --color-brand-300: #3c8a8e; --color-brand-400: #156d72; --color-brand-500: #036063; --color-brand-600: #024f52; --color-brand-700: #024247; --color-brand-800: #013436; --color-brand-900: #012628; --color-brand-950: #001314; } /* ===== hundegger — red-orange ===== */ html[data-brand="hundegger"] { --color-brand-50: #ffe7e0; --color-brand-100: #ffc4b3; --color-brand-200: #ff8e6e; --color-brand-300: #ff5a37; --color-brand-400: #ff3a13; --color-brand-500: #ff2900; --color-brand-600: #d92300; --color-brand-700: #b51d00; --color-brand-800: #8c1600; --color-brand-900: #631000; --color-brand-950: #310800; } /* ===== kbstanok — dark teal ===== */ html[data-brand="kbstanok"] { --color-brand-50: #e7f0f2; --color-brand-100: #c2d8db; --color-brand-200: #84b1b8; --color-brand-300: #4b8993; --color-brand-400: #2c6f7a; --color-brand-500: #225862; --color-brand-600: #1c4a54; --color-brand-700: #173e46; --color-brand-800: #122f35; --color-brand-900: #0d2226; --color-brand-950: #061114; } /* ===== mastertaiga — dark green ===== */ html[data-brand="mastertaiga"] { --color-brand-50: #e8f3e3; --color-brand-100: #c8e2bd; --color-brand-200: #92c483; --color-brand-300: #5fa64d; --color-brand-400: #3b8628; --color-brand-500: #266612; --color-brand-600: #1f550f; --color-brand-700: #1a480c; --color-brand-800: #133609; --color-brand-900: #0e2806; --color-brand-950: #061403; } /* ===== murka — light blue ===== */ html[data-brand="murka"] { --color-brand-50: #f1f8fc; --color-brand-100: #dfeef7; --color-brand-200: #c2dff1; --color-brand-300: #a5d1ec; --color-brand-400: #98cae5; --color-brand-500: #7ab3d3; --color-brand-600: #5e9bbe; --color-brand-700: #4881a0; --color-brand-800: #355f76; --color-brand-900: #233f4f; --color-brand-950: #111f27; } /* ===== pakverk — orange ===== */ html[data-brand="pakverk"] { --color-brand-50: #fff5e7; --color-brand-100: #ffe2b8; --color-brand-200: #ffc870; --color-brand-300: #ffb144; --color-brand-400: #ffad34; --color-brand-500: #f59a18; --color-brand-600: #d18011; --color-brand-700: #ad670d; --color-brand-800: #834e0a; --color-brand-900: #5a3506; --color-brand-950: #2d1a03; } /* ===== sahos — dark navy ===== */ html[data-brand="sahos"] { --color-brand-50: #e8ecf2; --color-brand-100: #b8c0d0; --color-brand-200: #7480a0; --color-brand-300: #3a4870; --color-brand-400: #1b2a4f; --color-brand-500: #012245; --color-brand-600: #011c39; --color-brand-700: #01172e; --color-brand-800: #010f1f; --color-brand-900: #030e22; --color-brand-950: #00070f; } /* ===== saom — blue ===== */ html[data-brand="saom"] { --color-brand-50: #e9f5fc; --color-brand-100: #c4e6f7; --color-brand-200: #88cdef; --color-brand-300: #4eb4e7; --color-brand-400: #2aa4dd; --color-brand-500: #29a6de; --color-brand-600: #1f8bbc; --color-brand-700: #186f97; --color-brand-800: #135472; --color-brand-900: #0d3c51; --color-brand-950: #061d27; } /* ===== stankoabraziv — sky blue ===== */ html[data-brand="stankoabraziv"] { --color-brand-50: #e6f6fe; --color-brand-100: #b9e4fb; --color-brand-200: #6ec8f7; --color-brand-300: #2cb5f5; --color-brand-400: #10b0f4; --color-brand-500: #0e9ad4; --color-brand-600: #0c84b6; --color-brand-700: #0a6a91; --color-brand-800: #07506e; --color-brand-900: #053a4f; --color-brand-950: #021c27; } /* ===== stankoff — cyan-teal ===== */ html[data-brand="stankoff"] { --color-brand-50: #e8f9fb; --color-brand-100: #c1eff3; --color-brand-200: #7adbe1; --color-brand-300: #45cad3; --color-brand-400: #32c5d2; --color-brand-500: #27aab4; --color-brand-600: #1e8c93; --color-brand-700: #186f74; --color-brand-800: #135358; --color-brand-900: #0d3a3f; --color-brand-950: #061d20; } /* ===== vestrona — medium blue ===== */ html[data-brand="vestrona"] { --color-brand-50: #ecf3f9; --color-brand-100: #c5ddec; --color-brand-200: #87b8d7; --color-brand-300: #5497c1; --color-brand-400: #4193bc; --color-brand-500: #2e7da3; --color-brand-600: #246583; --color-brand-700: #217097; --color-brand-800: #173d52; --color-brand-900: #0f2a39; --color-brand-950: #07141c; } /* ===== vollmer — orange ===== */ html[data-brand="vollmer"] { --color-brand-50: #fff1e3; --color-brand-100: #ffd9b3; --color-brand-200: #ffb56b; --color-brand-300: #ff9534; --color-brand-400: #ff8307; --color-brand-500: #e16c00; --color-brand-600: #bf5f00; --color-brand-700: #984b00; --color-brand-800: #6f3700; --color-brand-900: #4a2400; --color-brand-950: #251200; } /* ===== weinig — dark green ===== */ html[data-brand="weinig"] { --color-brand-50: #e0f4e7; --color-brand-100: #b3e2c4; --color-brand-200: #6dc78c; --color-brand-300: #2faa55; --color-brand-400: #129546; --color-brand-500: #01843e; --color-brand-600: #016f34; --color-brand-700: #005c2b; --color-brand-800: #004620; --color-brand-900: #003117; --color-brand-950: #00180b; } /* ===== innostan / keysi / others — fall back to default ProСтанки teal (no override = inherit --color-brand-* from :root in tailwind.css). */