:host, .sl-theme-dark {
    color-scheme: dark;


    /* Success — same scale as light CDN */
    --success-50:  #E3F9E3;
    --success-100: #C2F2C1;
    --success-200: #93DA98;
    --success-300: #5DC36F;
    --success-400: #00AC49;
    --success-500: #00883C;
    --success-600: #036730;
    --success-700: #0A5027;
    --success-800: #0A3A1D;
    --success-900: #052310;
    --success-950: #031608;

    /* Accent/Warning — same scale as light CDN */
    --accent-50:  #FEF3CD;
    --accent-100: #FFE495;
    --accent-200: #FAC22B;
    --accent-300: #EF9D00;
    --accent-400: #DA7E00;
    --accent-500: #B45F04;
    --accent-600: #8C4602;
    --accent-700: #6F3601;
    --accent-800: #532600;
    --accent-900: #331600;
    --accent-950: #220C00;

    /* Danger — same scale as light CDN */
    --danger-50:  #FFF0EF;
    --danger-100: #FFDEDC;
    --danger-200: #FFB8B6;
    --danger-300: #FD8F90;
    --danger-400: #F3676C;
    --danger-500: #dc3146;
    --danger-600: #b30532;
    --danger-700: #8A132C;
    --danger-800: #631323;
    --danger-900: #3E0913;
    --danger-950: #2A040B;

    /* Neutral/Basic — same scale as light CDN */
    --basic-0:    #1B1D26;
    --basic-50:   #F1F2F3;
    --basic-100:  #E4E5E9;
    --basic-200:  #C7C9D0;
    --basic-300:  #ABAEB9;
    --basic-400:  #9194A2;
    --basic-500:  #717584;
    --basic-600:  #545868;
    --basic-700:  #424554;
    --basic-800:  #2F323F;
    --basic-900:  #1B1D26;
    --basic-950:  #101219;
    --basic-1000: #101219;
    --basic-1100: #101219;

    /* on-primary */
    --on-primary-100: var(--basic-1000);
    --on-primary-200: var(--basic-1000);
    --on-primary-300: var(--basic-1000);
    --on-primary-400: var(--basic-1000);
    --on-primary-500: var(--basic-1000);
    --on-primary-600: var(--basic-1000);
    --on-primary-700: var(--basic-200);
    --on-primary-800: var(--basic-200);
    --on-primary-900: var(--basic-200);

    /* on-success */
    --on-success-100: var(--basic-1000);
    --on-success-200: var(--basic-1000);
    --on-success-300: var(--basic-1000);
    --on-success-400: var(--basic-1000);
    --on-success-500: var(--basic-1000);
    --on-success-600: var(--basic-1000);
    --on-success-700: var(--basic-200);
    --on-success-800: var(--basic-200);
    --on-success-900: var(--basic-200);

    /* on-secondary */
    --on-secondary-100: var(--basic-1000);
    --on-secondary-200: var(--basic-1000);
    --on-secondary-300: var(--basic-1000);
    --on-secondary-400: var(--basic-1000);
    --on-secondary-500: var(--basic-1000);
    --on-secondary-600: var(--basic-1000);
    --on-secondary-700: var(--basic-1000);
    --on-secondary-800: var(--basic-200);
    --on-secondary-900: var(--basic-200);

    /* on-accent */
    --on-accent-100: var(--basic-1000);
    --on-accent-200: var(--basic-1000);
    --on-accent-300: var(--basic-1000);
    --on-accent-400: var(--basic-1000);
    --on-accent-500: var(--basic-1000);
    --on-accent-600: var(--basic-1000);
    --on-accent-700: var(--basic-200);
    --on-accent-800: var(--basic-200);
    --on-accent-900: var(--basic-200);

    /* on-danger */
    --on-danger-100: var(--basic-1000);
    --on-danger-200: var(--basic-1000);
    --on-danger-300: var(--basic-1000);
    --on-danger-400: var(--basic-200);
    --on-danger-500: var(--basic-200);
    --on-danger-600: var(--basic-200);
    --on-danger-700: var(--basic-200);
    --on-danger-800: var(--basic-200);
    --on-danger-900: var(--basic-200);

    /* on-basic */
    --on-basic-100: var(--basic-1000);
    --on-basic-200: var(--basic-1000);
    --on-basic-300: var(--basic-1000);
    --on-basic-400: var(--basic-1000);
    --on-basic-500: var(--basic-1000);
    --on-basic-600: var(--basic-1000);
    --on-basic-700: var(--basic-200);
    --on-basic-800: var(--basic-200);
    --on-basic-900: var(--basic-200);
    --on-basic-1000: var(--basic-200);
    --on-basic-1100: var(--basic-200);

    /* Transparent variants */
    --primary-transparent-100: rgba(118, 163, 254, 0.08);
    --primary-transparent-200: rgba(118, 163, 254, 0.16);
    --primary-transparent-300: rgba(118, 163, 254, 0.24);
    --primary-transparent-400: rgba(118, 163, 254, 0.32);
    --primary-transparent-500: rgba(118, 163, 254, 0.4);
    --primary-transparent-600: rgba(118, 163, 254, 0.48);
    --secondary-transparent-100: rgba(242, 242, 242, 0.08);
    --secondary-transparent-200: rgba(242, 242, 242, 0.16);
    --secondary-transparent-300: rgba(242, 242, 242, 0.24);
    --secondary-transparent-400: rgba(242, 242, 242, 0.32);
    --secondary-transparent-500: rgba(242, 242, 242, 0.4);
    --secondary-transparent-600: rgba(242, 242, 242, 0.48);
    --accent-transparent-100: rgba(251, 176, 59, 0.08);
    --accent-transparent-200: rgba(251, 176, 59, 0.16);
    --accent-transparent-300: rgba(251, 176, 59, 0.24);
    --accent-transparent-400: rgba(251, 176, 59, 0.32);
    --accent-transparent-500: rgba(251, 176, 59, 0.4);
    --accent-transparent-600: rgba(251, 176, 59, 0.48);
    --basic-transparent-100: rgba(197, 206, 224, 0.08);
    --basic-transparent-200: rgba(197, 206, 224, 0.16);
    --basic-transparent-300: rgba(197, 206, 224, 0.24);
    --basic-transparent-400: rgba(197, 206, 224, 0.32);
    --basic-transparent-500: rgba(197, 206, 224, 0.4);
    --basic-transparent-600: rgba(197, 206, 224, 0.48);
    --success-transparent-100: rgba(158, 215, 98, 0.08);
    --success-transparent-200: rgba(158, 215, 98, 0.16);
    --success-transparent-300: rgba(158, 215, 98, 0.24);
    --success-transparent-400: rgba(158, 215, 98, 0.32);
    --success-transparent-500: rgba(158, 215, 98, 0.4);
    --success-transparent-600: rgba(158, 215, 98, 0.48);
    --danger-transparent-100: rgba(176, 0, 32, 0.08);
    --danger-transparent-200: rgba(176, 0, 32, 0.16);
    --danger-transparent-300: rgba(176, 0, 32, 0.24);
    --danger-transparent-400: rgba(176, 0, 32, 0.32);
    --danger-transparent-500: rgba(176, 0, 32, 0.4);
    --danger-transparent-600: rgba(176, 0, 32, 0.48);
    --alternate-transparent-100: rgba(255, 255, 255, 0.08);
    --alternate-transparent-200: rgba(255, 255, 255, 0.16);
    --alternate-transparent-300: rgba(255, 255, 255, 0.24);
    --alternate-transparent-400: rgba(255, 255, 255, 0.32);
    --alternate-transparent-500: rgba(255, 255, 255, 0.4);
    --alternate-transparent-600: rgba(255, 255, 255, 0.48);
}