/*
    GLOBAL COLORS, FONTS, THEMES, OTHER SETTINGS
    - no rules should be written here
*/

/*
    BREAKPOINTS:
    - sm: <544px
    - ms: 544px - 768px
    - md: 768px - 1008px
    - lg: >1008px
*/

:root {
    /**
        Design Tokens
    */

    /* Primitive color tokens */

    --black: #000000;
    --red-1: #FAEBEC;
    --red-2: #F0A3A6;
    --red-3: #D9595D;
    --red-4: #C52133;
    --red-5: #B72A2E;
    --red-6: #871f23;
    --red-7: #741A1D;
    --red-8: #531315;
    --red-9: #320B0D;
    --red-10: #110404;
    --gray-1: #f5f5f5;
    --gray-2: #e6e5e5;
    --gray-3: #d7d5d5;
    --gray-3-rgb: 215, 213, 213;
    --gray-4: #c3c1c1;
    --gray-5: #afacac;
    --gray-6: #9b9797;
    --gray-7: #878282;
    --gray-8: #686464;
    --gray-9: #3e3c3c;
    --gray-10: #120605;
    --blue-1: #ddf4ff;
    --blue-2: #b6e3ff;
    --blue-3: #80ccff;
    --blue-4: #54aeff;
    --blue-5: #218bff;
    --blue-6: #0969da;
    --blue-7: #0550ae;
    --blue-8: #033d8b;
    --blue-9: #0a3069;
    --blue-10: #002155;
    --green-1: #dafbe1;
    --green-2: #aceebb;
    --green-3: #6fdd8b;
    --green-4: #4ac26b;
    --green-5: #2da44e;
    --green-6: #1a7f37;
    --green-7: #116329;
    --green-8: #044f1e;
    --green-9: #003d16;
    --green-10: #002d11;
    --yellow-1: #fff8c5;
    --yellow-2: #fae17d;
    --yellow-3: #eac54f;
    --yellow-4: #d4a72c;
    --yellow-5: #bf8700;
    --yellow-6: #9a6700;
    --yellow-7: #7d4e00;
    --yellow-8: #633c01;
    --yellow-9: #4d2d00;
    --yellow-10: #3b2300;
    --orange-1: #fff1e5;
    --orange-2: #ffd8b5;
    --orange-3: #ffb77c;
    --orange-4: #fb8f44;
    --orange-5: #e16f24;
    --orange-6: #bc4c00;
    --orange-7: #953800;
    --orange-8: #762c00;
    --orange-9: #5c2200;
    --orange-10: #471700;
    --purple-1: #fbefff;
    --purple-2: #ecd8ff;
    --purple-3: #d8b9ff;
    --purple-4: #c297ff;
    --purple-5: #a475f9;
    --purple-6: #8250df;
    --purple-7: #6639ba;
    --purple-8: #512a97;
    --purple-9: #3e1f79;
    --purple-10: #2e1461;
    --pink-1: #ffeff7;
    --pink-2: #ffd3eb;
    --pink-3: #ffadda;
    --pink-4: #ff80c8;
    --pink-5: #e85aad;
    --pink-6: #bf3989;
    --pink-7: #99286e;
    --pink-8: #772057;
    --pink-9: #611347;
    --pink-10: #4d0336;
    --coral-1: #FFF0EB;
    --coral-2: #FFD6CC;
    --coral-3: #FFB4A1;
    --coral-4: #FD8C73;
    --coral-5: #EC6547;
    --coral-6: #C4432B;
    --coral-7: #9E2F1C;
    --coral-8: #801F0F;
    --coral-9: #691105;
    --coral-10: #510901;

    /* Theme Tokens */

    --color-primary: var(--red-6);
    --color-primary-light: var(--red-4);

    --color-neutral-0: white;
    --color-neutral-10: black;
    --color-success: var(--green-4);
    --color-warn: var(--yellow-4);
    --color-danger: var(--red-5);
    --color-info: var(--blue-8);

    --color-fg-default: var(--gray-10);
    --color-fg-default-contrast: white;
    --color-fg-muted: var(--gray-7);
    --color-fg-light: var(--gray-5);
    --color-fg-success: var(--color-success);
    --color-fg-danger: var(--color-danger);
    --color-fg-warn: var(--color-warn);
    --color-fg-info: var(--color-info);

    --color-bg-default: var(--color-neutral-0);
    --color-bg-muted: var(--gray-1);
    --color-bg-emphasis: var(--gray-9);
    --color-bg-success: var(--green-1);
    --color-bg-success-emphasis: var(--color-success);
    --color-bg-danger: var(--red-1);
    --color-bg-danger-emphasis: var(--color-danger);
    --color-bg-warn: var(--yellow-1);
    --color-bg-warn-emphasis: var(--yellow-3);
    --color-bg-info: var(--blue-1);

    --color-border-default: var(--gray-3);
    --color-border-muted: var(--gray-2);
    --color-border-emphasis: var(--gray-6);

    /* Contextual Tokens */

    --box-padding-x: var(--space-4);
    --box-padding-y: var(--space-2);

    --control-color-border: var(--color-border-default);
    --control-color-bg-disabled: var(--gray-2);
    --control-color-fg-disabled: var(--gray-4);
    --control-height-xs: var(--space-6);
    --control-height-sm: var(--space-8);
    --control-height-md: var(--space-10);
    --control-padding-x-xs: var(--space-2);
    --control-padding-x-sm: var(--space-2);
    --control-padding-x-md: var(--space-3);
    --control-padding-y-xs: calc((var(--control-height-xs) - var(--fs-f5-lh) - (var(--border-width-default) * 2)) / 2);
    --control-padding-y-sm: calc((var(--control-height-sm) - var(--fs-f4-lh) - (var(--border-width-default) * 2)) / 2);
    --control-padding-y-md: calc((var(--control-height-md) - var(--fs-f4-lh) - (var(--border-width-default) * 2)) / 2);
    --control-label-color-fg: var(--color-fg-default);

    --link-color-fg: var(--color-primary-light);

    --table-color-bg: var(--color-bg-default);
    --table-color-border: var(--color-border-default);
    --table-row-color-border: var(--color-border-default);
    --table-row-simple-color-border: var(--color-border-muted);
    --table-header-color-bg: var(--color-bg-muted);
    --table-footer-color-bg: var(--color-bg-muted);
    --table-cell-color-fg-incomplete: var(--color-fg-muted);

    /*
        SPACING

        Scale based on an 8-pt grid system
        - One increment of 4px for fine-tuned adjustments.
        - Then increments of 8px until hitting 48px, which then turn into increments of 16px.
    */
    --space-0: 0;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;
    --space-28: 112px;
    --space-32: 128px;
    --space-48: 192px;
    --space-64: 256px;
    --space-80: 320px;

    --space-s-full: 1280px;
    --space-s-step: calc(var(--space-s-full) / 12);
    --space-s-1: calc(var(--space-s-step) * 1);
    --space-s-2: calc(var(--space-s-step) * 2);
    --space-s-3: calc(var(--space-s-step) * 3);
    --space-s-4: calc(var(--space-s-step) * 4);
    --space-s-5: calc(var(--space-s-step) * 5);
    --space-s-6: calc(var(--space-s-step) * 6);
    --space-s-7: calc(var(--space-s-step) * 7);
    --space-s-8: calc(var(--space-s-step) * 8);
    --space-s-9: calc(var(--space-s-step) * 9);
    --space-s-10: calc(var(--space-s-step) * 10);
    --space-s-11: calc(var(--space-s-step) * 11);

    --space-btns: var(--space-1);
    --space-form-fields: var(--space-4);

    /*
        Z-INDEX SCALE
     */
    --z-hide: -1;
    --z-base: 0;
    --z-table-header: 2;
    --z-active: 50;

    --z-popover: 1000;
    --z-menu: 1100;

    --z-subdrawer: 9150; /* For drawers that should appear under the header but over page content. */
    --z-subheader: 9175;
    --z-header: 9200;
    --z-drawer: 9300;
    --z-dialog: 9500;
    --z-toast: 9600;
    --z-overlay: 9999;

    /**
        OPACITY SCALE
     */
    --o-100: 1;
    --o-75: 0.75;
    --o-50: 0.50;
    --o-25: 0.25;

    /**
        BORDER SCALE
     */
    --border-radius-sm: 2px;
    --border-radius-md: 4px;
    --border-radius-lg: 6px;
    --border-radius-full: 9999px;
    --border-width-default: 1px;

    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);

    /*
        FONTS
    */
    --ff-primary: 'Open Sans', sans-serif;
    --fs-h1: 2rem;
    --fs-h1-lh: 1.25em;
    --fs-h2: 1.625rem;
    --fs-h2-lh: 1.25em;
    --fs-h3: 1.375rem;
    --fs-h3-lh: 1.5em;
    --fs-h4: 1.125rem;
    --fs-h4-lh: 1.5em;
    --fs-f4: 1rem;
    --fs-f4-lh: 1.5em;
    --fs-f5: 0.875rem;
    --fs-f5-lh: 1.5em;
    --fs-f6: 0.75rem;
    --fs-f6-lh: 1.5em;
    --fs-f7: 0.625rem;
    --fs-f7-lh: 1.5em;

    /**
        MISC
     */

    /* Used to offset content from the top of the page to accommodate a sticky header. */
    --top-offset: 0;

    /* Prevent scrolled-to elements from being flush against the view border. */
    --scroll-offset-padding: 16px;
}

@media (min-width: 768px) {
    :root {
        --fs-h1: 2.5rem;
        --fs-h2: 2rem;
        --fs-h3: 1.5rem;
        --fs-h4: 1.25rem;
    }
}