/* Maqcampo 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 ****************************** */
    /* Maqcampo Brand Colors */
    --color-primary-darker: #0C1E11;
    --color-primary-dark: #0F2609;
    --color-primary: #0B3E1A;
    --color-primary-light: #1B582D;
    --color-accent:#CEE699;
    --color-accent-darker:  color-mix(in srgb, var(--color-accent) 75%, black);

    /* Authentication Variables */
    --color-auth-ui-primary: #0C1E11;
    --color-auth-ui-text: #fff;
    --color-auth-button-bg: #0C1E11;
    --color-auth-button-text: #fff;
    --color-auth-input-bg: rgba(255,255,255,40%);
    --color-auth-input-border: #ECF2DF;
    --color-auth-input-text: #0C1E11;


    /* Text & UI Colors a7b6c9; */
    --color-text-heading: #ecf2df;
    /* --color-text-heading: red; */
    --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 */
}