:root {
    /* Base Colors */
    --cbase-black: 6, 0, 10; /* #06000A */
    --cbase-white: 223, 241, 242; /* #DFF1F2 */
    --cbase-yellow: 254, 236, 94; /* FEEC5E */
    --cbase-offyellow: 217, 189, 50; /* D9BD32 */
    --cbase-darkgrey: 34, 28, 40; /* 221C28 */
    --cbase-grey: 43, 37, 49; /* 2B2531 */
    --cbase-green: 118, 218, 113; /* 76DA71 */
    --cbase-darkgreen: 28, 61, 55; /* 1C3D37 */
    --cbase-teal: 123, 222, 205; /* 7BDECD */
    --cbase-red: 217, 50, 50; /* D93232 */
    --cbase-altred: 255, 192, 192;
    --cbase-purple: 59, 90, 171; /* 3B5AAB */
    --cbase-altpurple: 130, 155, 210; /* 829BD2 */

    /* Black Components */
    --c-black-100: rgba(var(--cbase-black), 1);
    --c-black-80: rgba(var(--cbase-black), 0.8);
    --c-black-60: rgba(var(--cbase-black), 0.6);
    --c-black-40: rgba(var(--cbase-black), 0.4);
    --c-black-20: rgba(var(--cbase-black), 0.2);

    /* Red Compontents */
    --c-red-100: rgba(var(--cbase-red), 1);
    --c-red-80: rgba(var(--cbase-red), 0.8);
    --c-red-60: rgba(var(--cbase-red), 0.6);
    --c-red-40: rgba(var(--cbase-red), 0.4);
    --c-red-20: rgba(var(--cbase-red), 0.2);

    /* Alt Red components */
    --c-altred-100: rgba(var(--cbase-altred), 1);
    --c-altred-80: rgba(var(--cbase-altred), 0.8);
    --c-altred-60: rgba(var(--cbase-altred), 0.6);
    --c-altred-40: rgba(var(--cbase-altred), 0.4);
    --c-altred-20: rgba(var(--cbase-altred), 0.2);

    /* Purple Components */
    --c-purple-100: rgba(var(--cbase-purple), 1);
    --c-purple-80: rgba(var(--cbase-purple), 0.8);
    --c-purple-60: rgba(var(--cbase-purple), 0.6);
    --c-purple-40: rgba(var(--cbase-purple), 0.4);
    --c-purple-20: rgba(var(--cbase-purple), 0.2);

    /* Alt Purple Components */
    --c-altpurple-100: rgba(var(--cbase-altpurple), 1);
    --c-altpurple-80: rgba(var(--cbase-altpurple), 0.8);
    --c-altpurple-60: rgba(var(--cbase-altpurple), 0.6);
    --c-altpurple-40: rgba(var(--cbase-altpurple), 0.4);
    --c-altpurple-20: rgba(var(--cbase-altpurple), 0.2);

    /* Green Components */
    --c-green-100: rgba(var(--cbase-green), 1);
    --c-green-80: rgba(var(--cbase-green), 0.8);
    --c-green-60: rgba(var(--cbase-green), 0.6);
    --c-green-40: rgba(var(--cbase-green), 0.4);
    --c-green-20: rgba(var(--cbase-green), 0.2);

    /* Grey Components */
    --c-grey-100: rgba(var(--cbase-grey), 1);
    --c-grey-80: rgba(var(--cbase-grey), 0.8);
    --c-grey-50: rgba(var(--cbase-grey), 0.5);
    --c-grey-20: rgba(var(--cbase-grey), 0.2);

    /* Dark Grey components */
    --c-darkgrey-100: rgba(var(--cbase-darkgrey), 1);
    --c-darkgrey-80: rgba(var(--cbase-darkgrey), 0.8);
    --c-darkgrey-50: rgba(var(--cbase-darkgrey), 0.5);
    --c-darkgrey-20: rgba(var(--cbase-darkgrey), 0.2);

    /* White components */
    --c-white-100: rgba(var(--cbase-white), 1);
    --c-white-80: rgba(var(--cbase-white), 0.8);
    --c-white-70: rgba(var(--cbase-white), 0.7);
    --c-white-60: rgba(var(--cbase-white), 0.6);
    --c-white-50: rgba(var(--cbase-white), 0.5);
    --c-white-40: rgba(var(--cbase-white), 0.4);
    --c-white-20: rgba(var(--cbase-white), 0.2);
    --c-white-10: rgba(var(--cbase-white), 0.1);
    --c-white-5: rgba(var(--cbase-white), 0.05);

    /* Accent 1 */
    --c-accent1-100: rgba(var(--cbase-offyellow), 1);
    --c-accent1-80: rgba(var(--cbase-offyellow), 0.8);
    --c-accent1-60: rgba(var(--cbase-offyellow), 0.6);
    --c-accent1-40: rgba(var(--cbase-offyellow), 0.4);
    --c-accent1-20: rgba(var(--cbase-offyellow), 0.2);
    --c-accent1-10: rgba(var(--cbase-offyellow), 0.1);

    /* Accent 2 */
    --c-accent2-100: rgba(var(--cbase-teal), 1);
    --c-accent2-80: rgba(var(--cbase-teal), 0.8);
    --c-accent2-60: rgba(var(--cbase-teal), 0.6);
    --c-accent2-40: rgba(var(--cbase-teal), 0.4);
    --c-accent2-20: rgba(var(--cbase-teal), 0.2);

    /* Accent 3 */
    --c-accent3-100: rgba(var(--cbase-yellow), 1);
    --c-accent3-20: rgba(var(--cbase-yellow), 0.2);
}

