/* ─── Fonts — self-hosted woff2 only (GDPR: no external font CDN) ─── */
@font-face {
  font-family: "DM Serif Display";
  src: url("../fonts/dm-serif-display-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("../fonts/dm-sans-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("../fonts/dm-sans-600-latin.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ============================================================

 * Nova — LPWD Design System · Zenith Standard · 2026-10-16 17:24

 * Edit the config JSON — never edit this file directly.

 * Token names are ACSS-compatible. WordPress (ACSS) and vanilla

 * HTML (Nova) projects share an identical token vocabulary.

 * ============================================================ */



:root, .color-scheme--main {
  /* primary — #D9712A */
  --primary-hex: #D9712A;
  --primary-hsl: 24 70% 51%;
  --primary-rgb: 217 113 42;
  --primary-h: 24;
  --primary-s: 70%;
  --primary-l: 51%;
  --primary-hover-h: 24;
  --primary-hover-s: 70%;
  --primary-hover-l: 59%;
  --primary-ultra-light-h: 24;
  --primary-ultra-light-s: 70%;
  --primary-ultra-light-l: 95%;
  --primary-light-h: 24;
  --primary-light-s: 70%;
  --primary-light-l: 85%;
  --primary-semi-light-h: 24;
  --primary-semi-light-s: 70%;
  --primary-semi-light-l: 65%;
  --primary-semi-dark-h: 24;
  --primary-semi-dark-s: 70%;
  --primary-semi-dark-l: 35%;
  --primary-dark-h: 24;
  --primary-dark-s: 70%;
  --primary-dark-l: 25%;
  --primary-ultra-dark-h: 24;
  --primary-ultra-dark-s: 70%;
  --primary-ultra-dark-l: 10%;
  --primary: #D9712A;
  --primary-hover: #e0884d;
  --primary-ultra-light: #fbf0e9;
  --primary-light: #f4d3be;
  --primary-semi-light: #e49967;
  --primary-semi-dark: #984d1b;
  --primary-dark: #6c3713;
  --primary-ultra-dark: #2b1608;
  --primary-trans-10: rgba(217, 113, 42, 0.1);
  --primary-trans-20: rgba(217, 113, 42, 0.2);
  --primary-trans-30: rgba(217, 113, 42, 0.3);
  --primary-trans-40: rgba(217, 113, 42, 0.4);
  --primary-trans-50: rgba(217, 113, 42, 0.5);
  --primary-trans-60: rgba(217, 113, 42, 0.6);
  --primary-trans-70: rgba(217, 113, 42, 0.7);
  --primary-trans-80: rgba(217, 113, 42, 0.8);
  --primary-trans-90: rgba(217, 113, 42, 0.9);
  --primary-light-trans-10: rgba(244, 211, 190, 0.1);
  --primary-light-trans-20: rgba(244, 211, 190, 0.2);
  --primary-light-trans-30: rgba(244, 211, 190, 0.3);
  --primary-light-trans-40: rgba(244, 211, 190, 0.4);
  --primary-light-trans-50: rgba(244, 211, 190, 0.5);
  --primary-light-trans-60: rgba(244, 211, 190, 0.6);
  --primary-light-trans-70: rgba(244, 211, 190, 0.7);
  --primary-light-trans-80: rgba(244, 211, 190, 0.8);
  --primary-light-trans-90: rgba(244, 211, 190, 0.9);
  --primary-dark-trans-10: rgba(108, 55, 19, 0.1);
  --primary-dark-trans-20: rgba(108, 55, 19, 0.2);
  --primary-dark-trans-30: rgba(108, 55, 19, 0.3);
  --primary-dark-trans-40: rgba(108, 55, 19, 0.4);
  --primary-dark-trans-50: rgba(108, 55, 19, 0.5);
  --primary-dark-trans-60: rgba(108, 55, 19, 0.6);
  --primary-dark-trans-70: rgba(108, 55, 19, 0.7);
  --primary-dark-trans-80: rgba(108, 55, 19, 0.8);
  --primary-dark-trans-90: rgba(108, 55, 19, 0.9);
  --primary-ultra-dark-trans-10: rgba(43, 22, 8, 0.1);
  --primary-ultra-dark-trans-20: rgba(43, 22, 8, 0.2);
  --primary-ultra-dark-trans-30: rgba(43, 22, 8, 0.3);
  --primary-ultra-dark-trans-40: rgba(43, 22, 8, 0.4);
  --primary-ultra-dark-trans-50: rgba(43, 22, 8, 0.5);
  --primary-ultra-dark-trans-60: rgba(43, 22, 8, 0.6);
  --primary-ultra-dark-trans-70: rgba(43, 22, 8, 0.7);
  --primary-ultra-dark-trans-80: rgba(43, 22, 8, 0.8);
  --primary-ultra-dark-trans-90: rgba(43, 22, 8, 0.9);

  /* secondary — #4A3324 */
  --secondary-hex: #4A3324;
  --secondary-hsl: 24 35% 22%;
  --secondary-rgb: 74 51 36;
  --secondary-h: 24;
  --secondary-s: 35%;
  --secondary-l: 22%;
  --secondary-hover-h: 24;
  --secondary-hover-s: 35%;
  --secondary-hover-l: 25%;
  --secondary-ultra-light-h: 24;
  --secondary-ultra-light-s: 35%;
  --secondary-ultra-light-l: 95%;
  --secondary-light-h: 24;
  --secondary-light-s: 35%;
  --secondary-light-l: 85%;
  --secondary-semi-light-h: 24;
  --secondary-semi-light-s: 35%;
  --secondary-semi-light-l: 65%;
  --secondary-semi-dark-h: 24;
  --secondary-semi-dark-s: 35%;
  --secondary-semi-dark-l: 35%;
  --secondary-dark-h: 24;
  --secondary-dark-s: 35%;
  --secondary-dark-l: 25%;
  --secondary-ultra-dark-h: 24;
  --secondary-ultra-dark-s: 35%;
  --secondary-ultra-dark-l: 10%;
  --secondary: #4A3324;
  --secondary-hover: #563b29;
  --secondary-ultra-light: #f7f1ee;
  --secondary-light: #e6d6cb;
  --secondary-semi-light: #c5a087;
  --secondary-semi-dark: #78533a;
  --secondary-dark: #563b29;
  --secondary-ultra-dark: #221811;
  --secondary-trans-10: rgba(74, 51, 36, 0.1);
  --secondary-trans-20: rgba(74, 51, 36, 0.2);
  --secondary-trans-30: rgba(74, 51, 36, 0.3);
  --secondary-trans-40: rgba(74, 51, 36, 0.4);
  --secondary-trans-50: rgba(74, 51, 36, 0.5);
  --secondary-trans-60: rgba(74, 51, 36, 0.6);
  --secondary-trans-70: rgba(74, 51, 36, 0.7);
  --secondary-trans-80: rgba(74, 51, 36, 0.8);
  --secondary-trans-90: rgba(74, 51, 36, 0.9);
  --secondary-light-trans-10: rgba(230, 214, 203, 0.1);
  --secondary-light-trans-20: rgba(230, 214, 203, 0.2);
  --secondary-light-trans-30: rgba(230, 214, 203, 0.3);
  --secondary-light-trans-40: rgba(230, 214, 203, 0.4);
  --secondary-light-trans-50: rgba(230, 214, 203, 0.5);
  --secondary-light-trans-60: rgba(230, 214, 203, 0.6);
  --secondary-light-trans-70: rgba(230, 214, 203, 0.7);
  --secondary-light-trans-80: rgba(230, 214, 203, 0.8);
  --secondary-light-trans-90: rgba(230, 214, 203, 0.9);
  --secondary-dark-trans-10: rgba(86, 59, 41, 0.1);
  --secondary-dark-trans-20: rgba(86, 59, 41, 0.2);
  --secondary-dark-trans-30: rgba(86, 59, 41, 0.3);
  --secondary-dark-trans-40: rgba(86, 59, 41, 0.4);
  --secondary-dark-trans-50: rgba(86, 59, 41, 0.5);
  --secondary-dark-trans-60: rgba(86, 59, 41, 0.6);
  --secondary-dark-trans-70: rgba(86, 59, 41, 0.7);
  --secondary-dark-trans-80: rgba(86, 59, 41, 0.8);
  --secondary-dark-trans-90: rgba(86, 59, 41, 0.9);
  --secondary-ultra-dark-trans-10: rgba(34, 24, 17, 0.1);
  --secondary-ultra-dark-trans-20: rgba(34, 24, 17, 0.2);
  --secondary-ultra-dark-trans-30: rgba(34, 24, 17, 0.3);
  --secondary-ultra-dark-trans-40: rgba(34, 24, 17, 0.4);
  --secondary-ultra-dark-trans-50: rgba(34, 24, 17, 0.5);
  --secondary-ultra-dark-trans-60: rgba(34, 24, 17, 0.6);
  --secondary-ultra-dark-trans-70: rgba(34, 24, 17, 0.7);
  --secondary-ultra-dark-trans-80: rgba(34, 24, 17, 0.8);
  --secondary-ultra-dark-trans-90: rgba(34, 24, 17, 0.9);

  /* tertiary — #C8965A */
  --tertiary-hex: #C8965A;
  --tertiary-hsl: 33 50% 57%;
  --tertiary-rgb: 200 150 90;
  --tertiary-h: 33;
  --tertiary-s: 50%;
  --tertiary-l: 57%;
  --tertiary-hover-h: 33;
  --tertiary-hover-s: 50%;
  --tertiary-hover-l: 66%;
  --tertiary-ultra-light-h: 33;
  --tertiary-ultra-light-s: 50%;
  --tertiary-ultra-light-l: 95%;
  --tertiary-light-h: 33;
  --tertiary-light-s: 50%;
  --tertiary-light-l: 85%;
  --tertiary-semi-light-h: 33;
  --tertiary-semi-light-s: 50%;
  --tertiary-semi-light-l: 65%;
  --tertiary-semi-dark-h: 33;
  --tertiary-semi-dark-s: 50%;
  --tertiary-semi-dark-l: 35%;
  --tertiary-dark-h: 33;
  --tertiary-dark-s: 50%;
  --tertiary-dark-l: 25%;
  --tertiary-ultra-dark-h: 33;
  --tertiary-ultra-dark-s: 50%;
  --tertiary-ultra-dark-l: 10%;
  --tertiary: #C8965A;
  --tertiary-hover: #d4ad7d;
  --tertiary-ultra-light: #f9f3ec;
  --tertiary-light: #ecdbc6;
  --tertiary-semi-light: #d2aa79;
  --tertiary-semi-dark: #865e2d;
  --tertiary-dark: #604320;
  --tertiary-ultra-dark: #261b0d;
  --tertiary-trans-10: rgba(200, 150, 90, 0.1);
  --tertiary-trans-20: rgba(200, 150, 90, 0.2);
  --tertiary-trans-30: rgba(200, 150, 90, 0.3);
  --tertiary-trans-40: rgba(200, 150, 90, 0.4);
  --tertiary-trans-50: rgba(200, 150, 90, 0.5);
  --tertiary-trans-60: rgba(200, 150, 90, 0.6);
  --tertiary-trans-70: rgba(200, 150, 90, 0.7);
  --tertiary-trans-80: rgba(200, 150, 90, 0.8);
  --tertiary-trans-90: rgba(200, 150, 90, 0.9);
  --tertiary-light-trans-10: rgba(236, 219, 198, 0.1);
  --tertiary-light-trans-20: rgba(236, 219, 198, 0.2);
  --tertiary-light-trans-30: rgba(236, 219, 198, 0.3);
  --tertiary-light-trans-40: rgba(236, 219, 198, 0.4);
  --tertiary-light-trans-50: rgba(236, 219, 198, 0.5);
  --tertiary-light-trans-60: rgba(236, 219, 198, 0.6);
  --tertiary-light-trans-70: rgba(236, 219, 198, 0.7);
  --tertiary-light-trans-80: rgba(236, 219, 198, 0.8);
  --tertiary-light-trans-90: rgba(236, 219, 198, 0.9);
  --tertiary-dark-trans-10: rgba(96, 67, 32, 0.1);
  --tertiary-dark-trans-20: rgba(96, 67, 32, 0.2);
  --tertiary-dark-trans-30: rgba(96, 67, 32, 0.3);
  --tertiary-dark-trans-40: rgba(96, 67, 32, 0.4);
  --tertiary-dark-trans-50: rgba(96, 67, 32, 0.5);
  --tertiary-dark-trans-60: rgba(96, 67, 32, 0.6);
  --tertiary-dark-trans-70: rgba(96, 67, 32, 0.7);
  --tertiary-dark-trans-80: rgba(96, 67, 32, 0.8);
  --tertiary-dark-trans-90: rgba(96, 67, 32, 0.9);
  --tertiary-ultra-dark-trans-10: rgba(38, 27, 13, 0.1);
  --tertiary-ultra-dark-trans-20: rgba(38, 27, 13, 0.2);
  --tertiary-ultra-dark-trans-30: rgba(38, 27, 13, 0.3);
  --tertiary-ultra-dark-trans-40: rgba(38, 27, 13, 0.4);
  --tertiary-ultra-dark-trans-50: rgba(38, 27, 13, 0.5);
  --tertiary-ultra-dark-trans-60: rgba(38, 27, 13, 0.6);
  --tertiary-ultra-dark-trans-70: rgba(38, 27, 13, 0.7);
  --tertiary-ultra-dark-trans-80: rgba(38, 27, 13, 0.8);
  --tertiary-ultra-dark-trans-90: rgba(38, 27, 13, 0.9);

  /* accent — #F3B878 */
  --accent-hex: #F3B878;
  --accent-hsl: 31 84% 71%;
  --accent-rgb: 243 184 120;
  --accent-h: 31;
  --accent-s: 84%;
  --accent-l: 71%;
  --accent-hover-h: 31;
  --accent-hover-s: 84%;
  --accent-hover-l: 82%;
  --accent-ultra-light-h: 31;
  --accent-ultra-light-s: 84%;
  --accent-ultra-light-l: 95%;
  --accent-light-h: 31;
  --accent-light-s: 84%;
  --accent-light-l: 85%;
  --accent-semi-light-h: 31;
  --accent-semi-light-s: 84%;
  --accent-semi-light-l: 65%;
  --accent-semi-dark-h: 31;
  --accent-semi-dark-s: 84%;
  --accent-semi-dark-l: 35%;
  --accent-dark-h: 31;
  --accent-dark-s: 84%;
  --accent-dark-l: 25%;
  --accent-ultra-dark-h: 31;
  --accent-ultra-dark-s: 84%;
  --accent-ultra-dark-l: 10%;
  --accent: #F3B878;
  --accent-hover: #f8d2ab;
  --accent-ultra-light: #fdf3e8;
  --accent-light: #f9dab9;
  --accent-semi-light: #f1a85b;
  --accent-semi-dark: #a45c0e;
  --accent-dark: #75420a;
  --accent-ultra-dark: #2f1a04;
  --accent-trans-10: rgba(243, 184, 120, 0.1);
  --accent-trans-20: rgba(243, 184, 120, 0.2);
  --accent-trans-30: rgba(243, 184, 120, 0.3);
  --accent-trans-40: rgba(243, 184, 120, 0.4);
  --accent-trans-50: rgba(243, 184, 120, 0.5);
  --accent-trans-60: rgba(243, 184, 120, 0.6);
  --accent-trans-70: rgba(243, 184, 120, 0.7);
  --accent-trans-80: rgba(243, 184, 120, 0.8);
  --accent-trans-90: rgba(243, 184, 120, 0.9);
  --accent-light-trans-10: rgba(249, 218, 185, 0.1);
  --accent-light-trans-20: rgba(249, 218, 185, 0.2);
  --accent-light-trans-30: rgba(249, 218, 185, 0.3);
  --accent-light-trans-40: rgba(249, 218, 185, 0.4);
  --accent-light-trans-50: rgba(249, 218, 185, 0.5);
  --accent-light-trans-60: rgba(249, 218, 185, 0.6);
  --accent-light-trans-70: rgba(249, 218, 185, 0.7);
  --accent-light-trans-80: rgba(249, 218, 185, 0.8);
  --accent-light-trans-90: rgba(249, 218, 185, 0.9);
  --accent-dark-trans-10: rgba(117, 66, 10, 0.1);
  --accent-dark-trans-20: rgba(117, 66, 10, 0.2);
  --accent-dark-trans-30: rgba(117, 66, 10, 0.3);
  --accent-dark-trans-40: rgba(117, 66, 10, 0.4);
  --accent-dark-trans-50: rgba(117, 66, 10, 0.5);
  --accent-dark-trans-60: rgba(117, 66, 10, 0.6);
  --accent-dark-trans-70: rgba(117, 66, 10, 0.7);
  --accent-dark-trans-80: rgba(117, 66, 10, 0.8);
  --accent-dark-trans-90: rgba(117, 66, 10, 0.9);
  --accent-ultra-dark-trans-10: rgba(47, 26, 4, 0.1);
  --accent-ultra-dark-trans-20: rgba(47, 26, 4, 0.2);
  --accent-ultra-dark-trans-30: rgba(47, 26, 4, 0.3);
  --accent-ultra-dark-trans-40: rgba(47, 26, 4, 0.4);
  --accent-ultra-dark-trans-50: rgba(47, 26, 4, 0.5);
  --accent-ultra-dark-trans-60: rgba(47, 26, 4, 0.6);
  --accent-ultra-dark-trans-70: rgba(47, 26, 4, 0.7);
  --accent-ultra-dark-trans-80: rgba(47, 26, 4, 0.8);
  --accent-ultra-dark-trans-90: rgba(47, 26, 4, 0.9);

  /* base — #6B5A48 */
  --base-hex: #6B5A48;
  --base-hsl: 31 20% 35%;
  --base-rgb: 107 90 72;
  --base-h: 31;
  --base-s: 20%;
  --base-l: 35%;
  --base-hover-h: 31;
  --base-hover-s: 20%;
  --base-hover-l: 40%;
  --base-ultra-light-h: 31;
  --base-ultra-light-s: 20%;
  --base-ultra-light-l: 95%;
  --base-light-h: 31;
  --base-light-s: 20%;
  --base-light-l: 85%;
  --base-semi-light-h: 31;
  --base-semi-light-s: 20%;
  --base-semi-light-l: 65%;
  --base-semi-dark-h: 31;
  --base-semi-dark-s: 20%;
  --base-semi-dark-l: 35%;
  --base-dark-h: 31;
  --base-dark-s: 20%;
  --base-dark-l: 25%;
  --base-ultra-dark-h: 31;
  --base-ultra-dark-s: 20%;
  --base-ultra-dark-l: 10%;
  --base: #6B5A48;
  --base-hover: #7a6752;
  --base-ultra-light: #f5f2f0;
  --base-light: #e0d9d1;
  --base-semi-light: #b8a694;
  --base-semi-dark: #6b5a47;
  --base-dark: #4d4033;
  --base-ultra-dark: #1f1a14;
  --base-trans-10: rgba(107, 90, 72, 0.1);
  --base-trans-20: rgba(107, 90, 72, 0.2);
  --base-trans-30: rgba(107, 90, 72, 0.3);
  --base-trans-40: rgba(107, 90, 72, 0.4);
  --base-trans-50: rgba(107, 90, 72, 0.5);
  --base-trans-60: rgba(107, 90, 72, 0.6);
  --base-trans-70: rgba(107, 90, 72, 0.7);
  --base-trans-80: rgba(107, 90, 72, 0.8);
  --base-trans-90: rgba(107, 90, 72, 0.9);
  --base-light-trans-10: rgba(224, 217, 209, 0.1);
  --base-light-trans-20: rgba(224, 217, 209, 0.2);
  --base-light-trans-30: rgba(224, 217, 209, 0.3);
  --base-light-trans-40: rgba(224, 217, 209, 0.4);
  --base-light-trans-50: rgba(224, 217, 209, 0.5);
  --base-light-trans-60: rgba(224, 217, 209, 0.6);
  --base-light-trans-70: rgba(224, 217, 209, 0.7);
  --base-light-trans-80: rgba(224, 217, 209, 0.8);
  --base-light-trans-90: rgba(224, 217, 209, 0.9);
  --base-dark-trans-10: rgba(77, 64, 51, 0.1);
  --base-dark-trans-20: rgba(77, 64, 51, 0.2);
  --base-dark-trans-30: rgba(77, 64, 51, 0.3);
  --base-dark-trans-40: rgba(77, 64, 51, 0.4);
  --base-dark-trans-50: rgba(77, 64, 51, 0.5);
  --base-dark-trans-60: rgba(77, 64, 51, 0.6);
  --base-dark-trans-70: rgba(77, 64, 51, 0.7);
  --base-dark-trans-80: rgba(77, 64, 51, 0.8);
  --base-dark-trans-90: rgba(77, 64, 51, 0.9);
  --base-ultra-dark-trans-10: rgba(31, 26, 20, 0.1);
  --base-ultra-dark-trans-20: rgba(31, 26, 20, 0.2);
  --base-ultra-dark-trans-30: rgba(31, 26, 20, 0.3);
  --base-ultra-dark-trans-40: rgba(31, 26, 20, 0.4);
  --base-ultra-dark-trans-50: rgba(31, 26, 20, 0.5);
  --base-ultra-dark-trans-60: rgba(31, 26, 20, 0.6);
  --base-ultra-dark-trans-70: rgba(31, 26, 20, 0.7);
  --base-ultra-dark-trans-80: rgba(31, 26, 20, 0.8);
  --base-ultra-dark-trans-90: rgba(31, 26, 20, 0.9);

  /* neutral — #2C2418 */
  --neutral-hex: #2C2418;
  --neutral-hsl: 36 29% 13%;
  --neutral-rgb: 44 36 24;
  --neutral-h: 36;
  --neutral-s: 29%;
  --neutral-l: 13%;
  --neutral-hover-h: 36;
  --neutral-hover-s: 29%;
  --neutral-hover-l: 15%;
  --neutral-ultra-light-h: 36;
  --neutral-ultra-light-s: 29%;
  --neutral-ultra-light-l: 95%;
  --neutral-light-h: 36;
  --neutral-light-s: 29%;
  --neutral-light-l: 85%;
  --neutral-semi-light-h: 36;
  --neutral-semi-light-s: 29%;
  --neutral-semi-light-l: 65%;
  --neutral-semi-dark-h: 36;
  --neutral-semi-dark-s: 29%;
  --neutral-semi-dark-l: 35%;
  --neutral-dark-h: 36;
  --neutral-dark-s: 29%;
  --neutral-dark-l: 25%;
  --neutral-ultra-dark-h: 36;
  --neutral-ultra-dark-s: 29%;
  --neutral-ultra-dark-l: 10%;
  --neutral: #2C2418;
  --neutral-hover: #31281b;
  --neutral-ultra-light: #f6f3ef;
  --neutral-light: #e4dbce;
  --neutral-semi-light: #c0ab8c;
  --neutral-semi-dark: #735e3f;
  --neutral-dark: #52432d;
  --neutral-ultra-dark: #211b12;
  --neutral-trans-10: rgba(44, 36, 24, 0.1);
  --neutral-trans-20: rgba(44, 36, 24, 0.2);
  --neutral-trans-30: rgba(44, 36, 24, 0.3);
  --neutral-trans-40: rgba(44, 36, 24, 0.4);
  --neutral-trans-50: rgba(44, 36, 24, 0.5);
  --neutral-trans-60: rgba(44, 36, 24, 0.6);
  --neutral-trans-70: rgba(44, 36, 24, 0.7);
  --neutral-trans-80: rgba(44, 36, 24, 0.8);
  --neutral-trans-90: rgba(44, 36, 24, 0.9);
  --neutral-light-trans-10: rgba(228, 219, 206, 0.1);
  --neutral-light-trans-20: rgba(228, 219, 206, 0.2);
  --neutral-light-trans-30: rgba(228, 219, 206, 0.3);
  --neutral-light-trans-40: rgba(228, 219, 206, 0.4);
  --neutral-light-trans-50: rgba(228, 219, 206, 0.5);
  --neutral-light-trans-60: rgba(228, 219, 206, 0.6);
  --neutral-light-trans-70: rgba(228, 219, 206, 0.7);
  --neutral-light-trans-80: rgba(228, 219, 206, 0.8);
  --neutral-light-trans-90: rgba(228, 219, 206, 0.9);
  --neutral-dark-trans-10: rgba(82, 67, 45, 0.1);
  --neutral-dark-trans-20: rgba(82, 67, 45, 0.2);
  --neutral-dark-trans-30: rgba(82, 67, 45, 0.3);
  --neutral-dark-trans-40: rgba(82, 67, 45, 0.4);
  --neutral-dark-trans-50: rgba(82, 67, 45, 0.5);
  --neutral-dark-trans-60: rgba(82, 67, 45, 0.6);
  --neutral-dark-trans-70: rgba(82, 67, 45, 0.7);
  --neutral-dark-trans-80: rgba(82, 67, 45, 0.8);
  --neutral-dark-trans-90: rgba(82, 67, 45, 0.9);
  --neutral-ultra-dark-trans-10: rgba(33, 27, 18, 0.1);
  --neutral-ultra-dark-trans-20: rgba(33, 27, 18, 0.2);
  --neutral-ultra-dark-trans-30: rgba(33, 27, 18, 0.3);
  --neutral-ultra-dark-trans-40: rgba(33, 27, 18, 0.4);
  --neutral-ultra-dark-trans-50: rgba(33, 27, 18, 0.5);
  --neutral-ultra-dark-trans-60: rgba(33, 27, 18, 0.6);
  --neutral-ultra-dark-trans-70: rgba(33, 27, 18, 0.7);
  --neutral-ultra-dark-trans-80: rgba(33, 27, 18, 0.8);
  --neutral-ultra-dark-trans-90: rgba(33, 27, 18, 0.9);

  --white: #fff;
  --black: #000;
  --white-trans-10: rgba(255,255,255,0.1);
  --white-trans-20: rgba(255,255,255,0.2);
  --white-trans-30: rgba(255,255,255,0.3);
  --white-trans-40: rgba(255,255,255,0.4);
  --white-trans-50: rgba(255,255,255,0.5);
  --white-trans-60: rgba(255,255,255,0.6);
  --white-trans-70: rgba(255,255,255,0.7);
  --white-trans-80: rgba(255,255,255,0.8);
  --white-trans-90: rgba(255,255,255,0.9);
  --black-trans-10: rgba(0,0,0,0.1);
  --black-trans-20: rgba(0,0,0,0.2);
  --black-trans-30: rgba(0,0,0,0.3);
  --black-trans-40: rgba(0,0,0,0.4);
  --black-trans-50: rgba(0,0,0,0.5);
  --black-trans-60: rgba(0,0,0,0.6);
  --black-trans-70: rgba(0,0,0,0.7);
  --black-trans-80: rgba(0,0,0,0.8);
  --black-trans-90: rgba(0,0,0,0.9);

  /* Semantic aliases */
  --bg-ultra-light: var(--primary-ultra-light);
  --bg-light: var(--primary-light);
  --bg-dark: var(--primary-dark);
  --bg-ultra-dark: var(--primary-ultra-dark);
  --text-light: var(--white);
  --text-light-muted: var(--white-trans-80);
  --text-dark: var(--base-dark);
  --text-dark-muted: var(--base-dark-trans-80);
  --body-bg-color: var(--white);
  --body-color: var(--text-dark);
  --h1-color: var(--secondary);
}

:root {
  --on: initial;
  --off: ;

  /* Layout */
  --content-width: 136.6rem;
  --content-width-safe: min(var(--content-width), calc(100% - var(--gutter) * 2));
  --section-padding-x: 2rem;
  --section-padding-block: var(--section-space-m);
  --section-gutter: 2rem;
  --gutter: 2rem;
  --content-inner: calc(min(var(--content-width), 100% - var(--gutter) * 2) - var(--gutter) * 2);
  --feature-width: calc(var(--content-width) * 0.08);
  --feature-max-width: calc(var(--content-width) * 0.16);

  /* Text sizes */
  --text-xs: clamp(1.4222rem, calc(-0.0018vw + 1.4246rem), 1.424rem);
  --text-s: clamp(1.5094rem, calc(0.0901vw + 1.477rem), 1.6rem);
  --text-m: clamp(1.6rem, calc(0.1988vw + 1.5284rem), 1.8rem);
  --text-l: clamp(1.696rem, calc(0.327vw + 1.5783rem), 2.025rem);
  --text-xl: clamp(1.7978rem, calc(0.4774vw + 1.6259rem), 2.2781rem);
  --text-xxl: clamp(1.9056rem, calc(0.6534vw + 1.6704rem), 2.5629rem);

  /* Headings */
  --h6: clamp(1.4364rem, calc(0.099vw + 1.4008rem), 1.536rem);
  --h5: clamp(1.6949rem, calc(0.2238vw + 1.6143rem), 1.92rem);
  --h4: clamp(2rem, calc(0.3976vw + 1.8569rem), 2.4rem);
  --h3: clamp(2.36rem, calc(0.6362vw + 2.131rem), 3rem);
  --h2: clamp(2.7848rem, calc(0.9594vw + 2.4394rem), 3.75rem);
  --h1: clamp(3.2861rem, calc(1.393vw + 2.7846rem), 4.6875rem);
  --heading-font-family: "DM Serif Display", Georgia, serif;
  --heading-font-weight: 400;
  --heading-line-height: 1.1;
  --heading-color: var(--secondary);
  --heading-text-wrap: balance;
  --h1-font-weight: 400;
  --h1-line-height: 1.05;

  /* Typography */
  --text-font-family: "DM Sans", system-ui, sans-serif;
  --text-font-weight: 400;
  --text-line-height: calc(6px + 2ex);
  --text-text-wrap: pretty;
  --text-color: var(--text-dark);
  --paragraph-spacing: 1em;
  --heading-spacing: 1.2em;
  --flow-spacing: var(--paragraph-spacing);

  /* Spacing */
  --space-xs: clamp(1.3333rem, calc(-0.0863vw + 1.4512rem), 1.4201rem);
  --space-s: clamp(1.8462rem, calc(0.1529vw + 1.7912rem), 2rem);
  --space-m: clamp(2.4rem, calc(0.5964vw + 2.1853rem), 3rem);
  --space-l: clamp(3.12rem, calc(1.3718vw + 2.6262rem), 4.5rem);
  --space-xl: clamp(4.056rem, calc(2.6779vw + 3.0919rem), 6.75rem);
  --space-xxl: clamp(5.2728rem, calc(4.8233vw + 3.5364rem), 10.125rem);

  /* Section spacing */
  --section-space-xs: clamp(4.2604rem, calc(1.0665vw + 3.8765rem), 5.3333rem);
  --section-space-s: clamp(5.5385rem, calc(2.4468vw + 4.6576rem), 8rem);
  --section-space-m: clamp(7.2rem, calc(4.7714vw + 5.4823rem), 12rem);
  --section-space-l: clamp(9.36rem, calc(8.5885vw + 6.2682rem), 18rem);
  --section-space-xl: clamp(12.168rem, calc(14.7435vw + 6.8603rem), 27rem);
  --section-space-xxl: clamp(15.8184rem, calc(24.5344vw + 6.986rem), 40.5rem);

  /* Gap tokens */
  --grid-gap: var(--space-xs);
  --fr-grid-gap: var(--space-xs);
  --content-gap: var(--space-m);
  --fr-content-gap: var(--space-m);
  --container-gap: var(--space-xl);
  --fr-container-gap: var(--space-xl);

  /* Width scale */
  --width-10: calc(var(--content-width) * 0.1);
  --width-20: calc(var(--content-width) * 0.2);
  --width-30: calc(var(--content-width) * 0.3);
  --width-40: calc(var(--content-width) * 0.4);
  --width-50: calc(var(--content-width) * 0.5);
  --width-60: calc(var(--content-width) * 0.6);
  --width-70: calc(var(--content-width) * 0.7);
  --width-80: calc(var(--content-width) * 0.8);
  --width-90: calc(var(--content-width) * 0.9);
  --width-xs:      calc(var(--content-width) * 0.1);
  --width-s:       calc(var(--content-width) * 0.2);
  --width-m:       calc(var(--content-width) * 0.4);
  --width-l:       calc(var(--content-width) * 0.6);
  --width-xl:      calc(var(--content-width) * 0.8);
  --width-xxl:     calc(var(--content-width) * 0.9);
  --width-content: calc(var(--content-width) * 1);

  /* Links */
  --link-color: var(--primary);
  --link-color-hover: var(--primary-hover);
  --link-decoration: none;
  --link-decoration-hover: underline;
  --link-weight: inherit;

  /* Focus */
  --focus-color: var(--primary);
  --focus-width: 2px;
  --focus-offset: 2px;

  /* Shadows */
  --box-shadow-m: 0 0 40px var(--black-trans-10);
  --box-shadow-l: 0 0 60px var(--black-trans-20);
  --box-shadow-xl: 0 0 80px var(--black-trans-30);
  --box-shadow-1: 0 0 40px var(--black-trans-10);
  --box-shadow-2: 0 0 60px var(--black-trans-20);
  --box-shadow-3: 0 0 80px var(--black-trans-30);
  --shadow-s: 0 10px 24px -10px;
  --shadow-m: 0 18px 42px -20px;
  --shadow-l: 0 22px 49px -24px;
  --shadow-xl: 0 24px 60px -32px;

  /* Z-index (global chrome) */
  --z-below: -1;
  --z-raised: 10;
  --z-sticky: 1000;
  --z-progress: 1100;
  --z-overlay: 1200;
  --z-drawer: 1300;
  --z-toast: 1500;
  --z-skiplink: 2000;

  /* Transitions */
  --transition-duration: 0.3s;
  --transition-timing: ease-in-out;
  --transition-delay: 0s;
  --transition: background var(--transition-duration) var(--transition-timing) var(--transition-delay), color var(--transition-duration) var(--transition-timing) var(--transition-delay), border var(--transition-duration) var(--transition-timing) var(--transition-delay), translate var(--transition-duration) var(--transition-timing) var(--transition-delay);

  /* Buttons */
  --btn-background: var(--primary);
  --btn-background-hover: var(--primary-hover);
  --btn-text-color: var(--white);
  --btn-text-color-hover: var(--white);
  --btn-border-color: var(--btn-background);
  --btn-border-color-hover: var(--btn-background-hover);
  --btn-border-width: 2px;
  --btn-border-style: solid;
  --btn-radius: var(--radius-m);
  --btn-padding-block: 0.5em;
  --btn-padding-inline: 1.25em;
  --btn-min-width: 14rem;
  --btn-font-size: inherit;
  --btn-font-weight: 400;
  --btn-font-style: normal;
  --btn-line-height: 1;
  --btn-letter-spacing: 0;
  --btn-text-transform: none;
  --btn-text-decoration: none;
  --btn-transition-duration: 0.2s;
  --btn-outline-background-color: transparent;
  --btn-outline-text-color: var(--btn-background);
  --btn-outline-text-color-hover: var(--btn-text-color);
  --btn-outline-border-width: var(--btn-border-width);
  --btn-outline-border-hover: var(--btn-background);

  /* Cards */
  --card-padding: var(--space-m);
  --card-gap: var(--space-s);
  --card-radius: var(--radius-xl);
  --card-min-radius: var(--radius-xs);
  --card-background: var(--surface-1);
  --card-shadow: var(--shadow-s) hsl(var(--neutral-h) var(--neutral-s) 20% / .12);
  --card-border-width: var(--border-size);
  --card-border-style: var(--border-style);
  --card-border-color: var(--border-color-dark);
  --card-heading-size: var(--h4);
  --card-heading-color: var(--heading-color);
  --card-text-size: var(--text-m);
  --card-text-color: var(--body-color);
  --card-link-color: var(--primary);
  --card-link-color-hover: var(--primary-hover);
  --card-button-font-size: var(--text-s);
  --card-icon-size: var(--text-xl);
  --card-icon-color: var(--primary);
  --card-avatar-size: var(--space-l);
  --card-avatar-radius: var(--radius-50);
  --card-media-radius: var(--radius-l);
  --card-media-aspect-ratio: 16 / 9;

  /* Border */
  --border-size: 1px;
  --border-style: solid;
  --border-color-dark: var(--black-trans-20);
  --border-color-light: var(--white-trans-20);
  --border: var(--border-size) var(--border-style) var(--border-color-dark);
  --border-light: var(--border-size) var(--border-style) var(--border-color-light);

  /* Surfaces — semantic layer above raw tokens */
  --surface-1: var(--white);
  --surface-2: var(--neutral-ultra-light);
  --surface-3: var(--neutral-light);
  --surface-4: var(--primary-ultra-light);
  --on-surface: var(--text-dark);
  --on-surface-muted: var(--text-dark-muted);
  --on-surface-inverted: var(--white);
}

:root {
  /* Border radius */
  --radius-none: 0;
  --radius-xs: 0.96px;
  --radius-s:  2.4px;
  --radius-m:  6px;
  --radius-l:  15px;
  --radius-xl: 37.5px;
  --radius-xxl:93.75px;
  --radius-circle: 50vw;
  --radius-50: 50%;
  --radius: 6px;
}

:root {
  /* Global divider system */
  --divider-size: 1px;
  --divider-style: solid;
  --divider-color-light: hsl(var(--primary-h) var(--primary-s) var(--primary-l) / .14);
  --divider-color-dark: hsl(var(--primary-light-h) var(--primary-light-s) var(--primary-light-l) / .16);
  --divider-color: var(--divider-color-light);
  --divider: var(--divider-size) var(--divider-style) var(--divider-color);
  --divider-gap: var(--content-gap);
}

:root {
  /* Grid templates */
  --grid-1: repeat(1, minmax(0, 1fr));
  --grid-2: repeat(2, minmax(0, 1fr));
  --grid-3: repeat(3, minmax(0, 1fr));
  --grid-4: repeat(4, minmax(0, 1fr));
  --grid-5: repeat(5, minmax(0, 1fr));
  --grid-6: repeat(6, minmax(0, 1fr));
  --grid-7: repeat(7, minmax(0, 1fr));
  --grid-8: repeat(8, minmax(0, 1fr));
  --grid-9: repeat(9, minmax(0, 1fr));
  --grid-10: repeat(10, minmax(0, 1fr));
  --grid-11: repeat(11, minmax(0, 1fr));
  --grid-12: repeat(12, minmax(0, 1fr));
  --grid-1-2: minmax(0, 1fr) minmax(0, 2fr);
  --grid-1-3: minmax(0, 1fr) minmax(0, 3fr);
  --grid-2-1: minmax(0, 2fr) minmax(0, 1fr);
  --grid-3-1: minmax(0, 3fr) minmax(0, 1fr);
  --grid-2-3: minmax(0, 2fr) minmax(0, 3fr);
  --grid-3-2: minmax(0, 3fr) minmax(0, 2fr);

  /* Auto-responsive grids */
  --grid-auto-2: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - 1 * var(--grid-gap)) / 2) * 0.7, (100% - 1 * var(--grid-gap)) / 2)), 1fr));
  --grid-auto-3: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - 2 * var(--grid-gap)) / 3) * 0.7, (100% - 2 * var(--grid-gap)) / 3)), 1fr));
  --grid-auto-4: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - 3 * var(--grid-gap)) / 4) * 0.7, (100% - 3 * var(--grid-gap)) / 4)), 1fr));
  --grid-auto-5: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - 4 * var(--grid-gap)) / 5) * 0.7, (100% - 4 * var(--grid-gap)) / 5)), 1fr));
  --grid-auto-6: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - 5 * var(--grid-gap)) / 6) * 0.7, (100% - 5 * var(--grid-gap)) / 6)), 1fr));
  --grid-auto-7: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - 6 * var(--grid-gap)) / 7) * 0.7, (100% - 6 * var(--grid-gap)) / 7)), 1fr));
  --grid-auto-8: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - 7 * var(--grid-gap)) / 8) * 0.7, (100% - 7 * var(--grid-gap)) / 8)), 1fr));
  --grid-auto-9: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - 8 * var(--grid-gap)) / 9) * 0.7, (100% - 8 * var(--grid-gap)) / 9)), 1fr));
  --grid-auto-10: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - 9 * var(--grid-gap)) / 10) * 0.7, (100% - 9 * var(--grid-gap)) / 10)), 1fr));
  --grid-auto-11: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - 10 * var(--grid-gap)) / 11) * 0.7, (100% - 10 * var(--grid-gap)) / 11)), 1fr));
  --grid-auto-12: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - 11 * var(--grid-gap)) / 12) * 0.7, (100% - 11 * var(--grid-gap)) / 12)), 1fr));
}

