:root,
  [data-theme="light"],
  [data-theme="light"] .sl-inverted .sl-inverted,
  [data-theme="light"] .sl-inverted .sl-inverted .sl-inverted .sl-inverted {
    color: var(--color-text);

        --text-h: 0;
    --text-s: 0%;
    --text-l: 15%;
    --shadow-sm: 0px 0px 1px rgba(67, 90, 111, 0.3);
    --shadow-md: 0px 2px 4px -2px rgba(0, 0, 0, 0.25), 0px 0px 1px rgba(67, 90, 111, 0.3);
    --shadow-lg: 0 4px 17px rgba(67, 90, 111, .2), 0 2px 3px rgba(0, 0, 0, .1), inset 0 0 0 .5px var(--color-canvas-pure), 0 0 0 .5px rgba(0, 0, 0, 0.2);
    --shadow-xl: 0px 0px 1px rgba(67, 90, 111, 0.3), 0px 8px 10px -4px rgba(67, 90, 111, 0.45);
    --shadow-2xl: 0px 0px 1px rgba(67, 90, 111, 0.3), 0px 16px 24px -8px rgba(67, 90, 111, 0.45);
    --drop-shadow-default1: 0 0 0.5px rgba(0, 0, 0, 0.6);
    --drop-shadow-default2: 0 2px 5px rgba(67, 90, 111, 0.3);
    --color-text-heading: hsla(var(--text-h), var(--text-s), max(3, calc(var(--text-l) - 15)), 1);
    --color-text: hsla(var(--text-h), var(--text-s), var(--text-l), 1);
    --color-text-paragraph: hsla(var(--text-h), var(--text-s), var(--text-l), 0.9);
    --color-text-muted: hsla(var(--text-h), var(--text-s), var(--text-l), 0.7);
    --color-text-light: hsla(var(--text-h), var(--text-s), var(--text-l), 0.55);
    --color-text-disabled: hsla(var(--text-h), var(--text-s), var(--text-l), 0.3);
    --canvas-h: 218;
    --canvas-s: 40%;
    --canvas-l: 100%;
    --color-canvas: hsla(var(--canvas-h), var(--canvas-s), var(--canvas-l), 1);
    --color-canvas-dark: hsla(218, 23%, 23%, 1);
    --color-canvas-pure: hsla(218, 40%, 100%, 1);
    --color-canvas-tint: hsla(218, 32%, 97%, 0.5);
    --color-canvas-50: hsla(218, 32%, 97%, 1);
    --color-canvas-100: hsla(218, 33%, 94%, 1);
    --color-canvas-200: hsla(218, 35%, 91%, 1);
    --color-canvas-300: hsla(218, 36%, 88%, 1);
    --color-canvas-400: hsla(218, 37%, 85%, 1);
    --color-canvas-500: hsla(218, 37%, 82%, 1);
    --color-canvas-dialog: hsla(218, 40%, 100%, 1);
    --color-border-dark: hsla(var(--canvas-h), 30%, 72%, 0.5);
    --color-border: hsla(var(--canvas-h), 32%, 78%, 0.5);
    --color-border-light: hsla(var(--canvas-h), 24%, 84%, 0.5);
    --color-border-input: hsla(var(--canvas-h), 24%, 72%, 0.8);
    --color-border-button: hsla(var(--canvas-h), 24%, 20%, 0.65);
    --primary-h: 202;
    --primary-s: 100%;
    --primary-l: 55%;
    --color-text-primary: hsla(202, 100%, 40%, 1);
    --color-primary-dark: hsla(202, 80%, 47%, 1);
    --color-primary-darker: hsla(202, 80%, 36%, 1);
    --color-primary: hsla(202, 100%, 55%, 1);
    --color-primary-light: hsla(202, 100%, 66%, 1);
    --color-primary-tint: hsla(202, 100%, 65%, 0.25);
    --color-on-primary: hsla(202, 100%, 100%, 1);
    --success-h: 156;
    --success-s: 95%;
    --success-l: 37%;
    --color-text-success: hsla(156, 95%, 40%, 1);
    --color-success-dark: hsla(156, 76%, 31%, 1);
    --color-success-darker: hsla(156, 76%, 24%, 1);
    --color-success: hsla(156, 95%, 37%, 1);
    --color-success-light: hsla(156, 95%, 44%, 1);
    --color-success-tint: hsla(156, 95%, 65%, 0.25);
    --color-on-success: hsla(156, 95%, 100%, 1);
    --warning-h: 20;
    --warning-s: 90%;
    --warning-l: 56%;
    --color-text-warning: hsla(20, 90%, 40%, 1);
    --color-warning-dark: hsla(20, 72%, 48%, 1);
    --color-warning-darker: hsla(20, 72%, 36%, 1);
    --color-warning: hsla(20, 90%, 56%, 1);
    --color-warning-light: hsla(20, 90%, 67%, 1);
    --color-warning-tint: hsla(20, 90%, 65%, 0.25);
    --color-on-warning: hsla(20, 90%, 100%, 1);
    --danger-h: 0;
    --danger-s: 84%;
    --danger-l: 63%;
    --color-text-danger: hsla(0, 84%, 40%, 1);
    --color-danger-dark: hsla(0, 67%, 54%, 1);
    --color-danger-darker: hsla(0, 67%, 41%, 1);
    --color-danger: hsla(0, 84%, 63%, 1);
    --color-danger-light: hsla(0, 84%, 76%, 1);
    --color-danger-tint: hsla(0, 84%, 65%, 0.25);
    --color-on-danger: hsla(0, 84%, 100%, 1);

}

  :root .sl-inverted,
  [data-theme="light"] .sl-inverted,
  [data-theme="light"] .sl-inverted .sl-inverted .sl-inverted {
    color: var(--color-text);

        --text-h: 0;
    --text-s: 0%;
    --text-l: 86%;
    --shadow-sm: 0px 0px 1px rgba(11, 13, 19, 0.5);
    --shadow-md: 0px 2px 4px -2px rgba(0, 0, 0, 0.35), 0px 0px 1px rgba(11, 13, 19, 0.4);
    --shadow-lg: 0 2px 14px rgba(0,0,0,.55), 0 0 0 0.5px rgba(255,255,255,.2);
    --shadow-xl: 0px 0px 1px rgba(11, 13, 19, 0.4), 0px 8px 10px -4px rgba(11, 13, 19, 0.55);
    --shadow-2xl: 0px 0px 1px rgba(11, 13, 19, 0.4), 0px 16px 24px -8px rgba(11, 13, 19, 0.55);
    --drop-shadow-default1: 0 0 0.5px rgba(255, 255, 255, .5);
    --drop-shadow-default2: 0 3px 8px rgba(0, 0, 0, 0.6);
    --color-text-heading: hsla(var(--text-h), var(--text-s), max(3, calc(var(--text-l) - 15)), 1);
    --color-text: hsla(var(--text-h), var(--text-s), var(--text-l), 1);
    --color-text-paragraph: hsla(var(--text-h), var(--text-s), var(--text-l), 0.9);
    --color-text-muted: hsla(var(--text-h), var(--text-s), var(--text-l), 0.7);
    --color-text-light: hsla(var(--text-h), var(--text-s), var(--text-l), 0.55);
    --color-text-disabled: hsla(var(--text-h), var(--text-s), var(--text-l), 0.3);
    --canvas-h: 218;
    --canvas-s: 32%;
    --canvas-l: 10%;
    --color-canvas: hsla(var(--canvas-h), var(--canvas-s), var(--canvas-l), 1);
    --color-canvas-dark: hsla(218, 23%, 23%, 1);
    --color-canvas-pure: hsla(218, 32%, 7%, 1);
    --color-canvas-tint: hsla(218, 26%, 32%, 0.2);
    --color-canvas-50: hsla(218, 26%, 32%, 1);
    --color-canvas-100: hsla(218, 27%, 24%, 1);
    --color-canvas-200: hsla(218, 28%, 18%, 1);
    --color-canvas-300: hsla(218, 29%, 14%, 1);
    --color-canvas-400: hsla(218, 30%, 13%, 1);
    --color-canvas-500: hsla(218, 30%, 12%, 1);
    --color-canvas-dialog: hsla(218, 27%, 24%, 1);
    --color-border-dark: hsla(var(--canvas-h), 24%, 23%, 0.5);
    --color-border: hsla(var(--canvas-h), 26%, 28%, 0.5);
    --color-border-light: hsla(var(--canvas-h), 19%, 34%, 0.5);
    --color-border-input: hsla(var(--canvas-h), 19%, 30%, 0.8);
    --color-border-button: hsla(var(--canvas-h), 19%, 80%, 0.65);
    --primary-h: 202;
    --primary-s: 90%;
    --primary-l: 51%;
    --color-text-primary: hsla(202, 100%, 70%, 1);
    --color-primary-dark: hsla(202, 72%, 43%, 1);
    --color-primary-darker: hsla(202, 72%, 33%, 1);
    --color-primary: hsla(202, 90%, 51%, 1);
    --color-primary-light: hsla(202, 90%, 61%, 1);
    --color-primary-tint: hsla(202, 90%, 65%, 0.25);
    --color-on-primary: hsla(202, 100%, 100%, 1);
    --success-h: 156;
    --success-s: 95%;
    --success-l: 67%;
    --color-text-success: hsla(156, 86%, 60%, 1);
    --color-success-dark: hsla(156, 68%, 57%, 1);
    --color-success-darker: hsla(156, 68%, 44%, 1);
    --color-success: hsla(156, 86%, 67%, 1);
    --color-success-light: hsla(156, 86%, 80%, 1);
    --color-success-tint: hsla(156, 86%, 65%, 0.25);
    --color-on-success: hsla(156, 95%, 100%, 1);
    --warning-h: 20;
    --warning-s: 90%;
    --warning-l: 50%;
    --color-text-warning: hsla(20, 81%, 60%, 1);
    --color-warning-dark: hsla(20, 65%, 43%, 1);
    --color-warning-darker: hsla(20, 65%, 33%, 1);
    --color-warning: hsla(20, 81%, 50%, 1);
    --color-warning-light: hsla(20, 81%, 60%, 1);
    --color-warning-tint: hsla(20, 81%, 65%, 0.25);
    --color-on-warning: hsla(20, 90%, 100%, 1);
    --danger-h: 0;
    --danger-s: 84%;
    --danger-l: 43%;
    --color-text-danger: hsla(0, 76%, 60%, 1);
    --color-danger-dark: hsla(0, 60%, 37%, 1);
    --color-danger-darker: hsla(0, 60%, 28%, 1);
    --color-danger: hsla(0, 76%, 43%, 1);
    --color-danger-light: hsla(0, 76%, 52%, 1);
    --color-danger-tint: hsla(0, 76%, 65%, 0.25);
    --color-on-danger: hsla(0, 84%, 100%, 1);

}
  [data-theme="dark"],
  [data-theme="dark"] .sl-inverted .sl-inverted,
  [data-theme="dark"] .sl-inverted .sl-inverted .sl-inverted .sl-inverted {
    color: var(--color-text);

        --text-h: 0;
    --text-s: 0%;
    --text-l: 85%;
    --shadow-sm: 0px 0px 1px rgba(11, 13, 19, 0.5);
    --shadow-md: 0px 2px 4px -2px rgba(0, 0, 0, 0.35), 0px 0px 1px rgba(11, 13, 19, 0.4);
    --shadow-lg: 0 2px 14px rgba(0,0,0,.55), 0 0 0 0.5px rgba(255,255,255,.2);
    --shadow-xl: 0px 0px 1px rgba(11, 13, 19, 0.4), 0px 8px 10px -4px rgba(11, 13, 19, 0.55);
    --shadow-2xl: 0px 0px 1px rgba(11, 13, 19, 0.4), 0px 16px 24px -8px rgba(11, 13, 19, 0.55);
    --drop-shadow-default1: 0 0 0.5px rgba(255, 255, 255, .5);
    --drop-shadow-default2: 0 3px 8px rgba(0, 0, 0, 0.6);
    --color-text-heading: hsla(var(--text-h), var(--text-s), max(3, calc(var(--text-l) - 15)), 1);
    --color-text: hsla(var(--text-h), var(--text-s), var(--text-l), 1);
    --color-text-paragraph: hsla(var(--text-h), var(--text-s), var(--text-l), 0.9);
    --color-text-muted: hsla(var(--text-h), var(--text-s), var(--text-l), 0.7);
    --color-text-light: hsla(var(--text-h), var(--text-s), var(--text-l), 0.55);
    --color-text-disabled: hsla(var(--text-h), var(--text-s), var(--text-l), 0.3);
    --canvas-h: 218;
    --canvas-s: 32%;
    --canvas-l: 8%;
    --color-canvas: hsla(var(--canvas-h), var(--canvas-s), var(--canvas-l), 1);
    --color-canvas-dark: hsla(218, 23%, 23%, 1);
    --color-canvas-pure: hsla(218, 32%, 5%, 1);
    --color-canvas-tint: hsla(218, 26%, 30%, 0.2);
    --color-canvas-50: hsla(218, 26%, 20%, 1);
    --color-canvas-100: hsla(218, 27%, 14%, 1);
    --color-canvas-200: hsla(218, 28%, 10%, 1);
    --color-canvas-300: hsla(218, 29%, 8%, 1);
    --color-canvas-400: hsla(218, 30%, 7%, 1);
    --color-canvas-500: hsla(218, 30%, 7%, 1);
    --color-canvas-dialog: hsla(218, 27%, 14%, 1);
    --color-border-dark: hsla(var(--canvas-h), 24%, 21%, 0.5);
    --color-border: hsla(var(--canvas-h), 26%, 26%, 0.5);
    --color-border-light: hsla(var(--canvas-h), 19%, 32%, 0.5);
    --color-border-input: hsla(var(--canvas-h), 19%, 28%, 0.8);
    --color-border-button: hsla(var(--canvas-h), 19%, 80%, 0.65);
    --primary-h: 202;
    --primary-s: 80%;
    --primary-l: 36%;
    --color-text-primary: hsla(202, 100%, 70%, 1);
    --color-primary-dark: hsla(202, 64%, 30%, 1);
    --color-primary-darker: hsla(202, 64%, 23%, 1);
    --color-primary: hsla(202, 80%, 36%, 1);
    --color-primary-light: hsla(202, 80%, 43%, 1);
    --color-primary-tint: hsla(202, 80%, 42%, 0.25);
    --color-on-primary: hsla(202, 100%, 100%, 1);
    --success-h: 156;
    --success-s: 95%;
    --success-l: 37%;
    --color-text-success: hsla(156, 76%, 60%, 1);
    --color-success-dark: hsla(156, 61%, 20%, 1);
    --color-success-darker: hsla(156, 61%, 16%, 1);
    --color-success: hsla(156, 76%, 24%, 1);
    --color-success-light: hsla(156, 76%, 29%, 1);
    --color-success-tint: hsla(156, 76%, 42%, 0.25);
    --color-on-success: hsla(156, 95%, 100%, 1);
    --warning-h: 20;
    --warning-s: 90%;
    --warning-l: 56%;
    --color-text-warning: hsla(20, 72%, 60%, 1);
    --color-warning-dark: hsla(20, 58%, 31%, 1);
    --color-warning-darker: hsla(20, 58%, 24%, 1);
    --color-warning: hsla(20, 72%, 36%, 1);
    --color-warning-light: hsla(20, 72%, 44%, 1);
    --color-warning-tint: hsla(20, 72%, 42%, 0.25);
    --color-on-warning: hsla(20, 90%, 100%, 1);
    --danger-h: 0;
    --danger-s: 84%;
    --danger-l: 63%;
    --color-text-danger: hsla(0, 67%, 60%, 1);
    --color-danger-dark: hsla(0, 54%, 35%, 1);
    --color-danger-darker: hsla(0, 54%, 27%, 1);
    --color-danger: hsla(0, 67%, 41%, 1);
    --color-danger-light: hsla(0, 67%, 49%, 1);
    --color-danger-tint: hsla(0, 67%, 42%, 0.25);
    --color-on-danger: hsla(0, 84%, 100%, 1);

}

  
  [data-theme="dark"] .sl-inverted,
  [data-theme="dark"] .sl-inverted .sl-inverted .sl-inverted {
    color: var(--color-text);

        --text-h: 0;
    --text-s: 0%;
    --text-l: 89%;
    --shadow-sm: 0px 0px 1px rgba(11, 13, 19, 0.5);
    --shadow-md: 0px 2px 4px -2px rgba(0, 0, 0, 0.35), 0px 0px 1px rgba(11, 13, 19, 0.4);
    --shadow-lg: 0 2px 14px rgba(0,0,0,.55), 0 0 0 0.5px rgba(255,255,255,.2);
    --shadow-xl: 0px 0px 1px rgba(11, 13, 19, 0.4), 0px 8px 10px -4px rgba(11, 13, 19, 0.55);
    --shadow-2xl: 0px 0px 1px rgba(11, 13, 19, 0.4), 0px 16px 24px -8px rgba(11, 13, 19, 0.55);
    --drop-shadow-default1: 0 0 0.5px rgba(255, 255, 255, .5);
    --drop-shadow-default2: 0 3px 8px rgba(0, 0, 0, 0.6);
    --color-text-heading: hsla(var(--text-h), var(--text-s), max(3, calc(var(--text-l) - 15)), 1);
    --color-text: hsla(var(--text-h), var(--text-s), var(--text-l), 1);
    --color-text-paragraph: hsla(var(--text-h), var(--text-s), var(--text-l), 0.9);
    --color-text-muted: hsla(var(--text-h), var(--text-s), var(--text-l), 0.7);
    --color-text-light: hsla(var(--text-h), var(--text-s), var(--text-l), 0.55);
    --color-text-disabled: hsla(var(--text-h), var(--text-s), var(--text-l), 0.3);
    --canvas-h: 218;
    --canvas-s: 32%;
    --canvas-l: 13%;
    --color-canvas: hsla(var(--canvas-h), var(--canvas-s), var(--canvas-l), 1);
    --color-canvas-dark: hsla(218, 23%, 23%, 1);
    --color-canvas-pure: hsla(218, 32%, 10%, 1);
    --color-canvas-tint: hsla(218, 26%, 35%, 0.2);
    --color-canvas-50: hsla(218, 26%, 23%, 1);
    --color-canvas-100: hsla(218, 27%, 18%, 1);
    --color-canvas-200: hsla(218, 28%, 14%, 1);
    --color-canvas-300: hsla(218, 29%, 11%, 1);
    --color-canvas-400: hsla(218, 30%, 10%, 1);
    --color-canvas-500: hsla(218, 30%, 10%, 1);
    --color-canvas-dialog: hsla(218, 27%, 18%, 1);
    --color-border-dark: hsla(var(--canvas-h), 24%, 26%, 0.5);
    --color-border: hsla(var(--canvas-h), 26%, 31%, 0.5);
    --color-border-light: hsla(var(--canvas-h), 19%, 37%, 0.5);
    --color-border-input: hsla(var(--canvas-h), 19%, 33%, 0.8);
    --color-border-button: hsla(var(--canvas-h), 19%, 80%, 0.65);
    --primary-h: 202;
    --primary-s: 80%;
    --primary-l: 33%;
    --color-text-primary: hsla(202, 100%, 70%, 1);
    --color-primary-dark: hsla(202, 64%, 28%, 1);
    --color-primary-darker: hsla(202, 64%, 22%, 1);
    --color-primary: hsla(202, 80%, 33%, 1);
    --color-primary-light: hsla(202, 80%, 40%, 1);
    --color-primary-tint: hsla(202, 80%, 42%, 0.25);
    --color-on-primary: hsla(202, 100%, 100%, 1);
    --success-h: 156;
    --success-s: 95%;
    --success-l: 67%;
    --color-text-success: hsla(156, 76%, 60%, 1);
    --color-success-dark: hsla(156, 61%, 37%, 1);
    --color-success-darker: hsla(156, 61%, 28%, 1);
    --color-success: hsla(156, 76%, 44%, 1);
    --color-success-light: hsla(156, 76%, 52%, 1);
    --color-success-tint: hsla(156, 76%, 42%, 0.25);
    --color-on-success: hsla(156, 95%, 100%, 1);
    --warning-h: 20;
    --warning-s: 90%;
    --warning-l: 50%;
    --color-text-warning: hsla(20, 72%, 60%, 1);
    --color-warning-dark: hsla(20, 58%, 28%, 1);
    --color-warning-darker: hsla(20, 58%, 21%, 1);
    --color-warning: hsla(20, 72%, 33%, 1);
    --color-warning-light: hsla(20, 72%, 39%, 1);
    --color-warning-tint: hsla(20, 72%, 42%, 0.25);
    --color-on-warning: hsla(20, 90%, 100%, 1);
    --danger-h: 0;
    --danger-s: 84%;
    --danger-l: 43%;
    --color-text-danger: hsla(0, 67%, 60%, 1);
    --color-danger-dark: hsla(0, 54%, 24%, 1);
    --color-danger-darker: hsla(0, 54%, 18%, 1);
    --color-danger: hsla(0, 67%, 28%, 1);
    --color-danger-light: hsla(0, 67%, 34%, 1);
    --color-danger-tint: hsla(0, 67%, 42%, 0.25);
    --color-on-danger: hsla(0, 84%, 100%, 1);

}