/* Alt Style */
:root {
    --cbase-darkgrey: 6, 22, 30;
    --cbase-grey: 42, 52, 56;
}
:root {
    --dim-margin-xxsmall: 2px;
    --dim-margin-xsmall: 4px;
    --dim-margin-small: 8px;
    --dim-margin-normal: 12px;
    --dim-margin-medium: 16px;
    --dim-margin-xmedium: 24px;
    --dim-margin-large: 32px;
    --dim-margin-xlarge: 42px;
    --dim-margin-xxlarge: 48px;
    --dim-margin-xxxlarge: 64px;

    --dim-radius-small: 6px;
    --dim-radius-normal: 9px;
    --dim-radius-medium: 12px;

    /* App Specific */

    --app-topbar-height: 128px;

    /* View Specific */

    --dim-view-vertical-margin: 128px;
    --dim-view-horizontal-margin: 24px;
    --dim-view-width-min: 368px;
    --dim-view-width-max: 1024px;
    --dim-view-gutter-margin: 24px;

    /* Subview Specific */
    --dim-subview-widget-max-width: 600px;
}
:root {
    font-family: "Source Sans 3", sans-serif;

    --font-paragraph-small: 12px/1.3 "Source Sans Pro", sans-serif;
    --font-paragraph-normal: 14px/1.6 "Source Sans Pro", sans-serif;
    --font-paragraph-large: 16px/1.6 "Source Sans Pro", sans-serif;

    --font-header-xsmall: bold 12px "Source Sans Pro", sans-serif;
    --font-header-small: bold 14px "Source Sans Pro", sans-serif;
    --font-header-normal: bold 16px "Source Sans Pro", sans-serif;
    --font-header-large: bold 24px/1.4 "Source Sans Pro", sans-serif;
    --font-header-xlarge: bold 48px "Source Sans Pro", sans-serif;

    --font-control-xsmall: bold 12px "Play", sans-serif;
    --font-control-small: bold 14px "Play", sans-serif;
    --font-control-normal: bold 16px "Play", sans-serif;
    --font-control-large: bold 20px/1.4 "Play", sans-serif;

    --font-strong-small: bold 12px "Source Sans Pro", sans-serif;
    --font-strong-normal: bold 14px "Source Sans Pro", sans-serif;
    --font-strong-large: bold 16px "Source Sans Pro", sans-serif;

    --font-semi-small: 600 12px "Source Sans Pro", sans-serif;
    --font-semi-normal: 600 14px "Source Sans Pro", sans-serif;
    --font-semi-large: 600 16px "Source Sans Pro", sans-serif;

    --font-control-normal: bold 14px/2.2 "Source Sans Pro", sans-serif;
    --font-control-placeholder: 14px/2.2 "Source Sans Pro", sans-serif;

    --font-code-small: 600 8px/1.3 "Fira Code", monospace;
    --font-code-small: 600 12px/1.3 "Fira Code", monospace;
    --font-code-normal: 600 14px/1.6 "Fira Code", monospace;
    --font-code-large: 600 16px/1.6 "Fira Code", monospace;

    --font-label-xsmall: bold 9px/1.6 "Source Sans Pro", sans-serif;
    --font-label-small: bold 11px/1.6 "Source Sans Pro", sans-serif;
    --font-label-normal: bold 14px/1.6 "Source Sans Pro", sans-serif;
    --font-label-large: bold 16px/1.6 "Source Sans Pro", sans-serif;
}
html {
    padding: 0;
    margin: 0;
}

body {
    padding: 0;
    margin: 0;
}

