: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 */
}

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

h1, h2, h3, h4, h5, h6, .logo {
  font-family: 'Montserrat', sans-serif;
}

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;
}

/* 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;
}

/* --- HEADER SPACE --- */
@media (max-width: 991px) { /* MOBILE */
  .header-space { height: 4.2rem; }
}

@media (min-width: 992px) { /* DESKTOPS */
  .header-space { height: 8.7rem; }
}
/* --- END OF HEADER SPACE --- */

/* MOBILE ONLY ( <768px ) */
@media (max-width: 767.98px) {
  .d-mobile-none { display: none !important; }
}

/* TABLET ONLY (768px–991.98px) */
@media (min-width: 768px) and (max-width: 991.98px) {
  .d-tablet-none { display: none !important; }
}

/* DESKTOP ONLY ( ≥992px ) */
@media (min-width: 992px) {
  .d-desktop-none { display: none !important; }
}

/* BOOTSTRAP'S BREAKPOINT */
@media (min-width: 576px) { /* PHONES (LANDSCAPE) */ }
@media (min-width: 768px) { /* TABLETS */ }
@media (min-width: 992px) { /* DESKTOPS */ }

/* Extra Small (xs) - <576px */
@media (max-width: 575.98px) { }

/* Small (sm) - ≥576px and <768px */
@media (min-width: 576px) and (max-width: 767.98px) { }

/* Medium (md) - ≥768px and <992px */
@media (min-width: 768px) and (max-width: 991.98px) { }

/* Large (lg) - ≥992px and <1200px */
@media (min-width: 992px) and (max-width: 1199.98px) { }

/* Extra Large (xl) - ≥1200px and <1400px */
@media (min-width: 1200px) and (max-width: 1399.98px) { }

/* XXL - ≥1400px */
@media (min-width: 1400px) { }