md3-colors.css

/* 
Author: Kianoush
Github: @thisiskianoush

This file contains all colors introduced by Material Design v3
*/

:root {
  --md3-color-white: #ffffff;
  --md3-color-black: #000000;
  
  /* Light Mode Colors */
  --md3-color-sys-light-primary: #6750A4;
  --md3-color-sys-light-on-primary:#FFFFFF;
  --md3-color-sys-light-primary-container: #EADDFF;
  --md3-color-sys-light-on-primary-container: #21005D;
  --md3-color-sys-light-secondary: #625B71;
  --md3-color-sys-light-on-secondary: #FFFFFF;
  --md3-color-sys-light-secondary-container: #E8DEF8;
  --md3-color-sys-light-on-secondary-container: #1D192B;
  --md3-color-sys-light-tertiary: #7D5260;
  --md3-color-sys-light-on-tertiary: #ffffff;
  --md3-color-sys-light-tertiary-container: #FFD8E4;
  --md3-color-sys-light-on-tertiary-container: #31111D;
  --md3-color-sys-light-error: #B3261E;
  --md3-color-sys-light-error-container: #F9DEDC;
  --md3-color-sys-light-on-error: #ffffff;
  --md3-color-sys-light-on-error-container: #410E0B;
  --md3-color-sys-light-background: #FFFBFE;
  --md3-color-sys-light-on-background: #1C1B1F;
  --md3-color-sys-light-surface: #FFFBFE;
  --md3-color-sys-light-on-surface: #1C1B1F;
  --md3-color-sys-light-surface-variant: #E7E0EC;
  --md3-color-sys-light-on-surface-variant: #49454F;
  --md3-color-sys-light-outline: #79747E;
  --md3-color-sys-light-inverse-on-surface: #F4EFF4;
  --md3-color-sys-light-inverse-surface: #313033;
  --md3-color-sys-light-surface-tint: #6750A4;
  --md3-color-sys-light-surface-tint-color: #6750A4;
  --md3-color-sys-light-shadow: #000000;
  --md3-color-sys-light-inverse-primary: #D0BCFF;
  
  /* Dark Mode Colors */
  --md3-color-sys-dark-primary: #D0BCFF;
  --md3-color-sys-dark-on-primary:#381E72;
  --md3-color-sys-dark-primary-container: #4F378B;
  --md3-color-sys-dark-on-primary-container: #EADDFF;
  --md3-color-sys-dark-secondary: #CCC2DC;
  --md3-color-sys-dark-on-secondary: #332D41;
  --md3-color-sys-dark-secondary-container: #4A4458;
  --md3-color-sys-dark-on-secondary-container: #E8DEF8;
  --md3-color-sys-dark-tertiary: #EFB8C8;
  --md3-color-sys-dark-on-tertiary: #492532;
  --md3-color-sys-dark-tertiary-container: #633B48;
  --md3-color-sys-dark-on-tertiary-container: #FFD8E4;
  --md3-color-sys-dark-error: #F2B8B5;
  --md3-color-sys-dark-error-container: #8C1D18;
  --md3-color-sys-dark-on-error: #601410;
  --md3-color-sys-dark-on-error-container: #F2B8B5;
  --md3-color-sys-dark-background: #1C1B1F;
  --md3-color-sys-dark-on-background: #E6E1E5;
  --md3-color-sys-dark-surface: #1C1B1F;
  --md3-color-sys-dark-on-surface: #E6E1E5;
  --md3-color-sys-dark-surface-variant: #49454F;
  --md3-color-sys-dark-on-surface-variant: #CAC4D0;
  --md3-color-sys-dark-outline: #938F99;
  --md3-color-sys-dark-inverse-on-surface: #313033;
  --md3-color-sys-dark-inverse-surface: #E6E1E5;
  --md3-color-sys-dark-surface-tint: #D0BCFF;
  --md3-color-sys-dark-surface-tint-color: #D0BCFF;
  --md3-color-sys-dark-shadow: #000000;
  --md3-color-sys-dark-inverse-primary: #6750A4;
  
  /* Ref Colors */
  
  /* Primary Ref Colors */
  --md3-color-ref-primary-100: #ffffff;
  --md3-color-ref-primary-99: #FFFBFE;
  --md3-color-ref-primary-95: #F6EDFF;
  --md3-color-ref-primary-90: #EADDFF;
  --md3-color-ref-primary-80: #D0BCFF;
  --md3-color-ref-primary-70: #B69DF8;
  --md3-color-ref-primary-60: #9A82DB;
  --md3-color-ref-primary-50: #7F67BE;
  --md3-color-ref-primary-40: #6750A4;
  --md3-color-ref-primary-30: #4F378B;
  --md3-color-ref-primary-20: #381E72;
  --md3-color-ref-primary-10: #21005D;
  --md3-color-ref-primary-0: #000000;
  
  /* Secondary Ref Colors */
  --md3-color-ref-secondary-100: #FFFFFF;
  --md3-color-ref-secondary-99: #FFFBFE;
  --md3-color-ref-secondary-95: #F6EDFF;
  --md3-color-ref-secondary-90: #E8DEF8;
  --md3-color-ref-secondary-80: #CCC2DC;
  --md3-color-ref-secondary-70: #B0A7C0;
  --md3-color-ref-secondary-60: #958DA5;
  --md3-color-ref-secondary-50: #7A7289;
  --md3-color-ref-secondary-40: #625B71;
  --md3-color-ref-secondary-30: #4A4458;
  --md3-color-ref-secondary-20: #332D41;
  --md3-color-ref-secondary-10: #1D192B;
  --md3-color-ref-secondary-0: #000000;
  
  /* Tertiary Ref Colors */
  --md3-color-ref-tertiary-100: #FFFFFF;
  --md3-color-ref-tertiary-99: #FFFBFA;
  --md3-color-ref-tertiary-95: #FFECF1;
  --md3-color-ref-tertiary-90: #FFD8E4;
  --md3-color-ref-tertiary-80: #EFB8C8;
  --md3-color-ref-tertiary-70: #D29DAC;
  --md3-color-ref-tertiary-60: #B58392;
  --md3-color-ref-tertiary-50: #986977;
  --md3-color-ref-tertiary-40: #7D5260;
  --md3-color-ref-tertiary-30: #633B48;
  --md3-color-ref-tertiary-20: #492532;
  --md3-color-ref-tertiary-10: #31111D;
  --md3-color-ref-tertiary-0: #000000;
  
  /* Neutral Ref Colors */
  --md3-color-ref-neutral-100: #FFFFFF;
  --md3-color-ref-neutral-99: #FFFBFE;
  --md3-color-ref-neutral-95: #F4EFF4;
  --md3-color-ref-neutral-90: #E6E1E5;
  --md3-color-ref-neutral-80: #C9C5CA;
  --md3-color-ref-neutral-70: #AEAAAE;
  --md3-color-ref-neutral-60: #939094;
  --md3-color-ref-neutral-50: #787579;
  --md3-color-ref-neutral-40: #605D62;
  --md3-color-ref-neutral-30: #484649;
  --md3-color-ref-neutral-20: #313033;
  --md3-color-ref-neutral-10: #1C1B1F;
  --md3-color-ref-neutral-0: #000000;
  
  /* Neutral-Variant Ref Colors */
  --md3-color-ref-neutral-variant-100: #FFFFFF;
  --md3-color-ref-neutral-variant-99: #FFFBFE;
  --md3-color-ref-neutral-variant-95: #F5EEFA;
  --md3-color-ref-neutral-variant-90: #E7E0EC;
  --md3-color-ref-neutral-variant-80: #CAC4D0;
  --md3-color-ref-neutral-variant-70: #AEA9B4;
  --md3-color-ref-neutral-variant-60: #938F99;
  --md3-color-ref-neutral-variant-50: #79747E;
  --md3-color-ref-neutral-variant-40: #605D66;
  --md3-color-ref-neutral-variant-30: #49454F;
  --md3-color-ref-neutral-variant-20: #322F37;
  --md3-color-ref-neutral-variant-10: #1D1A22;
  --md3-color-ref-neutral-variant-0: #000000;
  
  /* Error Ref Colors */
  --md3-color-ref-error-100: #FFFFFF;
  --md3-color-ref-error-99: #FFFBF9;
  --md3-color-ref-error-95: #FCEEEE;
  --md3-color-ref-error-90: #F9DEDC;
  --md3-color-ref-error-80: #F2B8B5;
  --md3-color-ref-error-70: #EC928E;
  --md3-color-ref-error-60: #E46962;
  --md3-color-ref-error-50: #DC362E;
  --md3-color-ref-error-40: #B3261E;
  --md3-color-ref-error-30: #8C1D18;
  --md3-color-ref-error-20: #601410;
  --md3-color-ref-error-10: #410E0B;
  --md3-color-ref-error-0: #000000;
  
  /* Source Colors */
  --md3-color-source-seed: #6750A4;
  --md3-color-source-primary: #6750A4;
  --md3-color-source-secondary: #625B71;
  --md3-color-source-tertiary: #7D5260;
  --md3-color-source-neutral: #605D62;
  --md3-color-source-neutral-variant: #605D66;
  --md3-color-source-error: #B3261E;
  
  /* Surface Light Colors */
  --md3-color-surface-light-1: linear-gradient(0deg, rgba(103, 80, 164, 0.05), rgba(103, 80, 164, 0.05)), #FFFBFE;
  --md3-color-surface-light-2: linear-gradient(0deg, rgba(103, 80, 164, 0.08), rgba(103, 80, 164, 0.08)), #FFFBFE;
  --md3-color-surface-light-3: linear-gradient(0deg, rgba(103, 80, 164, 0.11), rgba(103, 80, 164, 0.11)), #FFFBFE;
  --md3-color-surface-light-4: linear-gradient(0deg, rgba(103, 80, 164, 0.12), rgba(103, 80, 164, 0.12)), #FFFBFE;
  --md3-color-surface-light-5: linear-gradient(0deg, rgba(103, 80, 164, 0.14), rgba(103, 80, 164, 0.14)), #FFFBFE;
  
  /* Surface Dark Colors */
  --md3-color-surface-dark-1: #1C1B1F;
  --md3-color-surface-dark-2: linear-gradient(0deg, rgba(208, 188, 255, 0.08), rgba(208, 188, 255, 0.08)), #1C1B1F;
  --md3-color-surface-dark-3: linear-gradient(0deg, rgba(208, 188, 255, 0.11), rgba(208, 188, 255, 0.11)), #1C1B1F;
  --md3-color-surface-dark-4: linear-gradient(0deg, rgba(208, 188, 255, 0.12), rgba(208, 188, 255, 0.12)), #1C1B1F;
  --md3-color-surface-dark-5: linear-gradient(0deg, rgba(208, 188, 255, 0.14), rgba(208, 188, 255, 0.14)), #1C1B1F;
  
  /* Key Colors Colors */
  --md3-color-key-color-primary: #6750A4;
  --md3-color-key-color-secondary: #625B71;
  --md3-color-key-color-tertiary: #7D5260;
  --md3-color-key-color-error: #B3261E;
  --md3-color-key-color-neutral: #605D62;
  --md3-color-key-color-neutral-variant: #605D66;
  
  /* State Layers Light Colors */
  --md3-color-state-layer-light-surface-tint-hover: rgba(103, 80, 164, 0.08);
  --md3-color-state-layer-light-surface-tint-focus: rgba(103, 80, 164, 0.12);
  --md3-color-state-layer-light-surface-tint-press: rgba(103, 80, 164, 0.12);
  --md3-color-state-layer-light-surface-tint-drag: rgba(103, 80, 164, 0.16);
  
  --md3-color-state-layer-light-on-error-container-hover: rgba(65, 14, 11, 0.08);
  --md3-color-state-layer-light-on-error-container-focus: rgba(65, 14, 11, 0.12);
  --md3-color-state-layer-light-on-error-container-press: rgba(65, 14, 11, 0.12);
  --md3-color-state-layer-light-on-error-container-drag: rgba(65, 14, 11, 0.16);
  
  --md3-color-state-layer-light-on-error-hover-hover: rgba(255, 255, 255, 0.08);
  --md3-color-state-layer-light-on-error-hover-focus: rgba(255, 255, 255, 0.12);
  --md3-color-state-layer-light-on-error-hover-press: rgba(255, 255, 255, 0.12);
  --md3-color-state-layer-light-on-error-hover-drag: rgba(255, 255, 255, 0.16);
  
  --md3-color-state-layer-light-error-container-hover: rgba(249, 222, 220, 0.08);
  --md3-color-state-layer-light-error-container-focus: rgba(249, 222, 220, 0.12);
  --md3-color-state-layer-light-error-container-press: rgba(249, 222, 220, 0.12);
  --md3-color-state-layer-light-error-container-drag: rgba(249, 222, 220, 0.16);
  
  --md3-color-state-layer-light-on-tertiary-container-hover: rgba(49, 17, 29, 0.08);
  --md3-color-state-layer-light-on-tertiary-container-focus: rgba(49, 17, 29, 0.12);
  --md3-color-state-layer-light-on-tertiary-container-press: rgba(49, 17, 29, 0.12);
  --md3-color-state-layer-light-on-tertiary-container-drag: rgba(49, 17, 29, 0.16);
  
  --md3-color-state-layer-light-on-tertiary-hover: rgba(255, 255, 255, 0.08);
  --md3-color-state-layer-light-on-tertiary-focus: rgba(255, 255, 255, 0.12);
  --md3-color-state-layer-light-on-tertiary-press: rgba(255, 255, 255, 0.12);
  --md3-color-state-layer-light-on-tertiary-drag: rgba(255, 255, 255, 0.16);
  
  --md3-color-state-layer-light-tertiary-container-hover: rgba(255, 216, 228, 0.08);
  --md3-color-state-layer-light-tertiary-container-focus: rgba(255, 216, 228, 0.12);
  --md3-color-state-layer-light-tertiary-container-press: rgba(255, 216, 228, 0.12);
  --md3-color-state-layer-light-tertiary-container-drag: rgba(255, 216, 228, 0.16);
  
  --md3-color-state-layer-light-tertiary-hover-hover: rgba(125, 82, 96, 0.08);
  --md3-color-state-layer-light-tertiary-hover-focus: rgba(125, 82, 96, 0.12);
  --md3-color-state-layer-light-tertiary-hover-press: rgba(125, 82, 96, 0.12);
  --md3-color-state-layer-light-tertiary-hover-drag: rgba(125, 82, 96, 0.16);
  
  --md3-color-state-layer-light-shadow-hover: rgba(0, 0, 0, 0.08);
  --md3-color-state-layer-light-shadow-focus: rgba(0, 0, 0, 0.08);
  --md3-color-state-layer-light-shadow-press: rgba(0, 0, 0, 0.08);
  --md3-color-state-layer-light-shadow-drag: rgba(0, 0, 0, 0.08);
  
  --md3-color-state-layer-light-error-hover: rgba(179, 38, 30, 0.08);
  --md3-color-state-layer-light-error-focus: rgba(179, 38, 30, 0.12);
  --md3-color-state-layer-light-error-press: rgba(179, 38, 30, 0.12);
  --md3-color-state-layer-light-error-drag: rgba(179, 38, 30, 0.16);
  
  --md3-color-state-layer-light-outline-hover: rgba(121, 116, 126, 0.08);
  --md3-color-state-layer-light-outline-focus: rgba(121, 116, 126, 0.12);
  --md3-color-state-layer-light-outline-press: rgba(121, 116, 126, 0.12);
  --md3-color-state-layer-light-outline-drag: rgba(121, 116, 126, 0.16);
  
  --md3-color-state-layer-light-on-background-hover: rgba(28, 27, 31, 0.08);
  --md3-color-state-layer-light-on-background-focus: rgba(28, 27, 31, 0.12);
  --md3-color-state-layer-light-on-background-press: rgba(28, 27, 31, 0.12);
  --md3-color-state-layer-light-on-background-drag: rgba(28, 27, 31, 0.16);
  
  --md3-color-state-layer-light-background-hover: rgba(255, 251, 254, 0.08);
  --md3-color-state-layer-light-background-focus: rgba(255, 251, 254, 0.12);
  --md3-color-state-layer-light-background-press: rgba(255, 251, 254, 0.12);
  --md3-color-state-layer-light-background-drag: rgba(255, 251, 254, 0.16);
  
  --md3-color-state-layer-light-inverse-on-surface-hover: rgba(244, 239, 244, 0.08);
  --md3-color-state-layer-light-inverse-on-surface-focus: rgba(244, 239, 244, 0.12);
  --md3-color-state-layer-light-inverse-on-surface-press: rgba(244, 239, 244, 0.12);
  --md3-color-state-layer-light-inverse-on-surface-drag: rgba(244, 239, 244, 0.16);
  
  --md3-color-state-layer-light-inverse-surface-hover: rgba(49, 48, 51, 0.08);
  --md3-color-state-layer-light-inverse-surface-focus: rgba(49, 48, 51, 0.12);
  --md3-color-state-layer-light-inverse-surface-press: rgba(49, 48, 51, 0.12);
  --md3-color-state-layer-light-inverse-surface-drag: rgba(49, 48, 51, 0.16);
  
  --md3-color-state-layer-light-on-surface-variant-hover: rgba(73, 69, 79, 0.08);
  --md3-color-state-layer-light-on-surface-variant-focus: rgba(73, 69, 79, 0.12);
  --md3-color-state-layer-light-on-surface-variant-press: rgba(73, 69, 79, 0.12);
  --md3-color-state-layer-light-on-surface-variant-drag: rgba(73, 69, 79, 0.16);
  
  --md3-color-state-layer-light-on-surface-hover: rgba(28, 27, 31, 0.08);
  --md3-color-state-layer-light-on-surface-focus: rgba(28, 27, 31, 0.12);
  --md3-color-state-layer-light-on-surface-press: rgba(28, 27, 31, 0.12);
  --md3-color-state-layer-light-on-surface-drag: rgba(28, 27, 31, 0.16);
  
  --md3-color-state-layer-light-surface-variant-hover: rgba(231, 224, 236, 0.08);
  --md3-color-state-layer-light-surface-variant-focus: rgba(231, 224, 236, 0.12);
  --md3-color-state-layer-light-surface-variant-press: rgba(231, 224, 236, 0.12);
  --md3-color-state-layer-light-surface-variant-drag: rgba(231, 224, 236, 0.16);
  
  --md3-color-state-layer-light-surface-hover: rgba(255, 251, 254, 0.08);
  --md3-color-state-layer-light-surface-focus: rgba(255, 251, 254, 0.12);
  --md3-color-state-layer-light-surface-press: rgba(255, 251, 254, 0.12);
  --md3-color-state-layer-light-surface-drag: rgba(255, 251, 254, 0.16);
  
  --md3-color-state-layer-light-on-secondary-container-hover: rgba(29, 25, 43, 0.08);
  --md3-color-state-layer-light-on-secondary-container-focus: rgba(29, 25, 43, 0.12);
  --md3-color-state-layer-light-on-secondary-container-press: rgba(29, 25, 43, 0.12);
  --md3-color-state-layer-light-on-secondary-container-drag: rgba(29, 25, 43, 0.16);
  
  --md3-color-state-layer-light-on-secondary-hover: rgba(255, 255, 255, 0.08);
  --md3-color-state-layer-light-on-secondary-focus: rgba(255, 255, 255, 0.12);
  --md3-color-state-layer-light-on-secondary-press: rgba(255, 255, 255, 0.12);
  --md3-color-state-layer-light-on-secondary-drag: rgba(255, 255, 255, 0.16);
  
  --md3-color-state-layer-light-secondary-container-hover: rgba(232, 222, 248, 0.08);
  --md3-color-state-layer-light-secondary-container-focus: rgba(232, 222, 248, 0.08);
  --md3-color-state-layer-light-secondary-container-press: rgba(232, 222, 248, 0.08);
  --md3-color-state-layer-light-secondary-container-drag: rgba(232, 222, 248, 0.08);
  
  --md3-color-state-layer-light-secondary-hover: rgba(98, 91, 113, 0.08);
  --md3-color-state-layer-light-secondary-focus: rgba(98, 91, 113, 0.12);
  --md3-color-state-layer-light-secondary-press: rgba(98, 91, 113, 0.12);
  --md3-color-state-layer-light-secondary-drag: rgba(98, 91, 113, 0.16);
  
  --md3-color-state-layer-light-inverse-primary-hover: rgba(208, 188, 255, 0.08);
  --md3-color-state-layer-light-inverse-primary-focus: rgba(208, 188, 255, 0.12);
  --md3-color-state-layer-light-inverse-primary-press: rgba(208, 188, 255, 0.12);
  --md3-color-state-layer-light-inverse-primary-drag: rgba(208, 188, 255, 0.16);
  
  --md3-color-state-layer-light-on-primary-container-hover: rgba(33, 0, 93, 0.08);
  --md3-color-state-layer-light-on-primary-container-focus: rgba(33, 0, 93, 0.12);
  --md3-color-state-layer-light-on-primary-container-press: rgba(33, 0, 93, 0.12);
  --md3-color-state-layer-light-on-primary-container-drag: rgba(33, 0, 93, 0.16);
  
  --md3-color-state-layer-light-on-primary-hover: rgba(255, 255, 255, 0.08);
  --md3-color-state-layer-light-on-primary-focus: rgba(255, 255, 255, 0.12);
  --md3-color-state-layer-light-on-primary-press: rgba(255, 255, 255, 0.12);
  --md3-color-state-layer-light-on-primary-drag: rgba(255, 255, 255, 0.16);
  
  --md3-color-state-layer-light-primary-container-hover: rgba(234, 221, 255, 0.08);
  --md3-color-state-layer-light-primary-container-focus: rgba(234, 221, 255, 0.12);
  --md3-color-state-layer-light-primary-container-press: rgba(234, 221, 255, 0.12);
  --md3-color-state-layer-light-primary-container-drag: rgba(234, 221, 255, 0.16);
  
  --md3-color-state-layer-light-primary-hover: rgba(103, 80, 164, 0.08);
  --md3-color-state-layer-light-primary-focus: rgba(103, 80, 164, 0.12);
  --md3-color-state-layer-light-primary-press: rgba(103, 80, 164, 0.12);
  --md3-color-state-layer-light-primary-drag: rgba(103, 80, 164, 0.16);
  
  /* State Layers Dark Colors */
  --md3-color-state-layer-dark-surface-tint-hover: rgba(208, 188, 255, 0.08);
  --md3-color-state-layer-dark-surface-tint-focus: rgba(208, 188, 255, 0.12);
  --md3-color-state-layer-dark-surface-tint-press: rgba(208, 188, 255, 0.12);
  --md3-color-state-layer-dark-surface-tint-drag: rgba(208, 188, 255, 0.16);
  
  --md3-color-state-layer-dark-on-error-container-hover: rgba(242, 184, 181, 0.08);
  --md3-color-state-layer-dark-on-error-container-focus: rgba(242, 184, 181, 0.12);
  --md3-color-state-layer-dark-on-error-container-press: rgba(242, 184, 181, 0.12);
  --md3-color-state-layer-dark-on-error-container-drag: rgba(242, 184, 181, 0.16);
  
  --md3-color-state-layer-dark-on-error-hover-hover: rgba(96, 20, 16, 0.08);
  --md3-color-state-layer-dark-on-error-hover-focus: rgba(96, 20, 16, 0.12);
  --md3-color-state-layer-dark-on-error-hover-press: rgba(96, 20, 16, 0.12);
  --md3-color-state-layer-dark-on-error-hover-drag: rgba(96, 20, 16, 0.16);
  
  --md3-color-state-layer-dark-error-container-hover: rgba(140, 29, 24, 0.08);
  --md3-color-state-layer-dark-error-container-focus: rgba(140, 29, 24, 0.12);
  --md3-color-state-layer-dark-error-container-press: rgba(140, 29, 24, 0.12);
  --md3-color-state-layer-dark-error-container-drag: rgba(140, 29, 24, 0.16);
  
  --md3-color-state-layer-dark-on-tertiary-container-hover: rgba(255, 216, 228, 0.08);
  --md3-color-state-layer-dark-on-tertiary-container-focus: rgba(255, 216, 228, 0.12);
  --md3-color-state-layer-dark-on-tertiary-container-press: rgba(255, 216, 228, 0.12);
  --md3-color-state-layer-dark-on-tertiary-container-drag: rgba(255, 216, 228, 0.16);
  
  --md3-color-state-layer-dark-on-tertiary-hover: rgba(73, 37, 50, 0.08);
  --md3-color-state-layer-dark-on-tertiary-focus: rgba(73, 37, 50, 0.12);
  --md3-color-state-layer-dark-on-tertiary-press: rgba(73, 37, 50, 0.12);
  --md3-color-state-layer-dark-on-tertiary-drag: rgba(73, 37, 50, 0.16);
  
  --md3-color-state-layer-dark-tertiary-container-hover: rgba(99, 59, 72, 0.08);
  --md3-color-state-layer-dark-tertiary-container-focus: rgba(99, 59, 72, 0.12);
  --md3-color-state-layer-dark-tertiary-container-press: rgba(99, 59, 72, 0.12);
  --md3-color-state-layer-dark-tertiary-container-drag: rgba(99, 59, 72, 0.16);
  
  --md3-color-state-layer-dark-tertiary-hover-hover: rgba(239, 184, 200, 0.08);
  --md3-color-state-layer-dark-tertiary-hover-focus: rgba(239, 184, 200, 0.12);
  --md3-color-state-layer-dark-tertiary-hover-press: rgba(239, 184, 200, 0.12);
  --md3-color-state-layer-dark-tertiary-hover-drag: rgba(239, 184, 200, 0.16);
  
  --md3-color-state-layer-dark-shadow-hover: rgba(0, 0, 0, 0.08);
  --md3-color-state-layer-dark-shadow-focus: rgba(0, 0, 0, 0.08);
  --md3-color-state-layer-dark-shadow-press: rgba(0, 0, 0, 0.08);
  --md3-color-state-layer-dark-shadow-drag: rgba(0, 0, 0, 0.08);
  
  --md3-color-state-layer-dark-error-hover: rgba(242, 184, 181, 0.08);
  --md3-color-state-layer-dark-error-focus: rgba(242, 184, 181, 0.12);
  --md3-color-state-layer-dark-error-press: rgba(242, 184, 181, 0.12);
  --md3-color-state-layer-dark-error-drag: rgba(242, 184, 181, 0.16);
  
  --md3-color-state-layer-dark-outline-hover: rgba(147, 143, 153, 0.08);
  --md3-color-state-layer-dark-outline-focus: rgba(147, 143, 153, 0.12);
  --md3-color-state-layer-dark-outline-press: rgba(147, 143, 153, 0.12);
  --md3-color-state-layer-dark-outline-drag: rgba(147, 143, 153, 0.16);
  
  --md3-color-state-layer-dark-on-background-hover: rgba(230, 225, 229, 0.08);
  --md3-color-state-layer-dark-on-background-focus: rgba(230, 225, 229, 0.12);
  --md3-color-state-layer-dark-on-background-press: rgba(230, 225, 229, 0.12);
  --md3-color-state-layer-dark-on-background-drag: rgba(230, 225, 229, 0.16);
  
  --md3-color-state-layer-dark-background-hover: rgba(28, 27, 31, 0.08);
  --md3-color-state-layer-dark-background-focus: rgba(28, 27, 31, 0.12);
  --md3-color-state-layer-dark-background-press: rgba(28, 27, 31, 0.12);
  --md3-color-state-layer-dark-background-drag: rgba(28, 27, 31, 0.16);
  
  --md3-color-state-layer-dark-inverse-on-surface-hover: rgba(49, 48, 51, 0.08);
  --md3-color-state-layer-dark-inverse-on-surface-focus: rgba(49, 48, 51, 0.12);
  --md3-color-state-layer-dark-inverse-on-surface-press: rgba(49, 48, 51, 0.12);
  --md3-color-state-layer-dark-inverse-on-surface-drag: rgba(49, 48, 51, 0.16);
  
  --md3-color-state-layer-dark-inverse-surface-hover: rgba(230, 225, 229, 0.08);
  --md3-color-state-layer-dark-inverse-surface-focus: rgba(230, 225, 229, 0.12);
  --md3-color-state-layer-dark-inverse-surface-press: rgba(230, 225, 229, 0.12);
  --md3-color-state-layer-dark-inverse-surface-drag: rgba(230, 225, 229, 0.16);
  
  --md3-color-state-layer-dark-on-surface-variant-hover: rgba(202, 196, 208, 0.08);
  --md3-color-state-layer-dark-on-surface-variant-focus: rgba(202, 196, 208, 0.12);
  --md3-color-state-layer-dark-on-surface-variant-press: rgba(202, 196, 208, 0.12);
  --md3-color-state-layer-dark-on-surface-variant-drag: rgba(202, 196, 208, 0.16);
  
  --md3-color-state-layer-dark-on-surface-hover: rgba(230, 225, 229, 0.08);
  --md3-color-state-layer-dark-on-surface-focus: rgba(230, 225, 229, 0.12);
  --md3-color-state-layer-dark-on-surface-press: rgba(230, 225, 229, 0.12);
  --md3-color-state-layer-dark-on-surface-drag: rgba(230, 225, 229, 0.16);
  
  --md3-color-state-layer-dark-surface-variant-hover: rgba(73, 69, 79, 0.08);
  --md3-color-state-layer-dark-surface-variant-focus: rgba(73, 69, 79, 0.12);
  --md3-color-state-layer-dark-surface-variant-press: rgba(73, 69, 79, 0.12);
  --md3-color-state-layer-dark-surface-variant-drag: rgba(73, 69, 79, 0.16);
  
  --md3-color-state-layer-dark-surface-hover: rgba(28, 27, 31, 0.08);
  --md3-color-state-layer-dark-surface-focus: rgba(28, 27, 31, 0.12);
  --md3-color-state-layer-dark-surface-press: rgba(28, 27, 31, 0.12);
  --md3-color-state-layer-dark-surface-drag: rgba(28, 27, 31, 0.16);
  
  --md3-color-state-layer-dark-on-secondary-container-hover: rgba(232, 222, 248, 0.08);
  --md3-color-state-layer-dark-on-secondary-container-focus: rgba(232, 222, 248, 0.12);
  --md3-color-state-layer-dark-on-secondary-container-press: rgba(232, 222, 248, 0.12);
  --md3-color-state-layer-dark-on-secondary-container-drag: rgba(232, 222, 248, 0.16);
  
  --md3-color-state-layer-dark-on-secondary-hover: rgba(51, 45, 65, 0.08);
  --md3-color-state-layer-dark-on-secondary-focus: rgba(51, 45, 65, 0.12);
  --md3-color-state-layer-dark-on-secondary-press: rgba(51, 45, 65, 0.12);
  --md3-color-state-layer-dark-on-secondary-drag: rgba(51, 45, 65, 0.16);
  
  --md3-color-state-layer-dark-secondary-container-hover: rgba(74, 68, 88, 0.08);
  --md3-color-state-layer-dark-secondary-container-focus: rgba(74, 68, 88, 0.08);
  --md3-color-state-layer-dark-secondary-container-press: rgba(74, 68, 88, 0.08);
  --md3-color-state-layer-dark-secondary-container-drag: rgba(74, 68, 88, 0.08);
  
  --md3-color-state-layer-dark-secondary-hover: rgba(204, 194, 220, 0.08);
  --md3-color-state-layer-dark-secondary-focus: rgba(204, 194, 220, 0.12);
  --md3-color-state-layer-dark-secondary-press: rgba(204, 194, 220, 0.12);
  --md3-color-state-layer-dark-secondary-drag: rgba(204, 194, 220, 0.16);
  
  --md3-color-state-layer-dark-inverse-primary-hover: rgba(103, 80, 164, 0.08);
  --md3-color-state-layer-dark-inverse-primary-focus: rgba(103, 80, 164, 0.12);
  --md3-color-state-layer-dark-inverse-primary-press: rgba(103, 80, 164, 0.12);
  --md3-color-state-layer-dark-inverse-primary-drag: rgba(103, 80, 164, 0.16);
  
  --md3-color-state-layer-dark-on-primary-container-hover: rgba(234, 221, 255, 0.08);
  --md3-color-state-layer-dark-on-primary-container-focus: rgba(234, 221, 255, 0.12);
  --md3-color-state-layer-dark-on-primary-container-press: rgba(234, 221, 255, 0.12);
  --md3-color-state-layer-dark-on-primary-container-drag: rgba(234, 221, 255, 0.16);
  
  --md3-color-state-layer-dark-on-primary-hover: rgba(56, 30, 114, 0.08);
  --md3-color-state-layer-dark-on-primary-focus: rgba(56, 30, 114, 0.12);
  --md3-color-state-layer-dark-on-primary-press: rgba(56, 30, 114, 0.12);
  --md3-color-state-layer-dark-on-primary-drag: rgba(56, 30, 114, 0.16);
  
  --md3-color-state-layer-dark-primary-container-hover: rgba(79, 55, 139, 0.08);
  --md3-color-state-layer-dark-primary-container-focus: rgba(79, 55, 139, 0.12);
  --md3-color-state-layer-dark-primary-container-press: rgba(79, 55, 139, 0.12);
  --md3-color-state-layer-dark-primary-container-drag: rgba(79, 55, 139, 0.16);
  
  --md3-color-state-layer-dark-primary-hover: rgba(208, 188, 255, 0.08);
  --md3-color-state-layer-dark-primary-focus: rgba(208, 188, 255, 0.12);
  --md3-color-state-layer-dark-primary-press: rgba(208, 188, 255, 0.12);
  --md3-color-state-layer-dark-primary-drag: rgba(208, 188, 255, 0.16);
}