Color

:root {
/* Primary */
--color-uvu-green: #185c33; /* UPDATED - no more 275d38 */
--color-white: #ffffff;

/* Accents greens */
--color-wolverine-green: #008a40; /*replaces Kelly */
--color-valley-green: #78be3f; /*replaces light */
--color-meadow-green: #c5d97a; /*replaces Accent */
--color-seahaze-green: #c4d6c1; /* New no sub*/

/* Black and White & Dark (Web Only) */
--color-super-green: #212724;
--color-dark-green: #154734;
--color-black: #000000;
--color-dark-grey: #2b2b2b;
--color-grey: #8c8c8c;
--color-light-grey: #ededed;
--color-warm-grey: #f2f0eb;
--color-off-white: #f8f8f8;

/* RGB Values */
--color-uvu-green-rgb: 24, 92, 51;
--color-wolverine-green-rgb: 0, 138, 64;
--color-valley-green-rgb: 120, 190, 63;
--color-meadow-green-rgb: 197, 217, 122;
--color-seahaze-green-rgb: 196, 214, 193;

--color-super-green-rgb: 33, 39, 36;
--color-dark-green-rgb: 21, 71, 52;
--color-black-rgb: 0, 0, 0;
--color-dark-grey-rgb: 43, 43, 43;
--color-grey-rgb: 140, 140, 140;
--color-light-grey-rgb: 237, 237, 237;
--color-warm-grey-rgb: 242, 240, 235;
--color-white-rgb: 255, 255, 255;
--color-off-white-rgb: 248, 248, 248;
--color-sage-green-rgb: 0, 34, 0;
--color-brand-drift-rgb: 39, 93, 56; /* from #275d38 */
--alpha: 0.2;
--nav-alpha: 0.7;
--site-bg-color: #FBFBFB;
/* Notification colors */
--color-sage-green: #eff1ef; /*#00220010;*/
/* --color-sage-green: rgba(0, 34, 0, 0.06); */
--color-brand-drift: #275d38;
/* DARK MODE ADDON */
/* Theme semantic tokens (light defaults) */
--surface-0: var(--site-bg-color); /* page background */
--surface-1: var(--color-white); /* cards / panels */
--surface-2: var(--color-off-white); /* subtle panels */
--text-1: var(--color-dark-grey); /* primary text */
--text-2: var(--color-grey); /* muted text */
--border-1: var(--color-light-grey); /* dividers / borders */
--link: var(--color-uvu-green);
--link-hover: var(--color-wolverine-green);
}

Spacing

:root{
/* ----------------------------------- PADDING & MARGINS ADD */
--space-xxs: 0.222rem; /* 4px only use when to items next to each other add up to min 8px*/
--space-xs: 0.444rem; /* 8px */
--space-sm: 0.667rem; /* 12px */
--space-md: 0.889rem; /* 16px */
--space-lg: 1.333rem; /* 24px */
--space-xl: 2.222rem; /* 40px */
--no-space: 0;

/* ----------------------------------- Fluid spacing tokens */
--space-xxs-fluid: clamp(0.222rem, 0.5vw, 0.333rem); /* ~4–6px */
--space-xs-fluid: clamp(0.444rem, 1vw, 0.556rem); /* ~8–10px */
--space-sm-fluid: clamp(0.667rem, 2vw, 1.111rem); /* ~12–20px */
--space-md-fluid: clamp(0.889rem, 3vw, 2.222rem); /* ~16–40px */
--space-lg-fluid: clamp(1.333rem, 8vw, 4.444rem); /* ~24–80px */
--space-xl-fluid: clamp(2.222rem, 10vw, 6.666rem); /* ~40–120px */

--space-jumbo-sm-fluid: clamp(1.333rem, 14vw, 14rem);
--space-jumbo-md-fluid: clamp(2.222rem, 16vw, 16rem);
--space-jumbo-lg-fluid: clamp(3.333rem, 25vw, 20rem);

/* Grid gap */
--gap-xxs: var(--space-xxs-fluid);
--gap-xs: var(--space-xs-fluid);
--gap-sm: var(--space-sm-fluid);
--gap-md: var(--space-md-fluid);
--gap-lg: var(--space-lg-fluid);
--gap-xl: var(--space-xl-fluid);
/* ----------------------------------- END PADDING & MARGINS ADD */

}

Box Size

:root{
/* ================================
Border Sizes
================================ */
--bs-sm: 0.1111rem; /* 2px */
--bs-md: 0.2222rem; /* 4px */
--bs-lg: 0.3333rem; /* 6px */

--bs-sm-fluid: clamp(0.0556rem, 0.1vw, 0.1111rem); /* ~1px → ~2px */
--bs-md-fluid: clamp(0.1667rem, 0.3vw, 0.2222rem); /* ~3px → ~4px */
--bs-lg-fluid: clamp(0.2778rem, 0.4vw, 0.3333rem); /* ~5px → ~6px */

/* ================================
Border Radius
================================ */
--radius-sm: 0.2222rem; /* 4px */
--radius-md: 0.4444rem; /* 8px */
--radius-lg: 0.5556rem; /* 10px */
--radius-full: 9999px; /* Fully rounded (for pills, circles) */
/* ================================
Shadows
================================ */
/* Standard shadows (stronger contrast, softer blur) */
--shadow-sm: 0 2px 3px rgba(0, 0, 0, 0.28);
--shadow-md: 0 3px 6px rgba(0, 0, 0, 0.24);
--shadow-lg: 0 6px 12px rgba(0, 0, 0, 0.32);

/* Inset shadows (WCAG-safe for darker UI layers or light containers) */
--shadow-inset-sm: inset 0 2px 3px rgba(0, 0, 0, 0.28);
--shadow-inset-md: inset 0 3px 6px rgba(0, 0, 0, 0.24);
--shadow-inset-lg: inset 0 6px 12px rgba(0, 0, 0, 0.32);
}