/* Smartgrower Variables */
:root {
    /* ********************* Base Settings ****************************** */
    /* font-size: 62.5%; 1rem = 10px */ /* To use in the future if need a rem friendly system */
    font-size: 13px;

    /* ********************* Color System ****************************** */
    /* Core Brand Colors */
    --color-primary-darker: #080f20;
    --color-primary-dark: #001c30;
    --color-primary: #042b47;
    --color-primary-light: #013d67;
    --color-accent: #67c3b7;
    --color-accent-darker: color-mix(in srgb, var(--color-accent) 75%, black);

    /* Authentication Variables */
    --color-auth-ui-primary: #88b032;
    --color-auth-ui-text: #99997a;
    --color-auth-button-bg: #88b032;
    --color-auth-button-text: #042b47;
    --color-auth-input-bg: transparent;
    --color-auth-input-border: #88b032;
    --color-auth-input-text: #88b032;

    /* Text & UI Colors */
    --color-text-heading: #c0d8ea;
    --color-text-white: #ffffff;
    --color-text-black: #000000;

    /* Status Color System */
    --color-success: #89a92a;
    --color-success-light: #a4c422;
    --color-warning: #ffbe00;
    --color-warning-light: #d49e09;
    --color-danger: #e92f17;
    --color-danger-light: #b6251b;
    --color-info: #0088ce;
    --color-info-light: #2c9dbf;

    /* ********************* Typography System ************************** */
    --font-family: 'Nunito', sans-serif;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-bold: 700;

    --text-size-display: 42px; /* 42px */
    --text-size-heading: 18px; /* 18px */
    --text-size-body: 16px; /* 16px */
    --text-size-small: 13px; /* 13px */

    /* ********************* Border & Shape System ********************** */
    --border-radius: 19px; /* 19px */
    --border-radius-full: 100vmax;
    --border-radius-circle: 50%;

    --border-width-sm: 1px; /* 1px */
    --border-width-md: 2px; /* 2px */
    --border-width-lg: 3px; /* 3px */

    --border-color-light: rgba(192, 216, 234, 0.3);
    --border-color-dark: rgba(1, 28, 48, 0.7);

    /* ********************* Spacing System ***************************** */
    --space-xxs: 3px; /* 3px */
    --space-xs: 6px; /* 6px */
    --space-sm: 9px; /* 9px */
    --space-md: 12px; /* 12px */
    --space-lg: 18px; /* 18px */
    --space-xl: 24px; /* 24px */
    --space-xxl: 36px; /* 36px */
}