:root {
    --content-width: 1024px;
}
:root {
    /* Link styles */
    --c-link-color: var(--c-accent2-80);
    --c-link-hover: var(--c-accent2-100);

    /* Border colors */
    --c-border-solid: var(--c-black-100);
    --c-border-light: var(--c-white-20);
    --c-border-lighter: var(--c-white-10);

    /* Text colors */
    --c-text-header: var(--c-white-100);
    --c-text-caption: var(--c-white-60);
    --c-text-paragraph: var(--c-white-80);
    --c-text-menu: var(--c-white-80);
    --c-text-highlight: var(--c-accent1-80);
    --c-text-link: var(--c-accent2-100);

    /* Dialog colors */
    --c-dialog-border: var(--c-black-100);
    --c-dialog-title: var(--c-white-100);
    --c-dialog-framebg: var(--c-grey-100);
    --c-dialog-contentbg: var(--c-darkgrey-100);
    --c-dialog-text: var(--c-white-70);

    /* Control colors */
    --c-control-border: var(--c-white-20);
    --c-control-border-disabled: var(--c-white-10);
    --c-control-background: var(--c-white-10);
    --c-control-background-disabled: transparent;
    --c-control-focus: var(--c-accent2-100);
    --c-control-focus-shaded: var(--c-accent2-80);
    --c-control-text: var(--c-white-100);
    --c-control-text-invert: var(--c-black-100);
    --c-control-text-highlight: var(--c-white-100);
    --c-control-text-palceholder: var(--c-white-50);
    --c-control-text-disabled: var(--c-white-20);
    --c-control-highlight: var(--c-accent1-100);
    --c-control-highlight-disabled: var(--c-accent2-40);
    --c-control-highlight2: rgba(var(--cbase-offyellow), 0.5);

    --c-control-disabled-border: var(--c-white-10);
    --c-control-disabled-background: var(--c-white-5);
    --c-control-disabled-text: var(--c-white-50);

    /* Widget Colors */
    --c-widget-background: var(--c-white-5);
    --c-widget-border: var(--c-black-100);
    --c-widget-separator: var(--c-white-10);
    --c-widget-highlight: var(--c-accent1-100);
    --c-widget-highlight-alt: var(--c-white-100);

    /* Drop-Down Menu Colors */
    --c-dropdown-menu-background: var(--c-grey-100);
    --c-dropdown-menu-text: var(--c-white-80);
    --c-dropdown-menu-icon: var(--c-white-80);
    --c-dropdown-menu-background--hover: var(--c-accent2-100);
    --c-dropdown-menu-text--hover: var(--c-black-100);
    --c-dropdown-menu-icon--hover: var(--c-black-100);
    --c-dropdown-menu-divider: var(--c-white-10);

    /* Mark Colors  */
    --c-mark-background: var(--c-accent1-100);
    --c-mark-text: var(--c-black-100);

    /* Shell Colors */
    --c-shell-border: var(--c-black-100);

    /* Status Colors */
    --c-status-success: var(--c-green-100);
    --c-status-success: var(--c-blue-100);

    /* Scrollbar Colors */
    --c-scrollbar-background: transparent;
    --c-scrollbar-thumb: var(--c-white-10);

    /* Label Colors */
    --th-view-heading-color: var(--c-white-80);
    --th-view-heading-icon-color: var(--c-accent1-100);

    /* Status Colors */
    --th-status-success-primary: var(--c-green-100);
    --th-status-success-secondary: var(--c-widget-background);
    --th-status-success-tertiary: var(--c-green-20);

    --th-status-pending-primary: var(--c-accent1-100);
    --th-status-pending-secondary: var(--c-widget-background);
    --th-status-pending-tertiary: var(--c-accent1-20);

    --th-status-error-primary: var(--c-red-100);
    --th-status-error-secondary: var(--c-widget-background);
    --th-status-error-tertiary: var(--c-red-20);

    --th-status-deleted-primary: var(--c-altred-100);
    --th-status-deleted-secondary: var(--c-widget-background);
    --th-status-deleted-tertiary: var(--c-altred-20);

    --th-status-na-primary: var(--c-white-60);
    --th-status-na-secondary: var(--c-widget-background);
    --th-status-na-tertiary: var(--c-white-10);

    /* Label Colors */
    --th-label-text: var(--c-white-60);
    --th-label-icon: var(--c-white-80);

    /* Shell Colors */
    --th-shell-icon: var(--c-white-100);
    --th-shell-button-text: var(--c-white-70);
    --th-shell-button-border: var(--c-white-20);
    --th-shell-button-border--hover: var(--c-white-20);
    --th-shell-button-background: transparent;
    --th-shell-button-background--hover: var(--c-white-10);

    /* Control Colors */
    --th-control-background: var(--c-white-5);
    --th-control-background-selected: var(--c-white-10);
    --th-control-border: var(--c-black-100);
    --th-control-selected: var(--c-accent2-100);
    --th-control-text: var(--c-white-60);

    /* Context Menu Colors */
    --th-contextmenu-background: var(--c-white-100);
    --th-contextmenu-border: var(--c-black-10);
    --th-contextmenu-text: var(--c-black-100);
    --th-contextmenu-icon: var(--c-black-100);
    --th-contextmenu-background--hover: var(--c-black-100);
    --th-contextmenu-text--hover: var(--c-white-100);
    --th-contextmenu-icon--hover: var(--c-white-100);
    --th-contextmenu-divider: var(--c-white-10);
}