:root {
  /* Motion */
  --motion-duration-xs:  0.1s;
  --motion-duration-s:   0.2s;
  --motion-duration-m:   0.35s;
  --motion-duration-l:   0.5s;
  --motion-duration-xl:  0.8s;
  --motion-duration-xxl: 1.2s;

  --motion-ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --motion-ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --motion-ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
  --motion-ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --motion-ease-bounce:  cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --motion-ease-snappy:  cubic-bezier(0.16, 1, 0.3, 1);
  --motion-ease-linear:  linear;
  --motion-ease-editorial: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* motion-qa.md §7 canonical names -> the Nova curves they already are */
  --motion-ease-premium:    var(--motion-ease-snappy);
  --motion-ease-emphasized: var(--motion-ease-snappy);
  --motion-ease-technical:  var(--motion-ease-in-out);
  --motion-ease-energetic:  var(--motion-ease-spring);

  --motion-distance-xs:  4px;
  --motion-distance-s:   8px;
  --motion-distance-m:   16px;
  --motion-distance-l:   32px;
  --motion-distance-xl:  64px;

  --motion-scale-origin: 0.95;
  --motion-scale-hover:  1.02;
  --motion-scale-press:  0.98;

  --motion-stagger: 80ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-duration-xs: 1ms;
    --motion-duration-s: 1ms;
    --motion-duration-m: 1ms;
    --motion-duration-l: 1ms;
    --motion-duration-xl: 1ms;
    --motion-duration-xxl: 1ms;
    --motion-ease-in: linear;
    --motion-ease-out: linear;
    --motion-ease-in-out: linear;
    --motion-ease-spring: linear;
    --motion-ease-bounce: linear;
    --motion-ease-snappy: linear;
    --motion-ease-linear: linear;
    --motion-ease-editorial: linear;
    --motion-ease-premium: linear;
    --motion-ease-emphasized: linear;
    --motion-ease-technical: linear;
    --motion-ease-energetic: linear;
    --motion-distance-xs: 0px;
    --motion-distance-s: 0px;
    --motion-distance-m: 0px;
    --motion-distance-l: 0px;
    --motion-distance-xl: 0px;
    --motion-scale-origin: 1;
    --motion-scale-hover:  1;
    --motion-scale-press:  1;
    --motion-stagger: 0ms;
  }
}

