/* App colour tokens — exactly the Figma colour styles of file vspP2iZ2eWNJySESUJ3yc0 (MD3_Antz/* only — the Priority/* and Opacity/* styles were dropped 2026-09-24 on Nitin's word: the library keeps the MD3_Antz set),
   values read with get_variable_defs on node 927:1705, 2026-09-20. This is the ONLY app file that holds hex.
   The app follows Figma where the web theme differs (Secondary #00D6C9 vs web #00AEA4). The web keeps shared/colors.css. */
:root {
  /* ---- Figma styles, one hex each, named as in Figma (kebab-case) ---- */
  --md3-add-primary: #00AFD6;   /* MD3_Antz/addPrimary */
  --md3-displaybg-primary: #E8F4F2;   /* MD3_Antz/displaybgPrimary */
  --md3-displaybg-secondary: #DDEBE9;   /* MD3_Antz/displaybgSecondary */
  --md3-moderate-secondary: #E4B819;   /* MD3_Antz/moderateSecondary */
  --md3-moderate-primary: #FFE86E;   /* MD3_Antz/moderatePrimary */
  --md3-notes: #FCF4AE;   /* MD3_Antz/notes */
  --md3-neutral-secondary: #7A8684;   /* MD3_Antz/neutralSecondary */
  --md3-neutral-primary: #000000;   /* MD3_Antz/neutralPrimary */
  --md3-primary: #37BD69;   /* MD3_Antz/Primary */
  --md3-on-primary: #FFFFFF;   /* MD3_Antz/OnPrimary */
  --md3-primary-container: #52F990;   /* MD3_Antz/PrimaryContainer */
  --md3-on-primary-container: #1F515B;   /* MD3_Antz/OnPrimaryContainer */
  --md3-secondary: #00D6C9;   /* MD3_Antz/Secondary */
  --md3-on-secondary: #FFFFFF;   /* MD3_Antz/OnSecondary */
  --md3-secondary-container: #AFEFEB;   /* MD3_Antz/SecondaryContainer */
  --md3-on-secondary-container: #1F415B;   /* MD3_Antz/OnSecondaryContainer */
  --md3-tertiary: #FA6140;   /* MD3_Antz/Tertiary */
  --md3-on-tertiary: #FFFFFF;   /* MD3_Antz/OnTertiary */
  --md3-tertiary-container: #FFBDA8;   /* MD3_Antz/TertiaryContainer */
  --md3-on-tertiary-container: #250E01;   /* MD3_Antz/OnTertiaryContainer */
  --md3-error: #E93353;   /* MD3_Antz/Error */
  --md3-on-error: #FFFFFF;   /* MD3_Antz/OnError */
  --md3-error-container: #FFD3D3;   /* MD3_Antz/ErrorContainer */
  --md3-on-error-container: #4A0415;   /* MD3_Antz/OnErrorContainer */
  --md3-background: #EFF5F2;   /* MD3_Antz/Background */
  --md3-on-background: #E1F9ED;   /* MD3_Antz/OnBackground */
  --md3-surface: #F2FFF8;   /* MD3_Antz/Surface */
  --md3-on-surface: #006D35;   /* MD3_Antz/OnSurface */
  --md3-surface-variant: #DAE7DF;   /* MD3_Antz/SurfaceVariant */
  --md3-on-surface-variant: #44544A;   /* MD3_Antz/OnSurfaceVariant */
  --md3-outline: #839D8D;   /* MD3_Antz/Outline */
  --md3-outline-variant: #C3CEC7;   /* MD3_Antz/OutlineVariant */
  --md3-secondary-dark: #00ABAB;   /* MD3_Antz/SecondaryDark */
  /* Figma alpha styles (the API renders them opaque; alpha taken from the style name) */
  --md3-neutral05: rgb(from #000000 r g b / 5%);   /* MD3_Antz/neutral05 */
  --md3-neutral-50: rgb(from #000000 r g b / 40%);   /* MD3_Antz/neutral_50 */
  --md3-primarywhite20: rgb(from #FFFFFF r g b / 20%);   /* MD3_Antz/Primarywhite20 */
  --md3-on-primarycontainer10: rgb(from #1F515B r g b / 10%);   /* MD3_Antz/OnPrimarycontainer10 */
  --md3-on-primary50: rgb(from #FFFFFF r g b / 50%);   /* MD3_Antz/OnPrimary50 */

  /* ---- Figma gradient styles (Gradients/*), read from the Antz Design System file vspP2iZ2eWNJySESUJ3yc0 node 927:1984 on 2026-09-24 (Nitin). Every stop is an MD3_Antz style, so the gradients are composed from the tokens above, never from hex. ---- */
  --grad-important: linear-gradient(180deg, var(--md3-tertiary) 0%, var(--md3-error) 100%);   /* Gradients/important (927:1988): Tertiary → Error, top to bottom */
  --grad-teal: linear-gradient(180deg, var(--md3-secondary) 0%, var(--md3-on-secondary-container) 100%);   /* Gradients/Grad_teal (927:1994): Secondary → OnSecondaryContainer, top to bottom */
  --grad-greenturq: linear-gradient(116.5deg, var(--md3-secondary) 8.77%, var(--md3-primary) 101.99%);   /* Gradients/greenturq (927:2000): Secondary → Primary at 116.5°, stops as drawn */
  --grad-darklight: linear-gradient(180deg, var(--md3-on-secondary-container) 0%, var(--md3-primary) 100%);   /* Gradients/darklight (927:2006): OnSecondaryContainer → Primary, top to bottom */
  --grad-lightdark: linear-gradient(180deg, var(--md3-primary) 0%, var(--md3-on-secondary-container) 100%);   /* Gradients/lightdark (927:2012; 1272:2681 is a duplicate group of the same style): Primary → OnSecondaryContainer, top to bottom */
  --grad-lightlemonblue: linear-gradient(101.98deg, var(--md3-moderate-primary) 3.40%, var(--md3-secondary-container) 104.31%);   /* Styles/LightLemonblue (1272:2693): moderatePrimary → SecondaryContainer at 101.98°, stops as drawn */
  --grad-lightpinkblue: linear-gradient(101.98deg, var(--md3-error-container) 3.40%, var(--md3-secondary-container) 104.31%);   /* Styles/LightLemonblue (1272:2700) — Figma names this second style the same as the lemon one although it starts from ErrorContainer pink; named by what it is here, Needs Review asks for the Figma rename */
  /* ---- semantic names used by app/components.css, showcase.css and brand.css → Figma style ---- */
  --primary-main: var(--md3-primary);
  --on-primary: var(--md3-on-primary);
  --paper: var(--md3-on-primary);
  --primary-contrast-text: var(--md3-on-primary);
  --primary-container: var(--md3-primary-container);
  --on-primary-container: var(--md3-on-primary-container);
  --primary-light: var(--md3-on-primary-container);
  --primary-dark: var(--md3-on-surface);
  --on-surface: var(--md3-on-surface);
  --secondary-main: var(--md3-secondary);
  --secondary-container: var(--md3-secondary-container);
  --on-secondary-container: var(--md3-on-secondary-container);
  --secondary-dark: var(--md3-on-secondary-container);
  --secondary-dark-token: var(--md3-secondary-dark);
  --text-label: var(--md3-secondary-dark);
  --tertiary: var(--md3-tertiary);
  --tertiary-container: var(--md3-tertiary-container);
  --on-tertiary-container: var(--md3-on-tertiary-container);
  --error: var(--md3-error);
  --error-container: var(--md3-error-container);
  --rustic-red: var(--md3-on-error-container);
  --background: var(--md3-background);
  --light-bg: var(--md3-background);
  --body-bg: var(--md3-background);
  --on-background: var(--md3-on-background);
  --surface: var(--md3-surface);
  --surface-variant: var(--md3-surface-variant);
  --on-surface-variant: var(--md3-on-surface-variant);
  --outline: var(--md3-outline);
  --outline-variant: var(--md3-outline-variant);
  --displaybg-primary: var(--md3-displaybg-primary);
  --table-header-bg: var(--md3-displaybg-primary);
  --background-default: var(--md3-displaybg-primary);
  --displaybg-secondary: var(--md3-displaybg-secondary);
  --moderate-secondary: var(--md3-moderate-secondary);
  --moderate-primary: var(--md3-moderate-primary);
  --notes: var(--md3-notes);
  --antz-notes: var(--md3-notes);
  --antz-notes-80: var(--md3-moderate-primary);
  --neutral-secondary: var(--md3-neutral-secondary);
  --neutral-primary: var(--md3-neutral-primary);
  --deep-dark: var(--md3-neutral-primary);
  --add-primary: var(--md3-add-primary);
  /* ---- measured one-off tints (values used by production components) ---- */
  --surface-variant-60: rgb(from var(--surface-variant) r g b / 60%);
  --primary-08: rgb(from var(--primary-main) r g b / 8%);
  --primary-18: rgb(from var(--primary-main) r g b / 18%);
  --moderate-secondary-18: rgb(from var(--moderate-secondary) r g b / 18%);
  --moderate-secondary-20: rgb(from var(--moderate-secondary) r g b / 20%);
  --moderate-secondary-10: rgb(from var(--moderate-secondary) r g b / 10%);
  --outline-18: rgb(from var(--outline) r g b / 18%);
  --outline-10: rgb(from var(--outline) r g b / 10%);
  --tertiary-18: rgb(from var(--tertiary) r g b / 18%);
  --tertiary-alpha-30: rgb(from var(--tertiary) r g b / 30%);
  --tertiary-20: rgb(from var(--tertiary-container) r g b / 20%);
  --tertiary-container-16: rgb(from var(--tertiary-container) r g b / 16%);
  --displaybg-primary-70: rgb(from var(--displaybg-primary) r g b / 70%);
  --secondary-container-20: rgb(from var(--secondary-container) r g b / 20%);
  --add-primary-10: rgb(from var(--add-primary) r g b / 10%);
  --notes-20: rgb(from var(--notes) r g b / 20%);
  --antz-notes-40: rgb(from var(--notes) r g b / 40%);
  --notes-70: rgb(from var(--notes) r g b / 70%);
  --neutral-05: rgb(from var(--neutral-primary) r g b / 5%);
  --neutral-50: rgb(from var(--neutral-primary) r g b / 40%);
  --black-04: rgb(from var(--neutral-primary) r g b / 4%);
  --black-05: rgb(from var(--neutral-primary) r g b / 5%);
  --black-08: rgb(from var(--neutral-primary) r g b / 8%);
  --on-primary-container-20: rgb(from var(--on-primary-container) r g b / 20%);
  --error-06: rgb(from var(--error) r g b / 6%);
  --error-container-40: rgb(from var(--error-container) r g b / 40%);
  --rustic-red-10: rgb(from var(--rustic-red) r g b / 10%);
  --error-container-30: rgb(from var(--error-container) r g b / 30%);
  --neutral-primary-a8: rgb(from var(--neutral-primary) r g b / 8%);   /* animal card shadow (1266:3932) */   /* gender tag Undetermined (1172:7111) */

  /* ---- opacity scale for every colour, derived with CSS relative colour. Hex untouched. --<name>-a<percent> ---- */
  --md3-add-primary-a5: rgb(from var(--md3-add-primary) r g b / 5%); --md3-add-primary-a10: rgb(from var(--md3-add-primary) r g b / 10%); --md3-add-primary-a20: rgb(from var(--md3-add-primary) r g b / 20%); --md3-add-primary-a30: rgb(from var(--md3-add-primary) r g b / 30%); --md3-add-primary-a40: rgb(from var(--md3-add-primary) r g b / 40%); --md3-add-primary-a50: rgb(from var(--md3-add-primary) r g b / 50%); --md3-add-primary-a60: rgb(from var(--md3-add-primary) r g b / 60%); --md3-add-primary-a70: rgb(from var(--md3-add-primary) r g b / 70%); --md3-add-primary-a80: rgb(from var(--md3-add-primary) r g b / 80%); --md3-add-primary-a90: rgb(from var(--md3-add-primary) r g b / 90%);
  --md3-displaybg-primary-a5: rgb(from var(--md3-displaybg-primary) r g b / 5%); --md3-displaybg-primary-a10: rgb(from var(--md3-displaybg-primary) r g b / 10%); --md3-displaybg-primary-a20: rgb(from var(--md3-displaybg-primary) r g b / 20%); --md3-displaybg-primary-a30: rgb(from var(--md3-displaybg-primary) r g b / 30%); --md3-displaybg-primary-a40: rgb(from var(--md3-displaybg-primary) r g b / 40%); --md3-displaybg-primary-a50: rgb(from var(--md3-displaybg-primary) r g b / 50%); --md3-displaybg-primary-a60: rgb(from var(--md3-displaybg-primary) r g b / 60%); --md3-displaybg-primary-a70: rgb(from var(--md3-displaybg-primary) r g b / 70%); --md3-displaybg-primary-a80: rgb(from var(--md3-displaybg-primary) r g b / 80%); --md3-displaybg-primary-a90: rgb(from var(--md3-displaybg-primary) r g b / 90%);
  --md3-displaybg-secondary-a5: rgb(from var(--md3-displaybg-secondary) r g b / 5%); --md3-displaybg-secondary-a10: rgb(from var(--md3-displaybg-secondary) r g b / 10%); --md3-displaybg-secondary-a20: rgb(from var(--md3-displaybg-secondary) r g b / 20%); --md3-displaybg-secondary-a30: rgb(from var(--md3-displaybg-secondary) r g b / 30%); --md3-displaybg-secondary-a40: rgb(from var(--md3-displaybg-secondary) r g b / 40%); --md3-displaybg-secondary-a50: rgb(from var(--md3-displaybg-secondary) r g b / 50%); --md3-displaybg-secondary-a60: rgb(from var(--md3-displaybg-secondary) r g b / 60%); --md3-displaybg-secondary-a70: rgb(from var(--md3-displaybg-secondary) r g b / 70%); --md3-displaybg-secondary-a80: rgb(from var(--md3-displaybg-secondary) r g b / 80%); --md3-displaybg-secondary-a90: rgb(from var(--md3-displaybg-secondary) r g b / 90%);
  --md3-moderate-secondary-a5: rgb(from var(--md3-moderate-secondary) r g b / 5%); --md3-moderate-secondary-a10: rgb(from var(--md3-moderate-secondary) r g b / 10%); --md3-moderate-secondary-a20: rgb(from var(--md3-moderate-secondary) r g b / 20%); --md3-moderate-secondary-a30: rgb(from var(--md3-moderate-secondary) r g b / 30%); --md3-moderate-secondary-a40: rgb(from var(--md3-moderate-secondary) r g b / 40%); --md3-moderate-secondary-a50: rgb(from var(--md3-moderate-secondary) r g b / 50%); --md3-moderate-secondary-a60: rgb(from var(--md3-moderate-secondary) r g b / 60%); --md3-moderate-secondary-a70: rgb(from var(--md3-moderate-secondary) r g b / 70%); --md3-moderate-secondary-a80: rgb(from var(--md3-moderate-secondary) r g b / 80%); --md3-moderate-secondary-a90: rgb(from var(--md3-moderate-secondary) r g b / 90%);
  --md3-moderate-primary-a5: rgb(from var(--md3-moderate-primary) r g b / 5%); --md3-moderate-primary-a10: rgb(from var(--md3-moderate-primary) r g b / 10%); --md3-moderate-primary-a20: rgb(from var(--md3-moderate-primary) r g b / 20%); --md3-moderate-primary-a30: rgb(from var(--md3-moderate-primary) r g b / 30%); --md3-moderate-primary-a40: rgb(from var(--md3-moderate-primary) r g b / 40%); --md3-moderate-primary-a50: rgb(from var(--md3-moderate-primary) r g b / 50%); --md3-moderate-primary-a60: rgb(from var(--md3-moderate-primary) r g b / 60%); --md3-moderate-primary-a70: rgb(from var(--md3-moderate-primary) r g b / 70%); --md3-moderate-primary-a80: rgb(from var(--md3-moderate-primary) r g b / 80%); --md3-moderate-primary-a90: rgb(from var(--md3-moderate-primary) r g b / 90%);
  --md3-notes-a5: rgb(from var(--md3-notes) r g b / 5%); --md3-notes-a10: rgb(from var(--md3-notes) r g b / 10%); --md3-notes-a20: rgb(from var(--md3-notes) r g b / 20%); --md3-notes-a30: rgb(from var(--md3-notes) r g b / 30%); --md3-notes-a40: rgb(from var(--md3-notes) r g b / 40%); --md3-notes-a50: rgb(from var(--md3-notes) r g b / 50%); --md3-notes-a60: rgb(from var(--md3-notes) r g b / 60%); --md3-notes-a70: rgb(from var(--md3-notes) r g b / 70%); --md3-notes-a80: rgb(from var(--md3-notes) r g b / 80%); --md3-notes-a90: rgb(from var(--md3-notes) r g b / 90%);
  --md3-neutral-secondary-a5: rgb(from var(--md3-neutral-secondary) r g b / 5%); --md3-neutral-secondary-a10: rgb(from var(--md3-neutral-secondary) r g b / 10%); --md3-neutral-secondary-a20: rgb(from var(--md3-neutral-secondary) r g b / 20%); --md3-neutral-secondary-a30: rgb(from var(--md3-neutral-secondary) r g b / 30%); --md3-neutral-secondary-a40: rgb(from var(--md3-neutral-secondary) r g b / 40%); --md3-neutral-secondary-a50: rgb(from var(--md3-neutral-secondary) r g b / 50%); --md3-neutral-secondary-a60: rgb(from var(--md3-neutral-secondary) r g b / 60%); --md3-neutral-secondary-a70: rgb(from var(--md3-neutral-secondary) r g b / 70%); --md3-neutral-secondary-a80: rgb(from var(--md3-neutral-secondary) r g b / 80%); --md3-neutral-secondary-a90: rgb(from var(--md3-neutral-secondary) r g b / 90%);
  --md3-neutral-primary-a5: rgb(from var(--md3-neutral-primary) r g b / 5%); --md3-neutral-primary-a10: rgb(from var(--md3-neutral-primary) r g b / 10%); --md3-neutral-primary-a20: rgb(from var(--md3-neutral-primary) r g b / 20%); --md3-neutral-primary-a30: rgb(from var(--md3-neutral-primary) r g b / 30%); --md3-neutral-primary-a40: rgb(from var(--md3-neutral-primary) r g b / 40%); --md3-neutral-primary-a50: rgb(from var(--md3-neutral-primary) r g b / 50%); --md3-neutral-primary-a60: rgb(from var(--md3-neutral-primary) r g b / 60%); --md3-neutral-primary-a70: rgb(from var(--md3-neutral-primary) r g b / 70%); --md3-neutral-primary-a80: rgb(from var(--md3-neutral-primary) r g b / 80%); --md3-neutral-primary-a90: rgb(from var(--md3-neutral-primary) r g b / 90%);
  --md3-primary-a5: rgb(from var(--md3-primary) r g b / 5%); --md3-primary-a10: rgb(from var(--md3-primary) r g b / 10%); --md3-primary-a20: rgb(from var(--md3-primary) r g b / 20%); --md3-primary-a30: rgb(from var(--md3-primary) r g b / 30%); --md3-primary-a40: rgb(from var(--md3-primary) r g b / 40%); --md3-primary-a50: rgb(from var(--md3-primary) r g b / 50%); --md3-primary-a60: rgb(from var(--md3-primary) r g b / 60%); --md3-primary-a70: rgb(from var(--md3-primary) r g b / 70%); --md3-primary-a80: rgb(from var(--md3-primary) r g b / 80%); --md3-primary-a90: rgb(from var(--md3-primary) r g b / 90%);
  --md3-on-primary-a5: rgb(from var(--md3-on-primary) r g b / 5%); --md3-on-primary-a10: rgb(from var(--md3-on-primary) r g b / 10%); --md3-on-primary-a20: rgb(from var(--md3-on-primary) r g b / 20%); --md3-on-primary-a30: rgb(from var(--md3-on-primary) r g b / 30%); --md3-on-primary-a40: rgb(from var(--md3-on-primary) r g b / 40%); --md3-on-primary-a50: rgb(from var(--md3-on-primary) r g b / 50%); --md3-on-primary-a60: rgb(from var(--md3-on-primary) r g b / 60%); --md3-on-primary-a70: rgb(from var(--md3-on-primary) r g b / 70%); --md3-on-primary-a80: rgb(from var(--md3-on-primary) r g b / 80%); --md3-on-primary-a90: rgb(from var(--md3-on-primary) r g b / 90%);
  --md3-primary-container-a5: rgb(from var(--md3-primary-container) r g b / 5%); --md3-primary-container-a10: rgb(from var(--md3-primary-container) r g b / 10%); --md3-primary-container-a20: rgb(from var(--md3-primary-container) r g b / 20%); --md3-primary-container-a30: rgb(from var(--md3-primary-container) r g b / 30%); --md3-primary-container-a40: rgb(from var(--md3-primary-container) r g b / 40%); --md3-primary-container-a50: rgb(from var(--md3-primary-container) r g b / 50%); --md3-primary-container-a60: rgb(from var(--md3-primary-container) r g b / 60%); --md3-primary-container-a70: rgb(from var(--md3-primary-container) r g b / 70%); --md3-primary-container-a80: rgb(from var(--md3-primary-container) r g b / 80%); --md3-primary-container-a90: rgb(from var(--md3-primary-container) r g b / 90%);
  --md3-on-primary-container-a5: rgb(from var(--md3-on-primary-container) r g b / 5%); --md3-on-primary-container-a10: rgb(from var(--md3-on-primary-container) r g b / 10%); --md3-on-primary-container-a20: rgb(from var(--md3-on-primary-container) r g b / 20%); --md3-on-primary-container-a30: rgb(from var(--md3-on-primary-container) r g b / 30%); --md3-on-primary-container-a40: rgb(from var(--md3-on-primary-container) r g b / 40%); --md3-on-primary-container-a50: rgb(from var(--md3-on-primary-container) r g b / 50%); --md3-on-primary-container-a60: rgb(from var(--md3-on-primary-container) r g b / 60%); --md3-on-primary-container-a70: rgb(from var(--md3-on-primary-container) r g b / 70%); --md3-on-primary-container-a80: rgb(from var(--md3-on-primary-container) r g b / 80%); --md3-on-primary-container-a90: rgb(from var(--md3-on-primary-container) r g b / 90%);
  --md3-secondary-a5: rgb(from var(--md3-secondary) r g b / 5%); --md3-secondary-a10: rgb(from var(--md3-secondary) r g b / 10%); --md3-secondary-a20: rgb(from var(--md3-secondary) r g b / 20%); --md3-secondary-a30: rgb(from var(--md3-secondary) r g b / 30%); --md3-secondary-a40: rgb(from var(--md3-secondary) r g b / 40%); --md3-secondary-a50: rgb(from var(--md3-secondary) r g b / 50%); --md3-secondary-a60: rgb(from var(--md3-secondary) r g b / 60%); --md3-secondary-a70: rgb(from var(--md3-secondary) r g b / 70%); --md3-secondary-a80: rgb(from var(--md3-secondary) r g b / 80%); --md3-secondary-a90: rgb(from var(--md3-secondary) r g b / 90%);
  --md3-on-secondary-a5: rgb(from var(--md3-on-secondary) r g b / 5%); --md3-on-secondary-a10: rgb(from var(--md3-on-secondary) r g b / 10%); --md3-on-secondary-a20: rgb(from var(--md3-on-secondary) r g b / 20%); --md3-on-secondary-a30: rgb(from var(--md3-on-secondary) r g b / 30%); --md3-on-secondary-a40: rgb(from var(--md3-on-secondary) r g b / 40%); --md3-on-secondary-a50: rgb(from var(--md3-on-secondary) r g b / 50%); --md3-on-secondary-a60: rgb(from var(--md3-on-secondary) r g b / 60%); --md3-on-secondary-a70: rgb(from var(--md3-on-secondary) r g b / 70%); --md3-on-secondary-a80: rgb(from var(--md3-on-secondary) r g b / 80%); --md3-on-secondary-a90: rgb(from var(--md3-on-secondary) r g b / 90%);
  --md3-secondary-container-a5: rgb(from var(--md3-secondary-container) r g b / 5%); --md3-secondary-container-a10: rgb(from var(--md3-secondary-container) r g b / 10%); --md3-secondary-container-a20: rgb(from var(--md3-secondary-container) r g b / 20%); --md3-secondary-container-a30: rgb(from var(--md3-secondary-container) r g b / 30%); --md3-secondary-container-a40: rgb(from var(--md3-secondary-container) r g b / 40%); --md3-secondary-container-a50: rgb(from var(--md3-secondary-container) r g b / 50%); --md3-secondary-container-a60: rgb(from var(--md3-secondary-container) r g b / 60%); --md3-secondary-container-a70: rgb(from var(--md3-secondary-container) r g b / 70%); --md3-secondary-container-a80: rgb(from var(--md3-secondary-container) r g b / 80%); --md3-secondary-container-a90: rgb(from var(--md3-secondary-container) r g b / 90%);
  --md3-on-secondary-container-a5: rgb(from var(--md3-on-secondary-container) r g b / 5%); --md3-on-secondary-container-a10: rgb(from var(--md3-on-secondary-container) r g b / 10%); --md3-on-secondary-container-a20: rgb(from var(--md3-on-secondary-container) r g b / 20%); --md3-on-secondary-container-a30: rgb(from var(--md3-on-secondary-container) r g b / 30%); --md3-on-secondary-container-a40: rgb(from var(--md3-on-secondary-container) r g b / 40%); --md3-on-secondary-container-a50: rgb(from var(--md3-on-secondary-container) r g b / 50%); --md3-on-secondary-container-a60: rgb(from var(--md3-on-secondary-container) r g b / 60%); --md3-on-secondary-container-a70: rgb(from var(--md3-on-secondary-container) r g b / 70%); --md3-on-secondary-container-a80: rgb(from var(--md3-on-secondary-container) r g b / 80%); --md3-on-secondary-container-a90: rgb(from var(--md3-on-secondary-container) r g b / 90%);
  --md3-tertiary-a5: rgb(from var(--md3-tertiary) r g b / 5%); --md3-tertiary-a10: rgb(from var(--md3-tertiary) r g b / 10%); --md3-tertiary-a20: rgb(from var(--md3-tertiary) r g b / 20%); --md3-tertiary-a30: rgb(from var(--md3-tertiary) r g b / 30%); --md3-tertiary-a40: rgb(from var(--md3-tertiary) r g b / 40%); --md3-tertiary-a50: rgb(from var(--md3-tertiary) r g b / 50%); --md3-tertiary-a60: rgb(from var(--md3-tertiary) r g b / 60%); --md3-tertiary-a70: rgb(from var(--md3-tertiary) r g b / 70%); --md3-tertiary-a80: rgb(from var(--md3-tertiary) r g b / 80%); --md3-tertiary-a90: rgb(from var(--md3-tertiary) r g b / 90%);
  --md3-on-tertiary-a5: rgb(from var(--md3-on-tertiary) r g b / 5%); --md3-on-tertiary-a10: rgb(from var(--md3-on-tertiary) r g b / 10%); --md3-on-tertiary-a20: rgb(from var(--md3-on-tertiary) r g b / 20%); --md3-on-tertiary-a30: rgb(from var(--md3-on-tertiary) r g b / 30%); --md3-on-tertiary-a40: rgb(from var(--md3-on-tertiary) r g b / 40%); --md3-on-tertiary-a50: rgb(from var(--md3-on-tertiary) r g b / 50%); --md3-on-tertiary-a60: rgb(from var(--md3-on-tertiary) r g b / 60%); --md3-on-tertiary-a70: rgb(from var(--md3-on-tertiary) r g b / 70%); --md3-on-tertiary-a80: rgb(from var(--md3-on-tertiary) r g b / 80%); --md3-on-tertiary-a90: rgb(from var(--md3-on-tertiary) r g b / 90%);
  --md3-tertiary-container-a5: rgb(from var(--md3-tertiary-container) r g b / 5%); --md3-tertiary-container-a10: rgb(from var(--md3-tertiary-container) r g b / 10%); --md3-tertiary-container-a20: rgb(from var(--md3-tertiary-container) r g b / 20%); --md3-tertiary-container-a30: rgb(from var(--md3-tertiary-container) r g b / 30%); --md3-tertiary-container-a40: rgb(from var(--md3-tertiary-container) r g b / 40%); --md3-tertiary-container-a50: rgb(from var(--md3-tertiary-container) r g b / 50%); --md3-tertiary-container-a60: rgb(from var(--md3-tertiary-container) r g b / 60%); --md3-tertiary-container-a70: rgb(from var(--md3-tertiary-container) r g b / 70%); --md3-tertiary-container-a80: rgb(from var(--md3-tertiary-container) r g b / 80%); --md3-tertiary-container-a90: rgb(from var(--md3-tertiary-container) r g b / 90%);
  --md3-on-tertiary-container-a5: rgb(from var(--md3-on-tertiary-container) r g b / 5%); --md3-on-tertiary-container-a10: rgb(from var(--md3-on-tertiary-container) r g b / 10%); --md3-on-tertiary-container-a20: rgb(from var(--md3-on-tertiary-container) r g b / 20%); --md3-on-tertiary-container-a30: rgb(from var(--md3-on-tertiary-container) r g b / 30%); --md3-on-tertiary-container-a40: rgb(from var(--md3-on-tertiary-container) r g b / 40%); --md3-on-tertiary-container-a50: rgb(from var(--md3-on-tertiary-container) r g b / 50%); --md3-on-tertiary-container-a60: rgb(from var(--md3-on-tertiary-container) r g b / 60%); --md3-on-tertiary-container-a70: rgb(from var(--md3-on-tertiary-container) r g b / 70%); --md3-on-tertiary-container-a80: rgb(from var(--md3-on-tertiary-container) r g b / 80%); --md3-on-tertiary-container-a90: rgb(from var(--md3-on-tertiary-container) r g b / 90%);
  --md3-error-a5: rgb(from var(--md3-error) r g b / 5%); --md3-error-a10: rgb(from var(--md3-error) r g b / 10%); --md3-error-a20: rgb(from var(--md3-error) r g b / 20%); --md3-error-a30: rgb(from var(--md3-error) r g b / 30%); --md3-error-a40: rgb(from var(--md3-error) r g b / 40%); --md3-error-a50: rgb(from var(--md3-error) r g b / 50%); --md3-error-a60: rgb(from var(--md3-error) r g b / 60%); --md3-error-a70: rgb(from var(--md3-error) r g b / 70%); --md3-error-a80: rgb(from var(--md3-error) r g b / 80%); --md3-error-a90: rgb(from var(--md3-error) r g b / 90%);
  --md3-on-error-a5: rgb(from var(--md3-on-error) r g b / 5%); --md3-on-error-a10: rgb(from var(--md3-on-error) r g b / 10%); --md3-on-error-a20: rgb(from var(--md3-on-error) r g b / 20%); --md3-on-error-a30: rgb(from var(--md3-on-error) r g b / 30%); --md3-on-error-a40: rgb(from var(--md3-on-error) r g b / 40%); --md3-on-error-a50: rgb(from var(--md3-on-error) r g b / 50%); --md3-on-error-a60: rgb(from var(--md3-on-error) r g b / 60%); --md3-on-error-a70: rgb(from var(--md3-on-error) r g b / 70%); --md3-on-error-a80: rgb(from var(--md3-on-error) r g b / 80%); --md3-on-error-a90: rgb(from var(--md3-on-error) r g b / 90%);
  --md3-error-container-a5: rgb(from var(--md3-error-container) r g b / 5%); --md3-error-container-a10: rgb(from var(--md3-error-container) r g b / 10%); --md3-error-container-a20: rgb(from var(--md3-error-container) r g b / 20%); --md3-error-container-a30: rgb(from var(--md3-error-container) r g b / 30%); --md3-error-container-a40: rgb(from var(--md3-error-container) r g b / 40%); --md3-error-container-a50: rgb(from var(--md3-error-container) r g b / 50%); --md3-error-container-a60: rgb(from var(--md3-error-container) r g b / 60%); --md3-error-container-a70: rgb(from var(--md3-error-container) r g b / 70%); --md3-error-container-a80: rgb(from var(--md3-error-container) r g b / 80%); --md3-error-container-a90: rgb(from var(--md3-error-container) r g b / 90%);
  --md3-on-error-container-a5: rgb(from var(--md3-on-error-container) r g b / 5%); --md3-on-error-container-a10: rgb(from var(--md3-on-error-container) r g b / 10%); --md3-on-error-container-a20: rgb(from var(--md3-on-error-container) r g b / 20%); --md3-on-error-container-a30: rgb(from var(--md3-on-error-container) r g b / 30%); --md3-on-error-container-a40: rgb(from var(--md3-on-error-container) r g b / 40%); --md3-on-error-container-a50: rgb(from var(--md3-on-error-container) r g b / 50%); --md3-on-error-container-a60: rgb(from var(--md3-on-error-container) r g b / 60%); --md3-on-error-container-a70: rgb(from var(--md3-on-error-container) r g b / 70%); --md3-on-error-container-a80: rgb(from var(--md3-on-error-container) r g b / 80%); --md3-on-error-container-a90: rgb(from var(--md3-on-error-container) r g b / 90%);
  --md3-background-a5: rgb(from var(--md3-background) r g b / 5%); --md3-background-a10: rgb(from var(--md3-background) r g b / 10%); --md3-background-a20: rgb(from var(--md3-background) r g b / 20%); --md3-background-a30: rgb(from var(--md3-background) r g b / 30%); --md3-background-a40: rgb(from var(--md3-background) r g b / 40%); --md3-background-a50: rgb(from var(--md3-background) r g b / 50%); --md3-background-a60: rgb(from var(--md3-background) r g b / 60%); --md3-background-a70: rgb(from var(--md3-background) r g b / 70%); --md3-background-a80: rgb(from var(--md3-background) r g b / 80%); --md3-background-a90: rgb(from var(--md3-background) r g b / 90%);
  --md3-on-background-a5: rgb(from var(--md3-on-background) r g b / 5%); --md3-on-background-a10: rgb(from var(--md3-on-background) r g b / 10%); --md3-on-background-a20: rgb(from var(--md3-on-background) r g b / 20%); --md3-on-background-a30: rgb(from var(--md3-on-background) r g b / 30%); --md3-on-background-a40: rgb(from var(--md3-on-background) r g b / 40%); --md3-on-background-a50: rgb(from var(--md3-on-background) r g b / 50%); --md3-on-background-a60: rgb(from var(--md3-on-background) r g b / 60%); --md3-on-background-a70: rgb(from var(--md3-on-background) r g b / 70%); --md3-on-background-a80: rgb(from var(--md3-on-background) r g b / 80%); --md3-on-background-a90: rgb(from var(--md3-on-background) r g b / 90%);
  --md3-surface-a5: rgb(from var(--md3-surface) r g b / 5%); --md3-surface-a10: rgb(from var(--md3-surface) r g b / 10%); --md3-surface-a20: rgb(from var(--md3-surface) r g b / 20%); --md3-surface-a30: rgb(from var(--md3-surface) r g b / 30%); --md3-surface-a40: rgb(from var(--md3-surface) r g b / 40%); --md3-surface-a50: rgb(from var(--md3-surface) r g b / 50%); --md3-surface-a60: rgb(from var(--md3-surface) r g b / 60%); --md3-surface-a70: rgb(from var(--md3-surface) r g b / 70%); --md3-surface-a80: rgb(from var(--md3-surface) r g b / 80%); --md3-surface-a90: rgb(from var(--md3-surface) r g b / 90%);
  --md3-on-surface-a5: rgb(from var(--md3-on-surface) r g b / 5%); --md3-on-surface-a10: rgb(from var(--md3-on-surface) r g b / 10%); --md3-on-surface-a20: rgb(from var(--md3-on-surface) r g b / 20%); --md3-on-surface-a30: rgb(from var(--md3-on-surface) r g b / 30%); --md3-on-surface-a40: rgb(from var(--md3-on-surface) r g b / 40%); --md3-on-surface-a50: rgb(from var(--md3-on-surface) r g b / 50%); --md3-on-surface-a60: rgb(from var(--md3-on-surface) r g b / 60%); --md3-on-surface-a70: rgb(from var(--md3-on-surface) r g b / 70%); --md3-on-surface-a80: rgb(from var(--md3-on-surface) r g b / 80%); --md3-on-surface-a90: rgb(from var(--md3-on-surface) r g b / 90%);
  --md3-surface-variant-a5: rgb(from var(--md3-surface-variant) r g b / 5%); --md3-surface-variant-a10: rgb(from var(--md3-surface-variant) r g b / 10%); --md3-surface-variant-a20: rgb(from var(--md3-surface-variant) r g b / 20%); --md3-surface-variant-a30: rgb(from var(--md3-surface-variant) r g b / 30%); --md3-surface-variant-a40: rgb(from var(--md3-surface-variant) r g b / 40%); --md3-surface-variant-a50: rgb(from var(--md3-surface-variant) r g b / 50%); --md3-surface-variant-a60: rgb(from var(--md3-surface-variant) r g b / 60%); --md3-surface-variant-a70: rgb(from var(--md3-surface-variant) r g b / 70%); --md3-surface-variant-a80: rgb(from var(--md3-surface-variant) r g b / 80%); --md3-surface-variant-a90: rgb(from var(--md3-surface-variant) r g b / 90%);
  --md3-on-surface-variant-a5: rgb(from var(--md3-on-surface-variant) r g b / 5%); --md3-on-surface-variant-a10: rgb(from var(--md3-on-surface-variant) r g b / 10%); --md3-on-surface-variant-a20: rgb(from var(--md3-on-surface-variant) r g b / 20%); --md3-on-surface-variant-a30: rgb(from var(--md3-on-surface-variant) r g b / 30%); --md3-on-surface-variant-a40: rgb(from var(--md3-on-surface-variant) r g b / 40%); --md3-on-surface-variant-a50: rgb(from var(--md3-on-surface-variant) r g b / 50%); --md3-on-surface-variant-a60: rgb(from var(--md3-on-surface-variant) r g b / 60%); --md3-on-surface-variant-a70: rgb(from var(--md3-on-surface-variant) r g b / 70%); --md3-on-surface-variant-a80: rgb(from var(--md3-on-surface-variant) r g b / 80%); --md3-on-surface-variant-a90: rgb(from var(--md3-on-surface-variant) r g b / 90%);
  --md3-outline-a5: rgb(from var(--md3-outline) r g b / 5%); --md3-outline-a10: rgb(from var(--md3-outline) r g b / 10%); --md3-outline-a20: rgb(from var(--md3-outline) r g b / 20%); --md3-outline-a30: rgb(from var(--md3-outline) r g b / 30%); --md3-outline-a40: rgb(from var(--md3-outline) r g b / 40%); --md3-outline-a50: rgb(from var(--md3-outline) r g b / 50%); --md3-outline-a60: rgb(from var(--md3-outline) r g b / 60%); --md3-outline-a70: rgb(from var(--md3-outline) r g b / 70%); --md3-outline-a80: rgb(from var(--md3-outline) r g b / 80%); --md3-outline-a90: rgb(from var(--md3-outline) r g b / 90%);
  --md3-outline-variant-a5: rgb(from var(--md3-outline-variant) r g b / 5%); --md3-outline-variant-a10: rgb(from var(--md3-outline-variant) r g b / 10%); --md3-outline-variant-a20: rgb(from var(--md3-outline-variant) r g b / 20%); --md3-outline-variant-a30: rgb(from var(--md3-outline-variant) r g b / 30%); --md3-outline-variant-a40: rgb(from var(--md3-outline-variant) r g b / 40%); --md3-outline-variant-a50: rgb(from var(--md3-outline-variant) r g b / 50%); --md3-outline-variant-a60: rgb(from var(--md3-outline-variant) r g b / 60%); --md3-outline-variant-a70: rgb(from var(--md3-outline-variant) r g b / 70%); --md3-outline-variant-a80: rgb(from var(--md3-outline-variant) r g b / 80%); --md3-outline-variant-a90: rgb(from var(--md3-outline-variant) r g b / 90%);
  --md3-secondary-dark-a5: rgb(from var(--md3-secondary-dark) r g b / 5%); --md3-secondary-dark-a10: rgb(from var(--md3-secondary-dark) r g b / 10%); --md3-secondary-dark-a20: rgb(from var(--md3-secondary-dark) r g b / 20%); --md3-secondary-dark-a30: rgb(from var(--md3-secondary-dark) r g b / 30%); --md3-secondary-dark-a40: rgb(from var(--md3-secondary-dark) r g b / 40%); --md3-secondary-dark-a50: rgb(from var(--md3-secondary-dark) r g b / 50%); --md3-secondary-dark-a60: rgb(from var(--md3-secondary-dark) r g b / 60%); --md3-secondary-dark-a70: rgb(from var(--md3-secondary-dark) r g b / 70%); --md3-secondary-dark-a80: rgb(from var(--md3-secondary-dark) r g b / 80%); --md3-secondary-dark-a90: rgb(from var(--md3-secondary-dark) r g b / 90%);
  --primary-main-a5: rgb(from var(--primary-main) r g b / 5%); --primary-main-a10: rgb(from var(--primary-main) r g b / 10%); --primary-main-a20: rgb(from var(--primary-main) r g b / 20%); --primary-main-a30: rgb(from var(--primary-main) r g b / 30%); --primary-main-a40: rgb(from var(--primary-main) r g b / 40%); --primary-main-a50: rgb(from var(--primary-main) r g b / 50%); --primary-main-a60: rgb(from var(--primary-main) r g b / 60%); --primary-main-a70: rgb(from var(--primary-main) r g b / 70%); --primary-main-a80: rgb(from var(--primary-main) r g b / 80%); --primary-main-a90: rgb(from var(--primary-main) r g b / 90%);
  --on-primary-a5: rgb(from var(--on-primary) r g b / 5%); --on-primary-a10: rgb(from var(--on-primary) r g b / 10%); --on-primary-a20: rgb(from var(--on-primary) r g b / 20%); --on-primary-a30: rgb(from var(--on-primary) r g b / 30%); --on-primary-a40: rgb(from var(--on-primary) r g b / 40%); --on-primary-a50: rgb(from var(--on-primary) r g b / 50%); --on-primary-a60: rgb(from var(--on-primary) r g b / 60%); --on-primary-a70: rgb(from var(--on-primary) r g b / 70%); --on-primary-a80: rgb(from var(--on-primary) r g b / 80%); --on-primary-a90: rgb(from var(--on-primary) r g b / 90%);
  --paper-a5: rgb(from var(--paper) r g b / 5%); --paper-a10: rgb(from var(--paper) r g b / 10%); --paper-a20: rgb(from var(--paper) r g b / 20%); --paper-a30: rgb(from var(--paper) r g b / 30%); --paper-a40: rgb(from var(--paper) r g b / 40%); --paper-a50: rgb(from var(--paper) r g b / 50%); --paper-a60: rgb(from var(--paper) r g b / 60%); --paper-a70: rgb(from var(--paper) r g b / 70%); --paper-a80: rgb(from var(--paper) r g b / 80%); --paper-a90: rgb(from var(--paper) r g b / 90%);
  --primary-contrast-text-a5: rgb(from var(--primary-contrast-text) r g b / 5%); --primary-contrast-text-a10: rgb(from var(--primary-contrast-text) r g b / 10%); --primary-contrast-text-a20: rgb(from var(--primary-contrast-text) r g b / 20%); --primary-contrast-text-a30: rgb(from var(--primary-contrast-text) r g b / 30%); --primary-contrast-text-a40: rgb(from var(--primary-contrast-text) r g b / 40%); --primary-contrast-text-a50: rgb(from var(--primary-contrast-text) r g b / 50%); --primary-contrast-text-a60: rgb(from var(--primary-contrast-text) r g b / 60%); --primary-contrast-text-a70: rgb(from var(--primary-contrast-text) r g b / 70%); --primary-contrast-text-a80: rgb(from var(--primary-contrast-text) r g b / 80%); --primary-contrast-text-a90: rgb(from var(--primary-contrast-text) r g b / 90%);
  --primary-container-a5: rgb(from var(--primary-container) r g b / 5%); --primary-container-a10: rgb(from var(--primary-container) r g b / 10%); --primary-container-a20: rgb(from var(--primary-container) r g b / 20%); --primary-container-a30: rgb(from var(--primary-container) r g b / 30%); --primary-container-a40: rgb(from var(--primary-container) r g b / 40%); --primary-container-a50: rgb(from var(--primary-container) r g b / 50%); --primary-container-a60: rgb(from var(--primary-container) r g b / 60%); --primary-container-a70: rgb(from var(--primary-container) r g b / 70%); --primary-container-a80: rgb(from var(--primary-container) r g b / 80%); --primary-container-a90: rgb(from var(--primary-container) r g b / 90%);
  --on-primary-container-a5: rgb(from var(--on-primary-container) r g b / 5%); --on-primary-container-a10: rgb(from var(--on-primary-container) r g b / 10%); --on-primary-container-a20: rgb(from var(--on-primary-container) r g b / 20%); --on-primary-container-a30: rgb(from var(--on-primary-container) r g b / 30%); --on-primary-container-a40: rgb(from var(--on-primary-container) r g b / 40%); --on-primary-container-a50: rgb(from var(--on-primary-container) r g b / 50%); --on-primary-container-a60: rgb(from var(--on-primary-container) r g b / 60%); --on-primary-container-a70: rgb(from var(--on-primary-container) r g b / 70%); --on-primary-container-a80: rgb(from var(--on-primary-container) r g b / 80%); --on-primary-container-a90: rgb(from var(--on-primary-container) r g b / 90%);
  --primary-light-a5: rgb(from var(--primary-light) r g b / 5%); --primary-light-a10: rgb(from var(--primary-light) r g b / 10%); --primary-light-a20: rgb(from var(--primary-light) r g b / 20%); --primary-light-a30: rgb(from var(--primary-light) r g b / 30%); --primary-light-a40: rgb(from var(--primary-light) r g b / 40%); --primary-light-a50: rgb(from var(--primary-light) r g b / 50%); --primary-light-a60: rgb(from var(--primary-light) r g b / 60%); --primary-light-a70: rgb(from var(--primary-light) r g b / 70%); --primary-light-a80: rgb(from var(--primary-light) r g b / 80%); --primary-light-a90: rgb(from var(--primary-light) r g b / 90%);
  --primary-dark-a5: rgb(from var(--primary-dark) r g b / 5%); --primary-dark-a10: rgb(from var(--primary-dark) r g b / 10%); --primary-dark-a20: rgb(from var(--primary-dark) r g b / 20%); --primary-dark-a30: rgb(from var(--primary-dark) r g b / 30%); --primary-dark-a40: rgb(from var(--primary-dark) r g b / 40%); --primary-dark-a50: rgb(from var(--primary-dark) r g b / 50%); --primary-dark-a60: rgb(from var(--primary-dark) r g b / 60%); --primary-dark-a70: rgb(from var(--primary-dark) r g b / 70%); --primary-dark-a80: rgb(from var(--primary-dark) r g b / 80%); --primary-dark-a90: rgb(from var(--primary-dark) r g b / 90%);
  --on-surface-a5: rgb(from var(--on-surface) r g b / 5%); --on-surface-a10: rgb(from var(--on-surface) r g b / 10%); --on-surface-a20: rgb(from var(--on-surface) r g b / 20%); --on-surface-a30: rgb(from var(--on-surface) r g b / 30%); --on-surface-a40: rgb(from var(--on-surface) r g b / 40%); --on-surface-a50: rgb(from var(--on-surface) r g b / 50%); --on-surface-a60: rgb(from var(--on-surface) r g b / 60%); --on-surface-a70: rgb(from var(--on-surface) r g b / 70%); --on-surface-a80: rgb(from var(--on-surface) r g b / 80%); --on-surface-a90: rgb(from var(--on-surface) r g b / 90%);
  --secondary-main-a5: rgb(from var(--secondary-main) r g b / 5%); --secondary-main-a10: rgb(from var(--secondary-main) r g b / 10%); --secondary-main-a20: rgb(from var(--secondary-main) r g b / 20%); --secondary-main-a30: rgb(from var(--secondary-main) r g b / 30%); --secondary-main-a40: rgb(from var(--secondary-main) r g b / 40%); --secondary-main-a50: rgb(from var(--secondary-main) r g b / 50%); --secondary-main-a60: rgb(from var(--secondary-main) r g b / 60%); --secondary-main-a70: rgb(from var(--secondary-main) r g b / 70%); --secondary-main-a80: rgb(from var(--secondary-main) r g b / 80%); --secondary-main-a90: rgb(from var(--secondary-main) r g b / 90%);
  --secondary-container-a5: rgb(from var(--secondary-container) r g b / 5%); --secondary-container-a10: rgb(from var(--secondary-container) r g b / 10%); --secondary-container-a20: rgb(from var(--secondary-container) r g b / 20%); --secondary-container-a30: rgb(from var(--secondary-container) r g b / 30%); --secondary-container-a40: rgb(from var(--secondary-container) r g b / 40%); --secondary-container-a50: rgb(from var(--secondary-container) r g b / 50%); --secondary-container-a60: rgb(from var(--secondary-container) r g b / 60%); --secondary-container-a70: rgb(from var(--secondary-container) r g b / 70%); --secondary-container-a80: rgb(from var(--secondary-container) r g b / 80%); --secondary-container-a90: rgb(from var(--secondary-container) r g b / 90%);
  --on-secondary-container-a5: rgb(from var(--on-secondary-container) r g b / 5%); --on-secondary-container-a10: rgb(from var(--on-secondary-container) r g b / 10%); --on-secondary-container-a20: rgb(from var(--on-secondary-container) r g b / 20%); --on-secondary-container-a30: rgb(from var(--on-secondary-container) r g b / 30%); --on-secondary-container-a40: rgb(from var(--on-secondary-container) r g b / 40%); --on-secondary-container-a50: rgb(from var(--on-secondary-container) r g b / 50%); --on-secondary-container-a60: rgb(from var(--on-secondary-container) r g b / 60%); --on-secondary-container-a70: rgb(from var(--on-secondary-container) r g b / 70%); --on-secondary-container-a80: rgb(from var(--on-secondary-container) r g b / 80%); --on-secondary-container-a90: rgb(from var(--on-secondary-container) r g b / 90%);
  --secondary-dark-a5: rgb(from var(--secondary-dark) r g b / 5%); --secondary-dark-a10: rgb(from var(--secondary-dark) r g b / 10%); --secondary-dark-a20: rgb(from var(--secondary-dark) r g b / 20%); --secondary-dark-a30: rgb(from var(--secondary-dark) r g b / 30%); --secondary-dark-a40: rgb(from var(--secondary-dark) r g b / 40%); --secondary-dark-a50: rgb(from var(--secondary-dark) r g b / 50%); --secondary-dark-a60: rgb(from var(--secondary-dark) r g b / 60%); --secondary-dark-a70: rgb(from var(--secondary-dark) r g b / 70%); --secondary-dark-a80: rgb(from var(--secondary-dark) r g b / 80%); --secondary-dark-a90: rgb(from var(--secondary-dark) r g b / 90%);
  --secondary-dark-token-a5: rgb(from var(--secondary-dark-token) r g b / 5%); --secondary-dark-token-a10: rgb(from var(--secondary-dark-token) r g b / 10%); --secondary-dark-token-a20: rgb(from var(--secondary-dark-token) r g b / 20%); --secondary-dark-token-a30: rgb(from var(--secondary-dark-token) r g b / 30%); --secondary-dark-token-a40: rgb(from var(--secondary-dark-token) r g b / 40%); --secondary-dark-token-a50: rgb(from var(--secondary-dark-token) r g b / 50%); --secondary-dark-token-a60: rgb(from var(--secondary-dark-token) r g b / 60%); --secondary-dark-token-a70: rgb(from var(--secondary-dark-token) r g b / 70%); --secondary-dark-token-a80: rgb(from var(--secondary-dark-token) r g b / 80%); --secondary-dark-token-a90: rgb(from var(--secondary-dark-token) r g b / 90%);
  --text-label-a5: rgb(from var(--text-label) r g b / 5%); --text-label-a10: rgb(from var(--text-label) r g b / 10%); --text-label-a20: rgb(from var(--text-label) r g b / 20%); --text-label-a30: rgb(from var(--text-label) r g b / 30%); --text-label-a40: rgb(from var(--text-label) r g b / 40%); --text-label-a50: rgb(from var(--text-label) r g b / 50%); --text-label-a60: rgb(from var(--text-label) r g b / 60%); --text-label-a70: rgb(from var(--text-label) r g b / 70%); --text-label-a80: rgb(from var(--text-label) r g b / 80%); --text-label-a90: rgb(from var(--text-label) r g b / 90%);
  --tertiary-a5: rgb(from var(--tertiary) r g b / 5%); --tertiary-a10: rgb(from var(--tertiary) r g b / 10%); --tertiary-a20: rgb(from var(--tertiary) r g b / 20%); --tertiary-a30: rgb(from var(--tertiary) r g b / 30%); --tertiary-a40: rgb(from var(--tertiary) r g b / 40%); --tertiary-a50: rgb(from var(--tertiary) r g b / 50%); --tertiary-a60: rgb(from var(--tertiary) r g b / 60%); --tertiary-a70: rgb(from var(--tertiary) r g b / 70%); --tertiary-a80: rgb(from var(--tertiary) r g b / 80%); --tertiary-a90: rgb(from var(--tertiary) r g b / 90%);
  --tertiary-container-a5: rgb(from var(--tertiary-container) r g b / 5%); --tertiary-container-a10: rgb(from var(--tertiary-container) r g b / 10%); --tertiary-container-a20: rgb(from var(--tertiary-container) r g b / 20%); --tertiary-container-a30: rgb(from var(--tertiary-container) r g b / 30%); --tertiary-container-a40: rgb(from var(--tertiary-container) r g b / 40%); --tertiary-container-a50: rgb(from var(--tertiary-container) r g b / 50%); --tertiary-container-a60: rgb(from var(--tertiary-container) r g b / 60%); --tertiary-container-a70: rgb(from var(--tertiary-container) r g b / 70%); --tertiary-container-a80: rgb(from var(--tertiary-container) r g b / 80%); --tertiary-container-a90: rgb(from var(--tertiary-container) r g b / 90%);
  --on-tertiary-container-a5: rgb(from var(--on-tertiary-container) r g b / 5%); --on-tertiary-container-a10: rgb(from var(--on-tertiary-container) r g b / 10%); --on-tertiary-container-a20: rgb(from var(--on-tertiary-container) r g b / 20%); --on-tertiary-container-a30: rgb(from var(--on-tertiary-container) r g b / 30%); --on-tertiary-container-a40: rgb(from var(--on-tertiary-container) r g b / 40%); --on-tertiary-container-a50: rgb(from var(--on-tertiary-container) r g b / 50%); --on-tertiary-container-a60: rgb(from var(--on-tertiary-container) r g b / 60%); --on-tertiary-container-a70: rgb(from var(--on-tertiary-container) r g b / 70%); --on-tertiary-container-a80: rgb(from var(--on-tertiary-container) r g b / 80%); --on-tertiary-container-a90: rgb(from var(--on-tertiary-container) r g b / 90%);
  --error-a5: rgb(from var(--error) r g b / 5%); --error-a10: rgb(from var(--error) r g b / 10%); --error-a20: rgb(from var(--error) r g b / 20%); --error-a30: rgb(from var(--error) r g b / 30%); --error-a40: rgb(from var(--error) r g b / 40%); --error-a50: rgb(from var(--error) r g b / 50%); --error-a60: rgb(from var(--error) r g b / 60%); --error-a70: rgb(from var(--error) r g b / 70%); --error-a80: rgb(from var(--error) r g b / 80%); --error-a90: rgb(from var(--error) r g b / 90%);
  --error-container-a5: rgb(from var(--error-container) r g b / 5%); --error-container-a10: rgb(from var(--error-container) r g b / 10%); --error-container-a20: rgb(from var(--error-container) r g b / 20%); --error-container-a30: rgb(from var(--error-container) r g b / 30%); --error-container-a40: rgb(from var(--error-container) r g b / 40%); --error-container-a50: rgb(from var(--error-container) r g b / 50%); --error-container-a60: rgb(from var(--error-container) r g b / 60%); --error-container-a70: rgb(from var(--error-container) r g b / 70%); --error-container-a80: rgb(from var(--error-container) r g b / 80%); --error-container-a90: rgb(from var(--error-container) r g b / 90%);
  --rustic-red-a5: rgb(from var(--rustic-red) r g b / 5%); --rustic-red-a10: rgb(from var(--rustic-red) r g b / 10%); --rustic-red-a20: rgb(from var(--rustic-red) r g b / 20%); --rustic-red-a30: rgb(from var(--rustic-red) r g b / 30%); --rustic-red-a40: rgb(from var(--rustic-red) r g b / 40%); --rustic-red-a50: rgb(from var(--rustic-red) r g b / 50%); --rustic-red-a60: rgb(from var(--rustic-red) r g b / 60%); --rustic-red-a70: rgb(from var(--rustic-red) r g b / 70%); --rustic-red-a80: rgb(from var(--rustic-red) r g b / 80%); --rustic-red-a90: rgb(from var(--rustic-red) r g b / 90%);
  --background-a5: rgb(from var(--background) r g b / 5%); --background-a10: rgb(from var(--background) r g b / 10%); --background-a20: rgb(from var(--background) r g b / 20%); --background-a30: rgb(from var(--background) r g b / 30%); --background-a40: rgb(from var(--background) r g b / 40%); --background-a50: rgb(from var(--background) r g b / 50%); --background-a60: rgb(from var(--background) r g b / 60%); --background-a70: rgb(from var(--background) r g b / 70%); --background-a80: rgb(from var(--background) r g b / 80%); --background-a90: rgb(from var(--background) r g b / 90%);
  --light-bg-a5: rgb(from var(--light-bg) r g b / 5%); --light-bg-a10: rgb(from var(--light-bg) r g b / 10%); --light-bg-a20: rgb(from var(--light-bg) r g b / 20%); --light-bg-a30: rgb(from var(--light-bg) r g b / 30%); --light-bg-a40: rgb(from var(--light-bg) r g b / 40%); --light-bg-a50: rgb(from var(--light-bg) r g b / 50%); --light-bg-a60: rgb(from var(--light-bg) r g b / 60%); --light-bg-a70: rgb(from var(--light-bg) r g b / 70%); --light-bg-a80: rgb(from var(--light-bg) r g b / 80%); --light-bg-a90: rgb(from var(--light-bg) r g b / 90%);
  --body-bg-a5: rgb(from var(--body-bg) r g b / 5%); --body-bg-a10: rgb(from var(--body-bg) r g b / 10%); --body-bg-a20: rgb(from var(--body-bg) r g b / 20%); --body-bg-a30: rgb(from var(--body-bg) r g b / 30%); --body-bg-a40: rgb(from var(--body-bg) r g b / 40%); --body-bg-a50: rgb(from var(--body-bg) r g b / 50%); --body-bg-a60: rgb(from var(--body-bg) r g b / 60%); --body-bg-a70: rgb(from var(--body-bg) r g b / 70%); --body-bg-a80: rgb(from var(--body-bg) r g b / 80%); --body-bg-a90: rgb(from var(--body-bg) r g b / 90%);
  --on-background-a5: rgb(from var(--on-background) r g b / 5%); --on-background-a10: rgb(from var(--on-background) r g b / 10%); --on-background-a20: rgb(from var(--on-background) r g b / 20%); --on-background-a30: rgb(from var(--on-background) r g b / 30%); --on-background-a40: rgb(from var(--on-background) r g b / 40%); --on-background-a50: rgb(from var(--on-background) r g b / 50%); --on-background-a60: rgb(from var(--on-background) r g b / 60%); --on-background-a70: rgb(from var(--on-background) r g b / 70%); --on-background-a80: rgb(from var(--on-background) r g b / 80%); --on-background-a90: rgb(from var(--on-background) r g b / 90%);
  --surface-a5: rgb(from var(--surface) r g b / 5%); --surface-a10: rgb(from var(--surface) r g b / 10%); --surface-a20: rgb(from var(--surface) r g b / 20%); --surface-a30: rgb(from var(--surface) r g b / 30%); --surface-a40: rgb(from var(--surface) r g b / 40%); --surface-a50: rgb(from var(--surface) r g b / 50%); --surface-a60: rgb(from var(--surface) r g b / 60%); --surface-a70: rgb(from var(--surface) r g b / 70%); --surface-a80: rgb(from var(--surface) r g b / 80%); --surface-a90: rgb(from var(--surface) r g b / 90%);
  --surface-variant-a5: rgb(from var(--surface-variant) r g b / 5%); --surface-variant-a10: rgb(from var(--surface-variant) r g b / 10%); --surface-variant-a20: rgb(from var(--surface-variant) r g b / 20%); --surface-variant-a30: rgb(from var(--surface-variant) r g b / 30%); --surface-variant-a40: rgb(from var(--surface-variant) r g b / 40%); --surface-variant-a50: rgb(from var(--surface-variant) r g b / 50%); --surface-variant-a60: rgb(from var(--surface-variant) r g b / 60%); --surface-variant-a70: rgb(from var(--surface-variant) r g b / 70%); --surface-variant-a80: rgb(from var(--surface-variant) r g b / 80%); --surface-variant-a90: rgb(from var(--surface-variant) r g b / 90%);
  --on-surface-variant-a5: rgb(from var(--on-surface-variant) r g b / 5%); --on-surface-variant-a10: rgb(from var(--on-surface-variant) r g b / 10%); --on-surface-variant-a20: rgb(from var(--on-surface-variant) r g b / 20%); --on-surface-variant-a30: rgb(from var(--on-surface-variant) r g b / 30%); --on-surface-variant-a40: rgb(from var(--on-surface-variant) r g b / 40%); --on-surface-variant-a50: rgb(from var(--on-surface-variant) r g b / 50%); --on-surface-variant-a60: rgb(from var(--on-surface-variant) r g b / 60%); --on-surface-variant-a70: rgb(from var(--on-surface-variant) r g b / 70%); --on-surface-variant-a80: rgb(from var(--on-surface-variant) r g b / 80%); --on-surface-variant-a90: rgb(from var(--on-surface-variant) r g b / 90%);
  --outline-a5: rgb(from var(--outline) r g b / 5%); --outline-a10: rgb(from var(--outline) r g b / 10%); --outline-a20: rgb(from var(--outline) r g b / 20%); --outline-a30: rgb(from var(--outline) r g b / 30%); --outline-a40: rgb(from var(--outline) r g b / 40%); --outline-a50: rgb(from var(--outline) r g b / 50%); --outline-a60: rgb(from var(--outline) r g b / 60%); --outline-a70: rgb(from var(--outline) r g b / 70%); --outline-a80: rgb(from var(--outline) r g b / 80%); --outline-a90: rgb(from var(--outline) r g b / 90%);
  --outline-variant-a5: rgb(from var(--outline-variant) r g b / 5%); --outline-variant-a10: rgb(from var(--outline-variant) r g b / 10%); --outline-variant-a20: rgb(from var(--outline-variant) r g b / 20%); --outline-variant-a30: rgb(from var(--outline-variant) r g b / 30%); --outline-variant-a40: rgb(from var(--outline-variant) r g b / 40%); --outline-variant-a50: rgb(from var(--outline-variant) r g b / 50%); --outline-variant-a60: rgb(from var(--outline-variant) r g b / 60%); --outline-variant-a70: rgb(from var(--outline-variant) r g b / 70%); --outline-variant-a80: rgb(from var(--outline-variant) r g b / 80%); --outline-variant-a90: rgb(from var(--outline-variant) r g b / 90%);
  --displaybg-primary-a5: rgb(from var(--displaybg-primary) r g b / 5%); --displaybg-primary-a10: rgb(from var(--displaybg-primary) r g b / 10%); --displaybg-primary-a20: rgb(from var(--displaybg-primary) r g b / 20%); --displaybg-primary-a30: rgb(from var(--displaybg-primary) r g b / 30%); --displaybg-primary-a40: rgb(from var(--displaybg-primary) r g b / 40%); --displaybg-primary-a50: rgb(from var(--displaybg-primary) r g b / 50%); --displaybg-primary-a60: rgb(from var(--displaybg-primary) r g b / 60%); --displaybg-primary-a70: rgb(from var(--displaybg-primary) r g b / 70%); --displaybg-primary-a80: rgb(from var(--displaybg-primary) r g b / 80%); --displaybg-primary-a90: rgb(from var(--displaybg-primary) r g b / 90%);
  --table-header-bg-a5: rgb(from var(--table-header-bg) r g b / 5%); --table-header-bg-a10: rgb(from var(--table-header-bg) r g b / 10%); --table-header-bg-a20: rgb(from var(--table-header-bg) r g b / 20%); --table-header-bg-a30: rgb(from var(--table-header-bg) r g b / 30%); --table-header-bg-a40: rgb(from var(--table-header-bg) r g b / 40%); --table-header-bg-a50: rgb(from var(--table-header-bg) r g b / 50%); --table-header-bg-a60: rgb(from var(--table-header-bg) r g b / 60%); --table-header-bg-a70: rgb(from var(--table-header-bg) r g b / 70%); --table-header-bg-a80: rgb(from var(--table-header-bg) r g b / 80%); --table-header-bg-a90: rgb(from var(--table-header-bg) r g b / 90%);
  --background-default-a5: rgb(from var(--background-default) r g b / 5%); --background-default-a10: rgb(from var(--background-default) r g b / 10%); --background-default-a20: rgb(from var(--background-default) r g b / 20%); --background-default-a30: rgb(from var(--background-default) r g b / 30%); --background-default-a40: rgb(from var(--background-default) r g b / 40%); --background-default-a50: rgb(from var(--background-default) r g b / 50%); --background-default-a60: rgb(from var(--background-default) r g b / 60%); --background-default-a70: rgb(from var(--background-default) r g b / 70%); --background-default-a80: rgb(from var(--background-default) r g b / 80%); --background-default-a90: rgb(from var(--background-default) r g b / 90%);
  --displaybg-secondary-a5: rgb(from var(--displaybg-secondary) r g b / 5%); --displaybg-secondary-a10: rgb(from var(--displaybg-secondary) r g b / 10%); --displaybg-secondary-a20: rgb(from var(--displaybg-secondary) r g b / 20%); --displaybg-secondary-a30: rgb(from var(--displaybg-secondary) r g b / 30%); --displaybg-secondary-a40: rgb(from var(--displaybg-secondary) r g b / 40%); --displaybg-secondary-a50: rgb(from var(--displaybg-secondary) r g b / 50%); --displaybg-secondary-a60: rgb(from var(--displaybg-secondary) r g b / 60%); --displaybg-secondary-a70: rgb(from var(--displaybg-secondary) r g b / 70%); --displaybg-secondary-a80: rgb(from var(--displaybg-secondary) r g b / 80%); --displaybg-secondary-a90: rgb(from var(--displaybg-secondary) r g b / 90%);
  --moderate-secondary-a5: rgb(from var(--moderate-secondary) r g b / 5%); --moderate-secondary-a10: rgb(from var(--moderate-secondary) r g b / 10%); --moderate-secondary-a20: rgb(from var(--moderate-secondary) r g b / 20%); --moderate-secondary-a30: rgb(from var(--moderate-secondary) r g b / 30%); --moderate-secondary-a40: rgb(from var(--moderate-secondary) r g b / 40%); --moderate-secondary-a50: rgb(from var(--moderate-secondary) r g b / 50%); --moderate-secondary-a60: rgb(from var(--moderate-secondary) r g b / 60%); --moderate-secondary-a70: rgb(from var(--moderate-secondary) r g b / 70%); --moderate-secondary-a80: rgb(from var(--moderate-secondary) r g b / 80%); --moderate-secondary-a90: rgb(from var(--moderate-secondary) r g b / 90%);
  --moderate-primary-a5: rgb(from var(--moderate-primary) r g b / 5%); --moderate-primary-a10: rgb(from var(--moderate-primary) r g b / 10%); --moderate-primary-a20: rgb(from var(--moderate-primary) r g b / 20%); --moderate-primary-a30: rgb(from var(--moderate-primary) r g b / 30%); --moderate-primary-a40: rgb(from var(--moderate-primary) r g b / 40%); --moderate-primary-a50: rgb(from var(--moderate-primary) r g b / 50%); --moderate-primary-a60: rgb(from var(--moderate-primary) r g b / 60%); --moderate-primary-a70: rgb(from var(--moderate-primary) r g b / 70%); --moderate-primary-a80: rgb(from var(--moderate-primary) r g b / 80%); --moderate-primary-a90: rgb(from var(--moderate-primary) r g b / 90%);
  --notes-a5: rgb(from var(--notes) r g b / 5%); --notes-a10: rgb(from var(--notes) r g b / 10%); --notes-a20: rgb(from var(--notes) r g b / 20%); --notes-a30: rgb(from var(--notes) r g b / 30%); --notes-a40: rgb(from var(--notes) r g b / 40%); --notes-a50: rgb(from var(--notes) r g b / 50%); --notes-a60: rgb(from var(--notes) r g b / 60%); --notes-a70: rgb(from var(--notes) r g b / 70%); --notes-a80: rgb(from var(--notes) r g b / 80%); --notes-a90: rgb(from var(--notes) r g b / 90%);
  --antz-notes-a5: rgb(from var(--antz-notes) r g b / 5%); --antz-notes-a10: rgb(from var(--antz-notes) r g b / 10%); --antz-notes-a20: rgb(from var(--antz-notes) r g b / 20%); --antz-notes-a30: rgb(from var(--antz-notes) r g b / 30%); --antz-notes-a40: rgb(from var(--antz-notes) r g b / 40%); --antz-notes-a50: rgb(from var(--antz-notes) r g b / 50%); --antz-notes-a60: rgb(from var(--antz-notes) r g b / 60%); --antz-notes-a70: rgb(from var(--antz-notes) r g b / 70%); --antz-notes-a80: rgb(from var(--antz-notes) r g b / 80%); --antz-notes-a90: rgb(from var(--antz-notes) r g b / 90%);
  --antz-notes-80-a5: rgb(from var(--antz-notes-80) r g b / 5%); --antz-notes-80-a10: rgb(from var(--antz-notes-80) r g b / 10%); --antz-notes-80-a20: rgb(from var(--antz-notes-80) r g b / 20%); --antz-notes-80-a30: rgb(from var(--antz-notes-80) r g b / 30%); --antz-notes-80-a40: rgb(from var(--antz-notes-80) r g b / 40%); --antz-notes-80-a50: rgb(from var(--antz-notes-80) r g b / 50%); --antz-notes-80-a60: rgb(from var(--antz-notes-80) r g b / 60%); --antz-notes-80-a70: rgb(from var(--antz-notes-80) r g b / 70%); --antz-notes-80-a80: rgb(from var(--antz-notes-80) r g b / 80%); --antz-notes-80-a90: rgb(from var(--antz-notes-80) r g b / 90%);
  --neutral-secondary-a5: rgb(from var(--neutral-secondary) r g b / 5%); --neutral-secondary-a10: rgb(from var(--neutral-secondary) r g b / 10%); --neutral-secondary-a20: rgb(from var(--neutral-secondary) r g b / 20%); --neutral-secondary-a30: rgb(from var(--neutral-secondary) r g b / 30%); --neutral-secondary-a40: rgb(from var(--neutral-secondary) r g b / 40%); --neutral-secondary-a50: rgb(from var(--neutral-secondary) r g b / 50%); --neutral-secondary-a60: rgb(from var(--neutral-secondary) r g b / 60%); --neutral-secondary-a70: rgb(from var(--neutral-secondary) r g b / 70%); --neutral-secondary-a80: rgb(from var(--neutral-secondary) r g b / 80%); --neutral-secondary-a90: rgb(from var(--neutral-secondary) r g b / 90%);
  --neutral-primary-a5: rgb(from var(--neutral-primary) r g b / 5%); --neutral-primary-a10: rgb(from var(--neutral-primary) r g b / 10%); --neutral-primary-a20: rgb(from var(--neutral-primary) r g b / 20%); --neutral-primary-a30: rgb(from var(--neutral-primary) r g b / 30%); --neutral-primary-a40: rgb(from var(--neutral-primary) r g b / 40%); --neutral-primary-a50: rgb(from var(--neutral-primary) r g b / 50%); --neutral-primary-a60: rgb(from var(--neutral-primary) r g b / 60%); --neutral-primary-a70: rgb(from var(--neutral-primary) r g b / 70%); --neutral-primary-a80: rgb(from var(--neutral-primary) r g b / 80%); --neutral-primary-a90: rgb(from var(--neutral-primary) r g b / 90%);
  --deep-dark-a5: rgb(from var(--deep-dark) r g b / 5%); --deep-dark-a10: rgb(from var(--deep-dark) r g b / 10%); --deep-dark-a20: rgb(from var(--deep-dark) r g b / 20%); --deep-dark-a30: rgb(from var(--deep-dark) r g b / 30%); --deep-dark-a40: rgb(from var(--deep-dark) r g b / 40%); --deep-dark-a50: rgb(from var(--deep-dark) r g b / 50%); --deep-dark-a60: rgb(from var(--deep-dark) r g b / 60%); --deep-dark-a70: rgb(from var(--deep-dark) r g b / 70%); --deep-dark-a80: rgb(from var(--deep-dark) r g b / 80%); --deep-dark-a90: rgb(from var(--deep-dark) r g b / 90%);
  --add-primary-a5: rgb(from var(--add-primary) r g b / 5%); --add-primary-a10: rgb(from var(--add-primary) r g b / 10%); --add-primary-a20: rgb(from var(--add-primary) r g b / 20%); --add-primary-a30: rgb(from var(--add-primary) r g b / 30%); --add-primary-a40: rgb(from var(--add-primary) r g b / 40%); --add-primary-a50: rgb(from var(--add-primary) r g b / 50%); --add-primary-a60: rgb(from var(--add-primary) r g b / 60%); --add-primary-a70: rgb(from var(--add-primary) r g b / 70%); --add-primary-a80: rgb(from var(--add-primary) r g b / 80%); --add-primary-a90: rgb(from var(--add-primary) r g b / 90%);

  /* ---- spacing scale: 2 then multiples of 4 (Swathi 2026-09-20). Use for padding, margin and gap. ---- */
  --sp-2: 2px;
  --sp-4: 4px;
  --sp-8: 8px;
  --sp-12: 12px;
  --sp-16: 16px;
  --sp-20: 20px;
  --sp-24: 24px;
  --sp-28: 28px;
  --sp-32: 32px;
  --sp-40: 40px;
  --sp-48: 48px;
  --sp-56: 56px;
  --sp-64: 64px;
}