.dark-theme {

    --settings-section-button-filter: 110%;

    --color-neutral-900: rgba(255, 255, 255, 0.87);
    --color-neutral-800: rgba(255, 255, 255, 0.8);
    --color-neutral-700: rgba(255, 255, 255, 0.73);
    --color-neutral-600: rgba(255, 255, 255, 0.66);
    --color-neutral-500: rgb(153, 153, 153);
    --color-neutral-400: #383838;
    --color-neutral-300: #303030;
    --color-neutral-200: #292929;
    --color-neutral-100: #242424;
    --color-neutral-50: #202020;
    --color-neutral-000: #101010;

    --color-critical-900: #fef2f2;
    --color-critical-800: #fee2e2;
    --color-critical-700: #fecaca;
    --color-critical-600: #fca5a5;
    --color-critical-500: #f87171;
    --color-critical-400: #ef4444;
    --color-critical-300: #dc2626;
    --color-critical-200: #b91c1c;
    --color-critical-100: #991b1b;
    --color-critical-50: #7f1d1d;
    --color-critical-000: #441313;

    --color-warning-900: #fffbeb;
    --color-warning-800: #fef3c7;
    --color-warning-700: #fde68a;
    --color-warning-600: #fcd34d;
    --color-warning-500: #fbbf24;
    --color-warning-400: #f59e0b;
    --color-warning-300: #d97706;
    --color-warning-200: #b45309;
    --color-warning-100: #92400e;
    --color-warning-50: #783900;
    --color-warning-000: #411e01;

    --color-positive-900: #f0fdf4;
    --color-positive-800: #dcfce7;
    --color-positive-700: #bbf7d0;
    --color-positive-600: #86efac;
    --color-positive-500: #4ade80;
    --color-positive-400: #22c55e;
    --color-positive-300: #16a34a;
    --color-positive-200: #15803d;
    --color-positive-100: #166534;
    --color-positive-50: #14532d;
    --color-positive-000: #0f2e1b;

    --color-urge-900: #e0ffff;
    --color-urge-800: #c0fbff;
    --color-urge-700: #a0f4ff;
    --color-urge-600: #80e9ff;
    --color-urge-500: #60dbfb;
    --color-urge-400: #40cbf3;
    --color-urge-300: #20b9e9;
    --color-urge-200: #00a4dc; /* tab buttons */
    --color-urge-100: #0054bc;
    --color-urge-50: #00169a;
    --color-urge-000: #050076;

    --color-info-900: #f5f3ff;
    --color-info-800: #ede9fe;
    --color-info-700: #ddd6fe;
    --color-info-600: #c4b5fd;
    --color-info-500: #a78bfa;
    --color-info-400: #8b5cf6;
    --color-info-300: #7c3aed;
    --color-info-200: #6d28d9;
    --color-info-100: #5b21b6;
    --color-info-50: #4c1d95;
    --color-info-000: #240e44;


    --color-neutral-normal-content: #ffffff;
}

.light-only {
  display: none;
}

.dark-only {
  display: initial;
}