/* ── Dark mode ─────────────────────────────────────────────────────────── */
/* Auto = follow OS, but ONLY when no explicit .light/.dark class is set, so a
   manual toggle always wins — including forcing LIGHT when the OS is dark.
   Toggle drop-in: components/dark-mode/ (sets .light/.dark on <html>). */
@media (prefers-color-scheme: dark) {
  :root:not(.light):not(.dark) {
    /* Surfaces */
    --surface-1: var(--neutral-ultra-dark);
    --surface-2: var(--neutral-dark);
    --surface-3: var(--neutral-semi-dark);
    --surface-4: var(--neutral-semi-light);
  
    /* On-surface text */
    --on-surface: var(--white);
    --on-surface-muted: var(--white-trans-80);
    --on-surface-inverted: var(--text-dark);
  
    /* Body */
    --body-bg-color: var(--surface-1);
    --body-color: var(--on-surface);
    --text-color: var(--on-surface);
  
    /* Headings */
    --h1-color: var(--white);
    --h2-color: var(--white);
    --h3-color: var(--primary-light);
    --h4-color: var(--secondary-light);
    --h5-color: var(--primary-light);
    --h6-color: var(--white);
  
    /* Borders */
    --border-color-dark: var(--white-trans-20);
    --border-color-light: var(--black-trans-20);
  
    /* Shadows */
    --box-shadow-m:  0 0 40px rgba(0,0,0,0.5);
    --box-shadow-l:  0 0 60px rgba(0,0,0,0.6);
    --box-shadow-xl: 0 0 80px rgba(0,0,0,0.7);
    --box-shadow-1:  0 0 40px rgba(0,0,0,0.5);
    --box-shadow-2:  0 0 60px rgba(0,0,0,0.6);
    --box-shadow-3:  0 0 80px rgba(0,0,0,0.7);
  }
}

