:root {
    --white: #ffffff;
    --black: hsl(0, 0%, 0%);

    /* Neutrals */
    --neutral-10: #161616; /* neutral-100 */
    --neutral-20: #323232; /* neutral-90 */
    --neutral-30: #515151; /* neutral-80 */
    --neutral-40: #5e5e5e; /* neutral-70 */
    --neutral-50: #767676; /* neutral-60 */
    --neutral-60: #a1a1a1; /* neutral-50 */
    --neutral-70: #bdbdbd; /* neutral-40 */
    --neutral-80: #d8d8d8; /* neutral-30 */
    --neutral-90: #f4f4f4; /* neutral-20 */
    --neutral-100: #fafafa; /* neutral-10 */

    /* Data Viz: Sequential */
    --seq-1: #9656d6; /* purple-60 */
    --seq-2: #ae74e8; /* purple-50 */
    --seq-3: #c79bf2; /* purple-40 */
    --seq-4: #dabcf7; /* purple-30 */
    --seq-5: #ead9fa; /* purple-20 */
    --seq-6: #f5f0fa; /* purple-10 */

    /* Data Viz: Diverging */
    --div-1: #642b9e; /* purple-80 */
    --div-2: #7d3cbd; /* purple-70 */
    --div-3: #9656d6; /* purple-60 */
    --div-4: #ae74e8; /* purple-50 */
    --div-5: #c79bf2; /* purple-40 */
    --div-6: #dabcf7; /* purple-30 */
    --div-7: #ead9fa; /* purple-20 */
    --div-8: #f5f0fa; /* purple-10 */

    --div-9: #d7faf8; /* teal-10 */
    --div-10: #83f2eb; /* teal-20 */
    --div-11: #43ded3; /* teal-30 */
    --div-12: #21c2b7; /* teal-40 */
    --div-13: #0ea197; /* teal-50 */
    --div-14: #08827a; /* teal-60 */
    --div-15: #086962; /* teal-70 */
    --div-16: #09524d; /* teal-80 */

    /* Data Viz: Qualitative */
    --qual-1: #9656d6; /* purple-60 */
    --qual-2: #53baed; /* primary-40 */
    --qual-3: #08827a; /* teal-60 */
    --qual-4: #f78bb8; /* magenta-40 */
    --qual-5: #f55353; /* red-50 */
    --qual-6: #faf0f0; /* red-10 */
    --qual-7: #46e385; /* green-30 */
    --qual-8: #5691f0; /* blue-50 */
    --qual-9: #ed5393; /* magenta-50 */
    --qual-10: #e89c3f; /* bronze-40 */

    --containerRoot: var(--neutral-10); /* the root container, depth 0 */
    --container: var(--neutral-20); /* standard container, depth 1 */
    --containerNested: var(--neutral-30); /* nested container, depth 2 */

    --input: var(--black);
    --input--disabled: var(--neutral-40);

    --icon: var(--neutral-70);
    --icon--hover: var(--neutral-60);
    --icon--disabled: var(--neutral-40);
    --icon--selected: var(--neutral-10);

    --label: var(--neutral-90);
    --label--disabled: var(--neutral-60);

    /* Borders */
    --border: var(--neutral-50);
    --border--disabled: var(--neutral-50);
    --containerBorder: 1px solid var(--border);

    /* Box Shadow */
    --boxShadow1: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    --boxShadow2: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    --boxShadow3: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    --boxShadow4: 0 14px 28px rgba(0, 0, 0, 0.25),
        0 10px 10px rgba(0, 0, 0, 0.22);
    --boxShadow5: 0 19px 38px rgba(0, 0, 0, 0.3),
        0 15px 12px rgba(0, 0, 0, 0.22);
    --boxShadow--inset: inset 0 0 4px 2px rgba(34, 34, 34, 0.4);

    /* Call to action. */
    --callToAction: #229ad6; /* primary-50 */
    --callToActionHighlight: #0c2938; /* primary-100 */
    --callToAction--hover: #0c7bb3; /* primary-60 */
    --callToAction--active: #53baed; /* primary-40 */
    --callToAction--disabled: var(--neutral-50);

    /* Functional */
    --error: #f55353; /* red-50 */
    --info: #5691f0; /* blue-50 */
    --infoSecondary: #114599; /* blue-80 */
    --warning: #cf7911; /* bronze-50 */
    --warningSecondary: #693d07; /* bronze-80 */
    --success: #0aa648; /* green-50 */

    /* Border Radius */
    --borderRadius: 4px;
    --borderRadiusInput: 2px;

    /* Opacity */
    --opacity-25: rgba(0, 0, 0, 0.25); /* black, 50% opacity */
    --opacity-50: rgba(0, 0, 0, 0.5); /* black, 50% opacity */
    --opacity-85: rgba(0, 0, 0, 0.85); /* black, 85% opacity */

    /* Typography */
    --font-NotoSans: 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI',
        Helvetica, Arial, sans-serif;

    /* Components */
    /* LED Display */
    --indicator: #1ec963; /* green-40 */
    --indicatorOff: #0a2e18; /* green-100 */

    /* Checkbox */
    --checkbox--checked: var(--callToAction);
    --checkbox--unchecked: var(--border);
    --checkbox--indeterminate: var(--callToAction);
    --checkbox--disabled: var(--input--disabled);

    /* Progress Bar */
    --progressLinearTrack--determinate: var(--neutral-10);
    --progressLinearTrack--indeterminate: var(--neutral-10);
    --progressLinearBar--determinate: var(--infoSecondary);
    --progressLinearBar--indeterminate: var(--border);

    /* Toggle Switch */
    --toggleSwitch--selected: var(--callToAction);
    --toggleSwitch--unselected: var(--neutral-10);

    /* Radio */
    --radio--selected: var(--callToAction);
    --radio--unselected: var(--border);
    --radio--disabled: var(--input--disabled);

    /* Piping */
    --pipePrimaryFill: var(--neutral-20);
    --pipeSecondaryFill: #5a5a5a;
    --pipeStroke: var(--neutral-70);
    --pipeSelectStroke: var(--callToAction);

    /* Symbols */
    --symbolFill--default: var(--neutral-20);
    --symbolStroke--default: var(--neutral-70);
    --symbolFillAnimation--default: var(--neutral-80);
    --symbolFill--running: var(--neutral-50);
    --symbolFillAnimation--running: var(--neutral-80);
    --symbolStroke--running: var(--neutral-70);
    --symbolFill--stopped: var(--black);
    --symbolStroke--stopped: var(--neutral-70);
    --symbolFill--faulted: #8f0e0e;
    --symbolStroke--faulted: #fa8e8e;
}