/*
 * Gearset design tokens
 * Copied from the Gearset Design Guide. Keep this file in sync with the guide;
 * put site-specific styling in styles.css, not here.
 */
:root {
    /* Spacing Sizes */
    --space-xxs: 2px;
    --space-xs: 4px;
    --space-s: 8px;
    --space-m: 16px;
    --space-l: 24px;
    --space-xl: 32px;
    --space-xxl: 48px;

    /* Spacing Tokens */
    --token-space-0: 0;
    --token-space-025: 2px;
    --token-space-050: 4px;
    --token-space-075: 6px;
    --token-space-100: 8px;
    --token-space-150: 12px;
    --token-space-200: 16px;
    --token-space-250: 20px;
    --token-space-300: 24px;
    --token-space-400: 32px;
    --token-space-500: 40px;
    --token-space-600: 48px;
    --token-space-800: 64px;
    --token-space-1000: 80px;

    /* Border Radius */
    --border-radius-xs: 2px;
    --border-radius-s: 4px;
    --border-radius-m: 8px;
    --border-radius-l: 16px;

    /* Greys */
    --grey-00: #f6f7f9;
    --grey-10: #f1f2f4;
    --grey-20: #dadee2;
    --grey-30: #bdc5cb;
    --grey-40: #9ba7b0;
    --grey-50: #7c8c98;
    --grey-60: #61707b;
    --grey-70: #4e5b64;
    --grey-90: #282f33;

    /* Black & White */
    --black: #1b1f23;
    --white: #ffffff;

    /* Blues */
    --blue-00: #f6fbfe;
    --blue-10: #e7f5fd;
    --blue-20: #c6e6fa;
    --blue-30: #93d0f6;
    --blue-40: #5ab7f2;
    --blue-60: #0f74b3;
    --blue-70: #0c6297;
    --blue-80: #09466c;

    /* Purples */
    --purple-00: #fcf5ff;
    --purple-10: #f8e7fe;
    --purple-20: #edc5fc;
    --purple-60: #a10bd5;
    --purple-70: #7708a0;
    --purple-80: #50066b;

    /* Greens */
    --green-10: #e9fbf2;
    --green-30: #9fefc6;
    --green-50: #2cdd82;
    --green-70: #36b674;
    --green-80: #16884d;
    --green-90: #0f5c34;

    /* Oranges */
    --orange-10: #fff5e6;
    --orange-20: #ffe8c2;
    --orange-30: #ffd58f;
    --orange-40: #ffc25d;
    --orange-50: #feae2a;
    --orange-60: #e58f01;
    --orange-80: #9d6301;

    /* Reds */
    --red-10: #fee7e9;
    --red-30: #f9949d;
    --red-60: #d50b1c;
    --red-70: #a00815;
    --red-80: #6b0510;

    /* Brand */
    --gs-yellow: #ffd35c;
    --gs-navy: #232e54;
    --gs-ent-navy: #002446;

    /* Functional: Foregrounds */
    --fg-default: var(--grey-90);
    --fg-muted: var(--grey-60);
    --fg-emphasis: var(--white);
    --fg-primary: var(--blue-60);
    --fg-success: var(--green-80);
    --fg-warning: var(--orange-80);
    --fg-danger: var(--red-60);
    --fg-highlight: var(--purple-70);

    /* Functional: Backgrounds */
    --bg-default: var(--white);
    --bg-subtlest: var(--grey-00);
    --bg-subtle: var(--grey-10);
    --bg-subtle-hover: var(--grey-20);
    --bg-emphasis: var(--black);
    --bg-primary: var(--blue-10);
    --bg-success: var(--green-10);
    --bg-warning: var(--orange-10);
    --bg-danger: var(--red-10);
    --bg-highlight: var(--purple-10);

    /* Page Backgrounds */
    --bg-header: #2a303b;
    --bg-footer: #2a303b;
    --bg-navpanel: #393d49;
    --bg-table-header: var(--grey-00);

    /* Functional: Borders */
    --border-default: var(--grey-30);
    --border-muted: var(--grey-20);
    --border-primary: var(--blue-30);
    --border-success: var(--green-30);
    --border-warning: var(--orange-30);
    --border-danger: var(--red-30);

    /* Buttons: Primary */
    --btn-primary-fg: var(--white);
    --btn-primary-bg: var(--blue-60);
    --btn-primary-hover-bg: var(--blue-70);
    --btn-primary-danger-bg: var(--red-60);
    --btn-primary-danger-hover-bg: var(--red-70);

    /* Buttons: Outline */
    --btn-outline-fg: var(--blue-60);
    --btn-outline-bg: var(--white);
    --btn-outline-border: var(--blue-60);
    --btn-outline-hover-bg: var(--blue-10);
    --btn-outline-danger-fg: var(--red-60);
    --btn-outline-danger-border: var(--red-60);
    --btn-outline-danger-hover-bg: var(--red-10);

    /* Buttons: Ghost */
    --btn-ghost-fg: var(--blue-70);
    --btn-ghost-hover-bg: var(--blue-10);
    --btn-ghost-danger-fg: var(--red-60);
    --btn-ghost-danger-hover-bg: var(--red-10);

    /* Buttons: Disabled */
    --btn-disabled-fg: var(--grey-50);
    --btn-disabled-bg: var(--grey-20);
    --btn-disabled-border: var(--grey-20);

    /* Inputs */
    --input-fg: var(--fg-default);
    --input-fg-placeholder: var(--grey-40);
    --input-border: var(--grey-40);
    --input-border-active: var(--blue-60);
    --input-border-outline-active: var(--blue-10);
    --input-border-error: var(--red-70);

    /* Alerts */
    --alert-error-bg: var(--red-10);
    --alert-error-border: var(--red-60);
    --alert-warning-bg: var(--orange-10);
    --alert-warning-border: var(--orange-50);
    --alert-success-bg: var(--green-10);
    --alert-success-border: var(--green-50);
    --alert-information-bg: var(--blue-10);
    --alert-information-border: var(--blue-60);

    /* Shadows */
    --shadow-primary: 0px 0px 0px 3px rgb(15, 116, 179, 0.16);
    --shadow-secondary: 0px 0px 0px 3px rgb(97, 112, 123, 0.16);
    --shadow-danger: 0px 0px 0px 3px rgb(213, 11, 28, 0.16);
    --shadow-popup: 0px 8px 8px rgb(0, 0, 0, 0.16);

    /* Font stacks */
    --font-sans: InterVariable, Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI',
        Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
    --font-mono: Consolas, 'Liberation Mono', Menlo, Courier, monospace;
}