/* Forced dark — .dark on <html> for a global toggle, or on any wrapper to
   invert a single section (custom props inherit into the subtree). */
.dark {
  /* Surfaces */
  --surface-1: var(--neutral-ultra-dark);
  --surface-2: var(--neutral-dark);
  --surface-3: var(--neutral-semi-dark);
  --surface-4: var(--neutral-semi-light);

  /* On-surface text */
  --on-surface: var(--white);
  --on-surface-muted: var(--white-trans-80);
  --on-surface-inverted: var(--text-dark);

  /* Body */
  --body-bg-color: var(--surface-1);
  --body-color: var(--on-surface);
  --text-color: var(--on-surface);

  /* Headings */
  --h1-color: var(--white);
  --h2-color: var(--white);
  --h3-color: var(--primary-light);
  --h4-color: var(--secondary-light);
  --h5-color: var(--primary-light);
  --h6-color: var(--white);

  /* Borders */
  --border-color-dark: var(--white-trans-20);
  --border-color-light: var(--black-trans-20);

  /* Shadows */
  --box-shadow-m:  0 0 40px rgba(0,0,0,0.5);
  --box-shadow-l:  0 0 60px rgba(0,0,0,0.6);
  --box-shadow-xl: 0 0 80px rgba(0,0,0,0.7);
  --box-shadow-1:  0 0 40px rgba(0,0,0,0.5);
  --box-shadow-2:  0 0 60px rgba(0,0,0,0.6);
  --box-shadow-3:  0 0 80px rgba(0,0,0,0.7);
}

