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

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

:root {
    /*
        COLORS
        - the entire spectrum. Only use these colors, and only by their variable names.
    */
    --black: #000000;
    --red-1: #FAEBEC;
    --red-2: #E17A7D;
    --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-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;

    /*
        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;

    /*
        COLOR THEMING
        - If a theme ever needs to be applied, these variables can be modified to produce the desired effect.
        - Therefore, all color references in rules should reference these variables so that theme changes propagate correctly.
    */
    --color-primary: var(--red-6);
    --color-primary-light: var(--red-4);
    --color-secondary: var(--gray-10);
    --color-secondary-light: var(--gray-2);
    --color-success: var(--green-4);
    --color-danger: var(--red-5);
    --color-attention: var(--yellow-1);

    --color-fg-default: var(--color-secondary);
    --color-fg-default-contrast: white;
    --color-fg-subtle: var(--gray-6);
    --color-fg-muted: var(--gray-8);

    --color-bg-default: white;
    --color-bg-subtle: var(--gray-1);

    --color-border-default: var(--gray-5);
    --color-border-muted: var(--gray-2);

    /*
        THEMING - COMPONENTS
    */
    --color-link: var(--color-primary-light);
    --color-link-secondary: var(--gray-8);
    --color-input-border: var(--color-border-default);
    --color-input-disabled-bg: var(--gray-2);
    --color-form-text: var(--color-fg-muted);
    --color-button-primary-text: white;
    --color-button-primary-text-hover: var(--color-primary-light);
    --color-button-primary-background: var(--color-primary-light);
    --color-button-primary-background-hover: white;
    --color-button-primary-border-hover: var(--color-primary-light);
    --color-button-secondary-text: var(--color-primary-light);
    --color-button-secondary-text-hover: white;
    --color-button-secondary-background: white;
    --color-button-secondary-background-hover: var(--color-primary-light);
    --color-button-secondary-border: var(--color-primary-light);
    --color-button-tertiary-text: var(--color-fg-default);
    --color-button-tertiary-background: var(--color-bg-default);
    --color-button-tertiary-hover-background: var(--color-bg-subtle);
    --color-button-tertiary-border: var(--color-border-default);
    --color-button-clear-text-hover: var(--color-fg-subtle);
    --color-button-icon-background-hover: var(--color-bg-subtle);
    --color-header-menu-link: black;
    --color-header-menu-link-active: var(--color-primary-light);
    --color-carousel-button: var(--gray-7);
    --color-carousel-nav-item: var(--gray-6);
    --color-carousel-nav-item-active: var(--color-primary);
    --color-layout-sidebar-background: var(--gray-1);
    --color-tree-view-item-fg-active: white;
    --color-tree-view-item-active: var(--color-primary);
    --color-tree-view-item-parent-active: var(--color-secondary-light);
    --color-tree-view-item-hover: var(--color-secondary-light);
    --color-tree-view-content: var(--color-fg-default);
    --color-box-header: var(--color-secondary-light);
    --color-box-border: var(--color-border-default);
    --color-box-row-border: var(--color-border-muted);
    --color-box-header-primary: var(--color-primary);
    --color-box-header-secondary: var(--gray-9);
    --color-divider: var(--color-border-default);
    --color-divider-subtle: var(--color-border-muted);
    --color-loading: var(--color-primary);
    --color-tabular-bg: var(--color-bg-default);
    --color-tabular-border: var(--color-border-default);
    --color-tabular-row-border: var(--color-border-default);
    --color-tabular-row-border-simple: var(--color-border-muted);
    --color-tabular-sticky-cell-bg: var(--color-bg-subtle);
    --color-drawer-background: var(--color-layout-sidebar-background);
    --color-footer: black;
    --color-cookie-consent-btn: white;
    --color-bg-scroll-top: var(--color-primary);
    --color-bg-scroll-top-hover: var(--red-7);
    --color-bg-toast: var(--color-bg-default);
    --color-border-toast: var(--color-border-default);
    --color-toast-default: var(--color-primary);
    --color-toast-info: var(--blue-6);
    --color-toast-danger: var(--color-danger);
    --color-toast-warn: var(--yellow-4);
    --color-toast-success: var(--green-6);

    --color-desc-list-item-border: var(--color-border-muted);
    --color-bg-desc-list-label: var(--color-bg-subtle);
    --color-notice-attention-bg: var(--color-attention);
    --color-notice-attention-text: var(--color-fg-default);
    --color-notice-attention-border: var(--yellow-3);
    --color-notice-attention-btn: var(--yellow-6);
    --color-notice-attention-btn-hover-bg: var(--yellow-2);
    --color-notice-attention-important-bg: var(--yellow-2);
    --color-notice-attention-important-text: var(--color-fg-default);
    --color-notice-attention-important-border: var(--yellow-4);
    --color-notice-attention-important-btn: var(--yellow-8);
    --color-notice-attention-important-btn-hover-bg: var(--yellow-3);
    --color-notice-danger-bg: var(--red-1);
    --color-notice-danger-text: var(--color-fg-default);
    --color-notice-danger-border: var(--red-3);
    --color-notice-danger-btn: var(--red-8);
    --color-notice-danger-btn-hover-bg: var(--red-2);
    --color-notice-danger-important-bg: var(--color-danger);
    --color-notice-danger-important-text: var(--color-fg-default-contrast);
    --color-notice-danger-important-border: var(--red-6);
    --color-notice-danger-important-btn: var(--color-fg-default-contrast);
    --color-notice-danger-important-btn-hover-bg: var(--red-6);
    --color-notice-success-bg: var(--green-1);
    --color-notice-success-text: var(--color-fg-default);
    --color-notice-success-border: var(--green-3);
    --color-notice-success-btn: var(--green-8);
    --color-notice-success-btn-hover-bg: var(--green-2);
    --color-notice-success-important-bg: var(--color-success);
    --color-notice-success-important-text: var(--color-fg-default-contrast);
    --color-notice-success-important-border: var(--green-6);
    --color-notice-success-important-btn: var(--color-fg-default-contrast);
    --color-notice-success-important-btn-hover-bg: var(--green-3);
    --color-notice-info-bg: var(--blue-1);
    --color-notice-info-text: var(--color-fg-default);
    --color-notice-info-border: var(--blue-3);
    --color-notice-info-btn: var(--blue-8);
    --color-notice-info-btn-hover-bg: var(--blue-2);
    --color-notice-info-icon: var(--blue-5);
    --color-notice-attention-icon: var(--yellow-5);
    --color-notice-danger-icon: var(--color-danger);
    --color-notice-success-icon: var(--color-success);
    --color-notice-attention-important-icon: var(--yellow-6);
    --color-notice-danger-important-icon: white;
    --color-notice-success-important-icon: white;
    --color-list-item-hover: var(--color-bg-subtle);
    --color-check-checked: var(--color-primary);
    --color-check-checked-label: var(--color-bg-subtle);
    --color-radio-checked: var(--color-primary);
    --color-radio-checked-label: var(--color-bg-subtle);


    /*
        LAYOUT/COMPONENT VARIABLES
    */

    /*
        Used to offset content from the top of the page to accommodate the sticky header.
    */
    --header-height: 0px;
    --top-offset: var(--header-height);

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

    --drawer-z-index: var(--z-drawer);
    --r-menu-z-index: var(--z-menu);
    --r-menu-font-family: var(--ff-primary);

    --scroll-top-btn-z-index: var(--z-active);
    --sidebar-top-offset: var(--top-offset);
    --sidebar-width: 256px;
    --toggle-element-viewport-top-offset: var(--top-offset);

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

    --r-badge-padding: 0 var(--space-2);
    --r-badge-border-radius: var(--border-radius-sm);
    --r-badge-color-bg: var(--color-bg-subtle);
    --r-badge-color-bg-info: var(--blue-1);
    --r-badge-color-bg-danger: var(--red-1);
    --r-badge-color-bg-success: var(--green-1);
    --r-badge-color-bg-warn: var(--yellow-1);
    --r-badge-color-bg-muted: var(--gray-2);

    --r-popover-z-index: var(--z-popover);
    --r-popover-color-bg: white;
    --r-popover-color-border: white;
    --r-popover-color: var(--color-fg-default);
    --r-popover-ff: var(--ff-primary);
    --r-popover-fs: var(--fs-f4);
    --r-popover-lh: var(--fs-f4-lh);
    --r-popover-padding: var(--space-2) var(--space-4);

    --r-tooltip-z-index: var(--z-popover);
    --r-tooltip-color-bg: var(--gray-9);
    --r-tooltip-color-border: var(--gray-9);
    --r-tooltip-color: var(--color-fg-default-contrast);
    --r-tooltip-ff: var(--ff-primary);
    --r-tooltip-fs: var(--fs-f5);
    --r-tooltip-lh: var(--fs-f5-lh);
    --r-tooltip-padding: var(--space-2) var(--space-3);

    --r-tooltip-max-width: var(--space-s-3);

    /*
        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.

        The design system uses the following spaces in its scale:
        --space-0
        --space-1
        --space-2
        --space-3
        --space-4
        --space-6
        --space-8
        --space-10
        --space-12
        --space-16
        --space-20
        --space-24
        --space-28
        --space-32

        Try to not stray from this scale unless there's a good reason.

        Responsive spacing classes are available that utilize this scale.
        Margin and Padding spacing utilities:
        - .m- = margin
        - .mx- = left and right
        - .my- = top and bottom
        - .mt- = top
        - .mr- = right
        - .mb- = bottom
        - .ml- = left

        The number * 4 is equivalent to the number of pixels.
        i.e. space-6 -> 6 * 4 = 24px
             mr-4    -> margin-right: 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-nav: 9000;
    --z-drawer: 9100;
    --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;
}

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