/* Used with preprocessors and contain global font, colors definitions, etc. */

:root {
    /* ----- Start light mode ----- */

    /* Light theme colors */
    --clr-primary-a0: #e6673f;
    --clr-primary-a10: #dd623e;
    --clr-primary-a20: #d45d3d;
    --clr-primary-a30: #cb583c;
    --clr-primary-a40: #c2543b;
    --clr-primary-a50: #b9503a;

    --clr-secondary-a0: #313131;
    --clr-secondary-a10: #393939;
    --clr-secondary-a20: #414141;
    --clr-secondary-a30: #4a4a4a;
    --clr-secondary-a40: #535353;
    --clr-secondary-a50: #5b5b5b;

    /* Light theme surface colors */
    --clr-surface-a0: #ffffff;
    --clr-surface-a10: #f0f0f0;
    --clr-surface-a20: #e1e1e1;
    --clr-surface-a30: #d3d3d3;
    --clr-surface-a40: #c5c5c5;
    --clr-surface-a50: #b6b6b6;

    /* Light theme text colors */
    --clr-text-primary: #000000;
    --clr-text-secondary: #ffffff;
    --clr-text-tertiary: #b6b6b6;

    /* Light theme border colors */
    --clr-border-primary-a0: #313131;
    --clr-border-secondary-a0: #b6b6b6;

    /* Light theme status colors */
    --clr-bg-error: #d95c5c;
    --clr-bg-warning: #f0ad4e;
    --clr-bg-success: #5cb85c;
    --clr-bg-info: #5bc0de;
    /* ----- End light mode ----- */

    /* ----- Start dark mode ----- */
    .dark {
        /** Dark theme colors */
        --clr-primary-a0: #e6673f;
        --clr-primary-a10: #eb7554;
        --clr-primary-a20: #ef8369;
        --clr-primary-a30: #f3917e;
        --clr-primary-a40: #f7a093;
        --clr-primary-a50: #fbaeaa;        

        --clr-secondary-a0: #313131;
        --clr-secondary-a10: #454545;
        --clr-secondary-a20: #595959;
        --clr-secondary-a30: #6f6f6f;
        --clr-secondary-a40: #868686;
        --clr-secondary-a50: #9d9d9d;

        /** Dark theme surface colors */
        --clr-surface-a0: #121212;
        --clr-surface-a10: #282828;
        --clr-surface-a20: #3f3f3f;
        --clr-surface-a30: #575757;
        --clr-surface-a40: #717171;
        --clr-surface-a50: #8b8b8b;

        /* Dark theme text colors */
        --clr-text-primary: #ffffff;
        --clr-text-secondary: #000000;
        --clr-text-tertiary: #8b8b8b;

        /* Dark theme border colors */
        --clr-border-primary-a0: #313131;
        --clr-border-secondary-a0: #8b8b8b;

        /** Dark theme status colors */
        --clr-bg-error: #c0392b;
        --clr-bg-warning: #f39c12;
        --clr-bg-success: #2e7d32;
        --clr-bg-info: #1565c0;
    }
    /* ----- End dark mode ----- */

    /* General */
    --font-family: 'Roboto', sans-serif;
    --line-height: 1.5;

    /* Sizing */
    --spacing-small: 0.625rem; /* 10px */
    --spacing-medium: 1.25rem; /* 20px */
    --spacing-large: 2.5rem; /* 40px */

    --font-size: 1rem;
    --font-size-small: 0.875rem;

    --icon-size: 1.5rem;
    --icon-size-small: 1rem;

    /* Box shadow */
    --box-shadow: 4px 6px 12px rgba(0, 0, 0, 0.15), 2px 3px 6px rgba(0, 0, 0, 0.1);
    --box-shadow-light: 0 4px 6px rgba(0, 0, 0, 0.1);

    /* Border radius */
    --border-radius: 10px;
    --border-radius-small: 5px;

    /* Transitions */
    --animation-duration: 0.3s;
    --transition-timing: ease;
}