/* Forced light — restores light tokens inside a .dark / OS-dark context. */
.light {
  /* Surfaces */
  --surface-1: var(--white);
  --surface-2: var(--neutral-ultra-light);
  --surface-3: var(--neutral-light);
  --surface-4: var(--primary-ultra-light);

  /* On-surface text */
  --on-surface: var(--text-dark);
  --on-surface-muted: var(--text-dark-muted);
  --on-surface-inverted: var(--white);

  /* Body */
  --body-bg-color: var(--surface-1);
  --body-color: var(--on-surface);
  --text-color: var(--on-surface);

  /* Headings */
  --h1-color: var(--text-dark);
  --h2-color: var(--text-dark);
  --h3-color: var(--text-dark);
  --h4-color: var(--text-dark);
  --h5-color: var(--text-dark);
  --h6-color: var(--text-dark);

  /* Borders */
  --border-color-dark: var(--black-trans-20);
  --border-color-light: var(--white-trans-20);

  /* Shadows */
  --box-shadow-m:  0 0 40px var(--black-trans-10);
  --box-shadow-l:  0 0 60px var(--black-trans-20);
  --box-shadow-xl: 0 0 80px var(--black-trans-30);
  --box-shadow-1:  0 0 40px var(--black-trans-10);
  --box-shadow-2:  0 0 60px var(--black-trans-20);
  --box-shadow-3:  0 0 80px var(--black-trans-30);
}



