@import "../primitive/color.css";
:root {
    color-scheme: light;

    /* ==========================================================================
                               # DEFAULTS
    ========================================================================== */
    /* Globals */
    --app-background: var(--neutral-98);
    --sidebar-background: var(--neutral-99);
    --container-background: var(--neutral-99);
    --fill-logo-left: var(--neutral-gray-400);
    --fill-logo-right: var(--brand-tints-800);
    --modal-background: var(--neutral-gray-800-alpha-300A);

    /* Neutral */
    --background-neutral-default: var(--neutral-gray-800);
    --border-neutral-default: var(--neutral-85);
    --text-neutral-default: var(--neutral-gray-800);
    --text-neutral-light: var(--neutral-gray-400);
    --background-icon-neutral-default: var(--neutral-gray-100);
    --text-icon-neutral-default: var(--neutral-gray-500);
    --icon-neutral-default: var(--neutral-gray-600);

    /* Brand */
    --background-brand-default: var(--brand-tints-800);
    --background-brand-hover: var(--brand-tints-400);
    --border-brand-default: var(--brand-tints-400);
    /*--border-brand-hover: var();*/
    /*--text-brand-default: var(--text-neutral-default);*/
    --text-brand-hover: var(--app-background); /* match app background for now */
    --text-brand-underline: var(--brand-tints-400);

    /* Positive */
    --background-positive-default: var(--mint-tints-700);
    --background-positive-hover: var(--mint-shades-600);
    --border-positive-default: var(--mint-shades-600);
    --border-positive-hover: var(--mint-shades-200);
    --text-positive-default: var(--mint-shades-600); /* can be used on default bg */
    --text-positive-hover: var(--mint-tints-800);
    --icon-positive-default: var(--mint-shades-200);

    /* Warning */
    --background-warning-default: var(--yellow-tints-900);
    --background-warning-hover: var(--yellow-shades-200);
    --border-warning-default: var(--yellow-tints-base);
    --border-warning-hover: var(--yellow-tints-400);
    --text-warning-default: var(--yellow-shades-300);
    --text-warning-hover: var(--yellow-tints-700);
    --icon-warning-default: var(--yellow-tints-200);

    /* Danger */
    --background-danger-default: var(--mild-red-tints-900);
    --background-danger-hover: var(--mild-red-shades-300);
    --border-danger-default: var(--mild-red-tints-base);
    --border-danger-hover: var(--mild-red-tints-400);
    --text-danger-default: var(--mild-red-shades-200);
    --text-danger-hover: var(--mild-red-tints-800);
    --icon-danger-default: var(--mild-red-tints-200);
    --icon-danger-bold: var(--mild-red-shades-100);

    /* Info */
    --background-info-default: var(--brand-tints-800);
    --background-info-hover: var(--brand-shades-100);
    --border-info-default: var(--brand-tints-base);
    --border-info-hover: var(--brand-tints-400);
    --text-info-default: var(--brand-shades-100);
    --text-info-hover: var(--brand-tints-800);
    --icon-info-default: var(--brand-tints-400);
    --icon-info-hover: var(--brand-tints-200);

    /* Disabled */
    --background-disabled-default: var(--neutral-gray-200);
    --border-disabled-default: var(--neutral-gray-300);
    --text-disabled-default: var(--neutral-gray-300);
    --icon-disabled-default: var(--neutral-gray-300);

    /* ==========================================================================
                               # COMPONENTS
    ========================================================================== */
    /* Progress Bar Fills */
    --background-progress-bar-fill-bold: var(--brand-shades-200);
    --background-progress-bar-fill-semibold: var(--brand-tints-base);
    --background-progress-bar-fill-regular: var(--brand-tints-400);
    --background-progress-bar-fill-light: var(--brand-tints-700);

    /* Progress Bar & Panel & Chart */
    --background-positive-rank-bold: var(--mint-shades-600);
    --background-positive-rank-semibold: var(--mint-shades-500);

    --background-warning-rank-bold: var(--yellow-tints-base);
    --background-warning-rank-semibold: var(--yellow-tints-100);

    --background-danger-rank-bold: var(--mild-red-tints-base);
    --background-danger-rank-semibold: var(--mild-red-tints-100);

    --background-brand-rank-bold: var(--brand-shades-200);
    --background-brand-rank-semibold: var(--brand-shades-base);
    --background-brand-rank-regular: var(--brand-tints-200);

    --background-info-rank-bold: var(--brand-tints-base);
    --background-info-rank-semibold: var(--brand-tints-200);

    /* ==========================================================================
                                   # Borders
    ========================================================================== */
    /* ==========================================================================
                               ## Components
    ========================================================================== */
    /* Progress Bar & Panel & Chart */
    --border-positive-rank-bold: var(--mint-shades-600);
    --border-positive-rank-semibold: var(--mint-shades-500);
    --border-warning-rank-bold: var(--yellow-tints-base);
    --border-warning-rank-semibold: var(--yellow-tints-100);
    --border-danger-rank-bold: var(--mild-red-tints-base);
    --border-danger-rank-semibold: var(--mild-red-tints-100);
    --border-brand-rank-bold: var(--brand-shades-200);
    --border-brand-rank-semibold: var(--brand-shades-100);
    --border-info-rank-bold: var(--brand-tints-base);
    --border-info-rank-semibold: var(--brand-tints-200);

    /* ==========================================================================
                                   # Text
    ========================================================================== */
    /* ==========================================================================
                               ## Components
    ========================================================================== */
    /* Progress Bar & Panel */
    --text-positive-rank-bold: var(--mint-shades-600);
    --text-positive-rank-semibold: var(--mint-shades-500);
    --text-warning-rank-bold: var(--yellow-tints-base);
    --text-warning-rank-semibold: var(--yellow-tints-100);
    --text-danger-rank-bold: var(--mild-red-tints-base);
    --text-danger-rank-semibold: var(--mild-red-tints-100);

    /* ==========================================================================
                                   # Elevation
    ========================================================================== */
    --elevation-default:
        rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
        rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;

    /* ==========================================================================
                                   # Overlay
    ========================================================================== */
    --overlay-50: var(--neutral-gray-800-alpha-500A);
    --overlay-50-inverse: var(--neutral-white-alpha-500);
}

