:root {
    /* ----- COLOR PALETTE ----- */
    --primary: #007a3d;
    --primary-hover: #006736;
    --primary-canvas: #e6f4ee;
    --primary-outline-hover: #e6f4ee;

    --secondary: #ffff00;

    --background: #f8f9fa;
    --background-white: #ffffff;
    --background-muted: #e9ecef;
    --background-dark: #1b2e27;

    --border: #dee2e6;

    --text: #1e2d24;
    --text-white: #ffffff;
    --text-muted: #5c7265;

    --disabled: #adb5bd;
    --disabled-bg: #f1f3f5;
    
    --success: #3ca46c;
    --success-hover: #319059;
    --success-canvas: #e8f5ee;
    --success-outline-hover: #e8f5ee;

    --danger: #e04a4a;
    --danger-hover: #c73e3e;
    --danger-canvas: #fce9e9;
    --danger-outline-hover: #fce9e9;

    --warning: #ffd85b;
    --warning-hover: #f5c846;
    --warning-canvas: #fff9e3;
    --warning-outline-hover: #fff9e3;

    --info: #40c4d3;
    --info-hover: #35aebc;
    --info-canvas: #e4f8fb;
    --info-outline-hover: #e4f8fb;

    /* ----- BORDER RADIUS ----- */
    --radius-xs: 0.25rem;
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-pill: 9999px;
    --radius-circle: 50%;

    --radius-ios-icon: calc(100% * 0.15);
    --radius-samsung-icon: calc(100% * 0.10);

    --radius-base: var(--radius-md);
    --radius-card: var(--radius-lg);

    /* ----- FONT SIZES ----- */
    --font-xs: 0.75rem;       /* 12px */
    --font-sm: 0.875rem;      /* 14px */
    --font-base: 1rem;        /* 16px */
    --font-subtitle: 1.125rem;/* 18px */
    --font-lg: 1.25rem;       /* 20px */
    --font-xl: 1.5rem;        /* 24px */
    --font-2xl: 1.875rem;     /* 30px */
    --font-3xl: 2.25rem;     /* 36px */
    --font-4xl: 3rem;    /* display-5 */
    --font-5xl: 3.5rem;  /* display-4 */
    --font-6xl: 4rem;    /* display-3 */
    --font-7xl: 4.5rem;  /* display-2 */
    --font-8xl: 5rem;    /* display-1 */

    --lh-base: 1.5;       /* for body */
    --lh-heading: 1.2;    /* for h1-h6 */
}

html, body {
    background-color: var(--background) !important;
}

body {
    min-width: 360px;
    color: var(--text);
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 1rem;
    line-height: normal;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, .btn, nav {
    font-family: 'Poppins', sans-serif;
}

h1 { letter-spacing: 1px; }
h2 { letter-spacing: 0.75px; }
h3, h4 { letter-spacing: 0.5px; }
h5, h6, button, nav { letter-spacing: 0.25px; }

a {
    text-decoration: none;
}

.icon-space-sm { margin-right: 0.25rem; }
.icon-space    { margin-right: 0.5rem; }
.icon-space-lg { margin-right: 0.75rem; }

.icon-space-left-sm { margin-left: 0.25rem; }
.icon-space-left    { margin-left: 0.5rem; }
.icon-space-left-lg { margin-left: 0.75rem; }

.withOutline {
    outline: 1px dashed rgba(255, 0, 0, 0.6) !important;
}

.header-space {
    @media (min-width: 992px) { /* DESKTOPS */
        min-height: 9.16rem;
    }

    @media (max-width: 991.99px) { /* MOBILE */
        min-height: 4.04rem;
    }
}

/* Default Card CSS Style */
.card {
    background-color: var(--background-white) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    color: var(--text) !important;
} 

/* Consider moving to a global reset */
h1, h2, h3, h4, h5, h6,
small, p, span, a,
li, ul, ol, blockquote, label {
    margin: 0;
    padding: 0;
}