/* ─── Contextual background + text utilities ───────────────────────────────
   Apply the CLASS, not the variable: only a class can trigger the relationships
   below. `background: var(--bg-dark)` sets a colour and nothing else. */
.bg--ultra-light { background-color: var(--bg-ultra-light); }
.bg--light { background-color: var(--bg-light); }
.bg--dark { background-color: var(--bg-dark); }
.bg--ultra-dark { background-color: var(--bg-ultra-dark); }
.text--light { color: var(--text-light); }
.text--dark { color: var(--text-dark); }
.text--light-muted { color: var(--text-light-muted); }
.text--dark-muted { color: var(--text-dark-muted); }

/* Brand + semantic colours — shade suffixes derived from the emitted tokens,
   so a utility can never point at a token the generator did not produce. */
.bg--primary { background-color: var(--primary); }
.text--primary { color: var(--primary); }
.bg--primary-hover { background-color: var(--primary-hover); }
.bg--primary-ultra-light { background-color: var(--primary-ultra-light); }
.text--primary-ultra-light { color: var(--primary-ultra-light); }
.bg--primary-light { background-color: var(--primary-light); }
.text--primary-light { color: var(--primary-light); }
.bg--primary-semi-light { background-color: var(--primary-semi-light); }
.text--primary-semi-light { color: var(--primary-semi-light); }
.bg--primary-semi-dark { background-color: var(--primary-semi-dark); }
.text--primary-semi-dark { color: var(--primary-semi-dark); }
.bg--primary-dark { background-color: var(--primary-dark); }
.text--primary-dark { color: var(--primary-dark); }
.bg--primary-ultra-dark { background-color: var(--primary-ultra-dark); }
.text--primary-ultra-dark { color: var(--primary-ultra-dark); }
.bg--secondary { background-color: var(--secondary); }
.text--secondary { color: var(--secondary); }
.bg--secondary-hover { background-color: var(--secondary-hover); }
.bg--secondary-ultra-light { background-color: var(--secondary-ultra-light); }
.text--secondary-ultra-light { color: var(--secondary-ultra-light); }
.bg--secondary-light { background-color: var(--secondary-light); }
.text--secondary-light { color: var(--secondary-light); }
.bg--secondary-semi-light { background-color: var(--secondary-semi-light); }
.text--secondary-semi-light { color: var(--secondary-semi-light); }
.bg--secondary-semi-dark { background-color: var(--secondary-semi-dark); }
.text--secondary-semi-dark { color: var(--secondary-semi-dark); }
.bg--secondary-dark { background-color: var(--secondary-dark); }
.text--secondary-dark { color: var(--secondary-dark); }
.bg--secondary-ultra-dark { background-color: var(--secondary-ultra-dark); }
.text--secondary-ultra-dark { color: var(--secondary-ultra-dark); }
.bg--tertiary { background-color: var(--tertiary); }
.text--tertiary { color: var(--tertiary); }
.bg--tertiary-hover { background-color: var(--tertiary-hover); }
.bg--tertiary-ultra-light { background-color: var(--tertiary-ultra-light); }
.text--tertiary-ultra-light { color: var(--tertiary-ultra-light); }
.bg--tertiary-light { background-color: var(--tertiary-light); }
.text--tertiary-light { color: var(--tertiary-light); }
.bg--tertiary-semi-light { background-color: var(--tertiary-semi-light); }
.text--tertiary-semi-light { color: var(--tertiary-semi-light); }
.bg--tertiary-semi-dark { background-color: var(--tertiary-semi-dark); }
.text--tertiary-semi-dark { color: var(--tertiary-semi-dark); }
.bg--tertiary-dark { background-color: var(--tertiary-dark); }
.text--tertiary-dark { color: var(--tertiary-dark); }
.bg--tertiary-ultra-dark { background-color: var(--tertiary-ultra-dark); }
.text--tertiary-ultra-dark { color: var(--tertiary-ultra-dark); }
.bg--accent { background-color: var(--accent); }
.text--accent { color: var(--accent); }
.bg--accent-hover { background-color: var(--accent-hover); }
.bg--accent-ultra-light { background-color: var(--accent-ultra-light); }
.text--accent-ultra-light { color: var(--accent-ultra-light); }
.bg--accent-light { background-color: var(--accent-light); }
.text--accent-light { color: var(--accent-light); }
.bg--accent-semi-light { background-color: var(--accent-semi-light); }
.text--accent-semi-light { color: var(--accent-semi-light); }
.bg--accent-semi-dark { background-color: var(--accent-semi-dark); }
.text--accent-semi-dark { color: var(--accent-semi-dark); }
.bg--accent-dark { background-color: var(--accent-dark); }
.text--accent-dark { color: var(--accent-dark); }
.bg--accent-ultra-dark { background-color: var(--accent-ultra-dark); }
.text--accent-ultra-dark { color: var(--accent-ultra-dark); }
.bg--base { background-color: var(--base); }
.text--base { color: var(--base); }
.bg--base-hover { background-color: var(--base-hover); }
.bg--base-ultra-light { background-color: var(--base-ultra-light); }
.text--base-ultra-light { color: var(--base-ultra-light); }
.bg--base-light { background-color: var(--base-light); }
.text--base-light { color: var(--base-light); }
.bg--base-semi-light { background-color: var(--base-semi-light); }
.text--base-semi-light { color: var(--base-semi-light); }
.bg--base-semi-dark { background-color: var(--base-semi-dark); }
.text--base-semi-dark { color: var(--base-semi-dark); }
.bg--base-dark { background-color: var(--base-dark); }
.text--base-dark { color: var(--base-dark); }
.bg--base-ultra-dark { background-color: var(--base-ultra-dark); }
.text--base-ultra-dark { color: var(--base-ultra-dark); }
.bg--neutral { background-color: var(--neutral); }
.text--neutral { color: var(--neutral); }
.bg--neutral-hover { background-color: var(--neutral-hover); }
.bg--neutral-ultra-light { background-color: var(--neutral-ultra-light); }
.text--neutral-ultra-light { color: var(--neutral-ultra-light); }
.bg--neutral-light { background-color: var(--neutral-light); }
.text--neutral-light { color: var(--neutral-light); }
.bg--neutral-semi-light { background-color: var(--neutral-semi-light); }
.text--neutral-semi-light { color: var(--neutral-semi-light); }
.bg--neutral-semi-dark { background-color: var(--neutral-semi-dark); }
.text--neutral-semi-dark { color: var(--neutral-semi-dark); }
.bg--neutral-dark { background-color: var(--neutral-dark); }
.text--neutral-dark { color: var(--neutral-dark); }
.bg--neutral-ultra-dark { background-color: var(--neutral-ultra-dark); }
.text--neutral-ultra-dark { color: var(--neutral-ultra-dark); }