[data-theme="dark"] {
    /* Dark */
    color-scheme: dark;

    /* ==========================================================================
                               # DEFAULTS
    ========================================================================== */
    /* Default */
    --app-background: var(--neutral-gray-700);
    --sidebar-background: var(--neutral-gray-800);
    --container-background: var(--neutral-gray-800);

    /* Neutral */
    --border-neutral-default: var(--neutral-20);
    --text-neutral-default: var(--neutral-gray-base);
    --icon-neutral-default: var(--neutral-gray-base);

    /* Positive */
    --background-positive-default: var(--mint-shades-600);
    --background-positive-hover: var(--mint-shades-400);
    --border-positive-default: var(--mint-shades-400);
    --border-positive-hover: var(--mint-shades-base);
    --text-positive-default: var(--mint-tints-800);
    --text-positive-hover: var(--mint-shades-800);
    --icon-positive-default: var(--mint-shades-200);

    /* Warning */
    --background-warning-default: var(--yellow-shades-200);
    --background-warning-hover: var(--yellow-tints-300);
    --border-warning-default: var(--yellow-tints-400);
    --border-warning-hover: var(--yellow-tints-base);
    --text-warning-default: var(--yellow-tints-700);
    --text-warning-hover: var(--yellow-shades-300);
    --icon-warning-default: var(--yellow-tints-200);

    /* Danger */
    --background-danger-default: var(--mild-red-shades-300);
    --background-danger-hover: var(--mild-red-tints-600);
    --border-danger-default: var(--mild-red-tints-400);
    --border-danger-hover: var(--mild-red-tints-base);
    --text-danger-default: var(--mild-red-tints-800);
    --text-danger-hover: var(--mild-red-shades-200);
    --icon-danger-default: var(--mild-red-tints-200);
    --icon-danger-bold: var(--mild-red-shades-100);

    /* Info */
    --background-info-default: var(--brand-shades-100);
    --background-info-hover: var(--brand-tints-600);
    --border-info-default: var(--brand-tints-400);
    --border-info-hover: var(--brand-tints-base);
    --text-info-default: var(--brand-tints-800);
    --text-info-hover: var(--brand-shades-100);

    /* Disabled */
    --background-disabled-default: var(--neutral-gray-200);
    --border-disabled-default: var(--neutral-gray-300);
    --text-disabled-default: var(--neutral-gray-300);
    --icon-disabled-default: var(--neutral-gray-300);

    /* ==========================================================================
                                   # Elevation
    ========================================================================== */
    --elevation-default:
            /* FIX: Change hsla values to vars */
            inset 0 0 0.5px 1px hsla(0, 0%, 100%, 0.1),
            /* 2. shadow ring of mordor 👇 */
            0 0 0 1px hsla(230, 13%, 9%, 0.075),
            /* 3. multiple soft shadows bc why not 👇 */
            0 0.3px 0.4px hsla(230, 13%, 9%, 0.02),
            0 0.9px 1.5px hsla(230, 13%, 9%, 0.045),
            0 3.5px 6px hsla(230, 13%, 9%, 0.09);

    /* ==========================================================================
                                   # Overlay
    ========================================================================== */
    --overlay-50: var(--neutral-gray-800-alpha-500A);
    --overlay-50-inverse: var(--neutral-white-alpha-500);
}