/* Transparencies: main colour + light/dark/ultra-dark shades, 10–90. */
.bg--primary-trans-10 { background-color: var(--primary-trans-10); }
.bg--primary-trans-20 { background-color: var(--primary-trans-20); }
.bg--primary-trans-30 { background-color: var(--primary-trans-30); }
.bg--primary-trans-40 { background-color: var(--primary-trans-40); }
.bg--primary-trans-50 { background-color: var(--primary-trans-50); }
.bg--primary-trans-60 { background-color: var(--primary-trans-60); }
.bg--primary-trans-70 { background-color: var(--primary-trans-70); }
.bg--primary-trans-80 { background-color: var(--primary-trans-80); }
.bg--primary-trans-90 { background-color: var(--primary-trans-90); }
.bg--primary-light-trans-10 { background-color: var(--primary-light-trans-10); }
.bg--primary-light-trans-20 { background-color: var(--primary-light-trans-20); }
.bg--primary-light-trans-30 { background-color: var(--primary-light-trans-30); }
.bg--primary-light-trans-40 { background-color: var(--primary-light-trans-40); }
.bg--primary-light-trans-50 { background-color: var(--primary-light-trans-50); }
.bg--primary-light-trans-60 { background-color: var(--primary-light-trans-60); }
.bg--primary-light-trans-70 { background-color: var(--primary-light-trans-70); }
.bg--primary-light-trans-80 { background-color: var(--primary-light-trans-80); }
.bg--primary-light-trans-90 { background-color: var(--primary-light-trans-90); }
.bg--primary-dark-trans-10 { background-color: var(--primary-dark-trans-10); }
.bg--primary-dark-trans-20 { background-color: var(--primary-dark-trans-20); }
.bg--primary-dark-trans-30 { background-color: var(--primary-dark-trans-30); }
.bg--primary-dark-trans-40 { background-color: var(--primary-dark-trans-40); }
.bg--primary-dark-trans-50 { background-color: var(--primary-dark-trans-50); }
.bg--primary-dark-trans-60 { background-color: var(--primary-dark-trans-60); }
.bg--primary-dark-trans-70 { background-color: var(--primary-dark-trans-70); }
.bg--primary-dark-trans-80 { background-color: var(--primary-dark-trans-80); }
.bg--primary-dark-trans-90 { background-color: var(--primary-dark-trans-90); }
.bg--primary-ultra-dark-trans-10 { background-color: var(--primary-ultra-dark-trans-10); }
.bg--primary-ultra-dark-trans-20 { background-color: var(--primary-ultra-dark-trans-20); }
.bg--primary-ultra-dark-trans-30 { background-color: var(--primary-ultra-dark-trans-30); }
.bg--primary-ultra-dark-trans-40 { background-color: var(--primary-ultra-dark-trans-40); }
.bg--primary-ultra-dark-trans-50 { background-color: var(--primary-ultra-dark-trans-50); }
.bg--primary-ultra-dark-trans-60 { background-color: var(--primary-ultra-dark-trans-60); }
.bg--primary-ultra-dark-trans-70 { background-color: var(--primary-ultra-dark-trans-70); }
.bg--primary-ultra-dark-trans-80 { background-color: var(--primary-ultra-dark-trans-80); }
.bg--primary-ultra-dark-trans-90 { background-color: var(--primary-ultra-dark-trans-90); }
.bg--secondary-trans-10 { background-color: var(--secondary-trans-10); }
.bg--secondary-trans-20 { background-color: var(--secondary-trans-20); }
.bg--secondary-trans-30 { background-color: var(--secondary-trans-30); }
.bg--secondary-trans-40 { background-color: var(--secondary-trans-40); }
.bg--secondary-trans-50 { background-color: var(--secondary-trans-50); }
.bg--secondary-trans-60 { background-color: var(--secondary-trans-60); }
.bg--secondary-trans-70 { background-color: var(--secondary-trans-70); }
.bg--secondary-trans-80 { background-color: var(--secondary-trans-80); }
.bg--secondary-trans-90 { background-color: var(--secondary-trans-90); }
.bg--secondary-light-trans-10 { background-color: var(--secondary-light-trans-10); }
.bg--secondary-light-trans-20 { background-color: var(--secondary-light-trans-20); }
.bg--secondary-light-trans-30 { background-color: var(--secondary-light-trans-30); }
.bg--secondary-light-trans-40 { background-color: var(--secondary-light-trans-40); }
.bg--secondary-light-trans-50 { background-color: var(--secondary-light-trans-50); }
.bg--secondary-light-trans-60 { background-color: var(--secondary-light-trans-60); }
.bg--secondary-light-trans-70 { background-color: var(--secondary-light-trans-70); }
.bg--secondary-light-trans-80 { background-color: var(--secondary-light-trans-80); }
.bg--secondary-light-trans-90 { background-color: var(--secondary-light-trans-90); }
.bg--secondary-dark-trans-10 { background-color: var(--secondary-dark-trans-10); }
.bg--secondary-dark-trans-20 { background-color: var(--secondary-dark-trans-20); }
.bg--secondary-dark-trans-30 { background-color: var(--secondary-dark-trans-30); }
.bg--secondary-dark-trans-40 { background-color: var(--secondary-dark-trans-40); }
.bg--secondary-dark-trans-50 { background-color: var(--secondary-dark-trans-50); }
.bg--secondary-dark-trans-60 { background-color: var(--secondary-dark-trans-60); }
.bg--secondary-dark-trans-70 { background-color: var(--secondary-dark-trans-70); }
.bg--secondary-dark-trans-80 { background-color: var(--secondary-dark-trans-80); }
.bg--secondary-dark-trans-90 { background-color: var(--secondary-dark-trans-90); }
.bg--secondary-ultra-dark-trans-10 { background-color: var(--secondary-ultra-dark-trans-10); }
.bg--secondary-ultra-dark-trans-20 { background-color: var(--secondary-ultra-dark-trans-20); }
.bg--secondary-ultra-dark-trans-30 { background-color: var(--secondary-ultra-dark-trans-30); }
.bg--secondary-ultra-dark-trans-40 { background-color: var(--secondary-ultra-dark-trans-40); }
.bg--secondary-ultra-dark-trans-50 { background-color: var(--secondary-ultra-dark-trans-50); }
.bg--secondary-ultra-dark-trans-60 { background-color: var(--secondary-ultra-dark-trans-60); }
.bg--secondary-ultra-dark-trans-70 { background-color: var(--secondary-ultra-dark-trans-70); }
.bg--secondary-ultra-dark-trans-80 { background-color: var(--secondary-ultra-dark-trans-80); }
.bg--secondary-ultra-dark-trans-90 { background-color: var(--secondary-ultra-dark-trans-90); }
.bg--tertiary-trans-10 { background-color: var(--tertiary-trans-10); }
.bg--tertiary-trans-20 { background-color: var(--tertiary-trans-20); }
.bg--tertiary-trans-30 { background-color: var(--tertiary-trans-30); }
.bg--tertiary-trans-40 { background-color: var(--tertiary-trans-40); }
.bg--tertiary-trans-50 { background-color: var(--tertiary-trans-50); }
.bg--tertiary-trans-60 { background-color: var(--tertiary-trans-60); }
.bg--tertiary-trans-70 { background-color: var(--tertiary-trans-70); }
.bg--tertiary-trans-80 { background-color: var(--tertiary-trans-80); }
.bg--tertiary-trans-90 { background-color: var(--tertiary-trans-90); }
.bg--tertiary-light-trans-10 { background-color: var(--tertiary-light-trans-10); }
.bg--tertiary-light-trans-20 { background-color: var(--tertiary-light-trans-20); }
.bg--tertiary-light-trans-30 { background-color: var(--tertiary-light-trans-30); }
.bg--tertiary-light-trans-40 { background-color: var(--tertiary-light-trans-40); }
.bg--tertiary-light-trans-50 { background-color: var(--tertiary-light-trans-50); }
.bg--tertiary-light-trans-60 { background-color: var(--tertiary-light-trans-60); }
.bg--tertiary-light-trans-70 { background-color: var(--tertiary-light-trans-70); }
.bg--tertiary-light-trans-80 { background-color: var(--tertiary-light-trans-80); }
.bg--tertiary-light-trans-90 { background-color: var(--tertiary-light-trans-90); }
.bg--tertiary-dark-trans-10 { background-color: var(--tertiary-dark-trans-10); }
.bg--tertiary-dark-trans-20 { background-color: var(--tertiary-dark-trans-20); }
.bg--tertiary-dark-trans-30 { background-color: var(--tertiary-dark-trans-30); }
.bg--tertiary-dark-trans-40 { background-color: var(--tertiary-dark-trans-40); }
.bg--tertiary-dark-trans-50 { background-color: var(--tertiary-dark-trans-50); }
.bg--tertiary-dark-trans-60 { background-color: var(--tertiary-dark-trans-60); }
.bg--tertiary-dark-trans-70 { background-color: var(--tertiary-dark-trans-70); }
.bg--tertiary-dark-trans-80 { background-color: var(--tertiary-dark-trans-80); }
.bg--tertiary-dark-trans-90 { background-color: var(--tertiary-dark-trans-90); }
.bg--tertiary-ultra-dark-trans-10 { background-color: var(--tertiary-ultra-dark-trans-10); }
.bg--tertiary-ultra-dark-trans-20 { background-color: var(--tertiary-ultra-dark-trans-20); }
.bg--tertiary-ultra-dark-trans-30 { background-color: var(--tertiary-ultra-dark-trans-30); }
.bg--tertiary-ultra-dark-trans-40 { background-color: var(--tertiary-ultra-dark-trans-40); }
.bg--tertiary-ultra-dark-trans-50 { background-color: var(--tertiary-ultra-dark-trans-50); }
.bg--tertiary-ultra-dark-trans-60 { background-color: var(--tertiary-ultra-dark-trans-60); }
.bg--tertiary-ultra-dark-trans-70 { background-color: var(--tertiary-ultra-dark-trans-70); }
.bg--tertiary-ultra-dark-trans-80 { background-color: var(--tertiary-ultra-dark-trans-80); }
.bg--tertiary-ultra-dark-trans-90 { background-color: var(--tertiary-ultra-dark-trans-90); }
.bg--accent-trans-10 { background-color: var(--accent-trans-10); }
.bg--accent-trans-20 { background-color: var(--accent-trans-20); }
.bg--accent-trans-30 { background-color: var(--accent-trans-30); }
.bg--accent-trans-40 { background-color: var(--accent-trans-40); }
.bg--accent-trans-50 { background-color: var(--accent-trans-50); }
.bg--accent-trans-60 { background-color: var(--accent-trans-60); }
.bg--accent-trans-70 { background-color: var(--accent-trans-70); }
.bg--accent-trans-80 { background-color: var(--accent-trans-80); }
.bg--accent-trans-90 { background-color: var(--accent-trans-90); }
.bg--accent-light-trans-10 { background-color: var(--accent-light-trans-10); }
.bg--accent-light-trans-20 { background-color: var(--accent-light-trans-20); }
.bg--accent-light-trans-30 { background-color: var(--accent-light-trans-30); }
.bg--accent-light-trans-40 { background-color: var(--accent-light-trans-40); }
.bg--accent-light-trans-50 { background-color: var(--accent-light-trans-50); }
.bg--accent-light-trans-60 { background-color: var(--accent-light-trans-60); }
.bg--accent-light-trans-70 { background-color: var(--accent-light-trans-70); }
.bg--accent-light-trans-80 { background-color: var(--accent-light-trans-80); }
.bg--accent-light-trans-90 { background-color: var(--accent-light-trans-90); }
.bg--accent-dark-trans-10 { background-color: var(--accent-dark-trans-10); }
.bg--accent-dark-trans-20 { background-color: var(--accent-dark-trans-20); }
.bg--accent-dark-trans-30 { background-color: var(--accent-dark-trans-30); }
.bg--accent-dark-trans-40 { background-color: var(--accent-dark-trans-40); }
.bg--accent-dark-trans-50 { background-color: var(--accent-dark-trans-50); }
.bg--accent-dark-trans-60 { background-color: var(--accent-dark-trans-60); }
.bg--accent-dark-trans-70 { background-color: var(--accent-dark-trans-70); }
.bg--accent-dark-trans-80 { background-color: var(--accent-dark-trans-80); }
.bg--accent-dark-trans-90 { background-color: var(--accent-dark-trans-90); }
.bg--accent-ultra-dark-trans-10 { background-color: var(--accent-ultra-dark-trans-10); }
.bg--accent-ultra-dark-trans-20 { background-color: var(--accent-ultra-dark-trans-20); }
.bg--accent-ultra-dark-trans-30 { background-color: var(--accent-ultra-dark-trans-30); }
.bg--accent-ultra-dark-trans-40 { background-color: var(--accent-ultra-dark-trans-40); }
.bg--accent-ultra-dark-trans-50 { background-color: var(--accent-ultra-dark-trans-50); }
.bg--accent-ultra-dark-trans-60 { background-color: var(--accent-ultra-dark-trans-60); }
.bg--accent-ultra-dark-trans-70 { background-color: var(--accent-ultra-dark-trans-70); }
.bg--accent-ultra-dark-trans-80 { background-color: var(--accent-ultra-dark-trans-80); }
.bg--accent-ultra-dark-trans-90 { background-color: var(--accent-ultra-dark-trans-90); }
.bg--base-trans-10 { background-color: var(--base-trans-10); }
.bg--base-trans-20 { background-color: var(--base-trans-20); }
.bg--base-trans-30 { background-color: var(--base-trans-30); }
.bg--base-trans-40 { background-color: var(--base-trans-40); }
.bg--base-trans-50 { background-color: var(--base-trans-50); }
.bg--base-trans-60 { background-color: var(--base-trans-60); }
.bg--base-trans-70 { background-color: var(--base-trans-70); }
.bg--base-trans-80 { background-color: var(--base-trans-80); }
.bg--base-trans-90 { background-color: var(--base-trans-90); }
.bg--base-light-trans-10 { background-color: var(--base-light-trans-10); }
.bg--base-light-trans-20 { background-color: var(--base-light-trans-20); }
.bg--base-light-trans-30 { background-color: var(--base-light-trans-30); }
.bg--base-light-trans-40 { background-color: var(--base-light-trans-40); }
.bg--base-light-trans-50 { background-color: var(--base-light-trans-50); }
.bg--base-light-trans-60 { background-color: var(--base-light-trans-60); }
.bg--base-light-trans-70 { background-color: var(--base-light-trans-70); }
.bg--base-light-trans-80 { background-color: var(--base-light-trans-80); }
.bg--base-light-trans-90 { background-color: var(--base-light-trans-90); }
.bg--base-dark-trans-10 { background-color: var(--base-dark-trans-10); }
.bg--base-dark-trans-20 { background-color: var(--base-dark-trans-20); }
.bg--base-dark-trans-30 { background-color: var(--base-dark-trans-30); }
.bg--base-dark-trans-40 { background-color: var(--base-dark-trans-40); }
.bg--base-dark-trans-50 { background-color: var(--base-dark-trans-50); }
.bg--base-dark-trans-60 { background-color: var(--base-dark-trans-60); }
.bg--base-dark-trans-70 { background-color: var(--base-dark-trans-70); }
.bg--base-dark-trans-80 { background-color: var(--base-dark-trans-80); }
.bg--base-dark-trans-90 { background-color: var(--base-dark-trans-90); }
.bg--base-ultra-dark-trans-10 { background-color: var(--base-ultra-dark-trans-10); }
.bg--base-ultra-dark-trans-20 { background-color: var(--base-ultra-dark-trans-20); }
.bg--base-ultra-dark-trans-30 { background-color: var(--base-ultra-dark-trans-30); }
.bg--base-ultra-dark-trans-40 { background-color: var(--base-ultra-dark-trans-40); }
.bg--base-ultra-dark-trans-50 { background-color: var(--base-ultra-dark-trans-50); }
.bg--base-ultra-dark-trans-60 { background-color: var(--base-ultra-dark-trans-60); }
.bg--base-ultra-dark-trans-70 { background-color: var(--base-ultra-dark-trans-70); }
.bg--base-ultra-dark-trans-80 { background-color: var(--base-ultra-dark-trans-80); }
.bg--base-ultra-dark-trans-90 { background-color: var(--base-ultra-dark-trans-90); }
.bg--neutral-trans-10 { background-color: var(--neutral-trans-10); }
.bg--neutral-trans-20 { background-color: var(--neutral-trans-20); }
.bg--neutral-trans-30 { background-color: var(--neutral-trans-30); }
.bg--neutral-trans-40 { background-color: var(--neutral-trans-40); }
.bg--neutral-trans-50 { background-color: var(--neutral-trans-50); }
.bg--neutral-trans-60 { background-color: var(--neutral-trans-60); }
.bg--neutral-trans-70 { background-color: var(--neutral-trans-70); }
.bg--neutral-trans-80 { background-color: var(--neutral-trans-80); }
.bg--neutral-trans-90 { background-color: var(--neutral-trans-90); }
.bg--neutral-light-trans-10 { background-color: var(--neutral-light-trans-10); }
.bg--neutral-light-trans-20 { background-color: var(--neutral-light-trans-20); }
.bg--neutral-light-trans-30 { background-color: var(--neutral-light-trans-30); }
.bg--neutral-light-trans-40 { background-color: var(--neutral-light-trans-40); }
.bg--neutral-light-trans-50 { background-color: var(--neutral-light-trans-50); }
.bg--neutral-light-trans-60 { background-color: var(--neutral-light-trans-60); }
.bg--neutral-light-trans-70 { background-color: var(--neutral-light-trans-70); }
.bg--neutral-light-trans-80 { background-color: var(--neutral-light-trans-80); }
.bg--neutral-light-trans-90 { background-color: var(--neutral-light-trans-90); }
.bg--neutral-dark-trans-10 { background-color: var(--neutral-dark-trans-10); }
.bg--neutral-dark-trans-20 { background-color: var(--neutral-dark-trans-20); }
.bg--neutral-dark-trans-30 { background-color: var(--neutral-dark-trans-30); }
.bg--neutral-dark-trans-40 { background-color: var(--neutral-dark-trans-40); }
.bg--neutral-dark-trans-50 { background-color: var(--neutral-dark-trans-50); }
.bg--neutral-dark-trans-60 { background-color: var(--neutral-dark-trans-60); }
.bg--neutral-dark-trans-70 { background-color: var(--neutral-dark-trans-70); }
.bg--neutral-dark-trans-80 { background-color: var(--neutral-dark-trans-80); }
.bg--neutral-dark-trans-90 { background-color: var(--neutral-dark-trans-90); }
.bg--neutral-ultra-dark-trans-10 { background-color: var(--neutral-ultra-dark-trans-10); }
.bg--neutral-ultra-dark-trans-20 { background-color: var(--neutral-ultra-dark-trans-20); }
.bg--neutral-ultra-dark-trans-30 { background-color: var(--neutral-ultra-dark-trans-30); }
.bg--neutral-ultra-dark-trans-40 { background-color: var(--neutral-ultra-dark-trans-40); }
.bg--neutral-ultra-dark-trans-50 { background-color: var(--neutral-ultra-dark-trans-50); }
.bg--neutral-ultra-dark-trans-60 { background-color: var(--neutral-ultra-dark-trans-60); }
.bg--neutral-ultra-dark-trans-70 { background-color: var(--neutral-ultra-dark-trans-70); }
.bg--neutral-ultra-dark-trans-80 { background-color: var(--neutral-ultra-dark-trans-80); }
.bg--neutral-ultra-dark-trans-90 { background-color: var(--neutral-ultra-dark-trans-90); }

/* ─── Box shadow utilities ─────────────────────────────────────────────────
   The TOKENS already exist (and already invert for dark mode); only the classes
   were missing. Names derived from what was emitted, never guessed. */
.box-shadow--m { box-shadow: var(--box-shadow-m); }
.box-shadow--l { box-shadow: var(--box-shadow-l); }
.box-shadow--xl { box-shadow: var(--box-shadow-xl); }
.box-shadow--1 { box-shadow: var(--box-shadow-1); }
.box-shadow--2 { box-shadow: var(--box-shadow-2); }
.box-shadow--3 { box-shadow: var(--box-shadow-3); }
.box-shadow--none { box-shadow: none; }