:root {
    --primary-rgb: 189, 208, 147;
    --bg-primary: #fcfdfa;
    --surface-primary: #f2f6e9;
    --subtle-primary: #e8efd9;
    --border-primary: #dee8c9;
    --muted-primary: #d7e3be;
    --base-primary: #bdd093;
    --primary-rgb: 189, 208, 147;
    --hover-primary: #a1b17d;
    --text-primary: #8e9c6e;
    --active-primary: #7b8760;
    --heading-primary: #5f684a;
    --dark-primary: #424933;
    --secondary-rgb: 141, 140, 226;
    --bg-secondary: #f9f9fe;
    --surface-secondary: #e8e8f9;
    --subtle-secondary: #d7d7f5;
    --border-secondary: #c6c6f1;
    --muted-secondary: #bbbaee;
    --base-secondary: #8d8ce2;
    --secondary-rgb: 141, 140, 226;
    --hover-secondary: #7877c0;
    --text-secondary: #6a69aa;
    --active-secondary: #5c5b93;
    --heading-secondary: #474671;
    --dark-secondary: #31314f;
    --tertiary-rgb: 147, 189, 208;
    --bg-tertiary: #fafcfd;
    --surface-tertiary: #e9f2f6;
    --subtle-tertiary: #d9e8ef;
    --border-tertiary: #c9dee8;
    --muted-tertiary: #bed7e3;
    --base-tertiary: #93bdd0;
    --tertiary-rgb: 147, 189, 208;
    --hover-tertiary: #7da1b1;
    --text-tertiary: #6e8e9c;
    --active-tertiary: #607b87;
    --heading-tertiary: #4a5f68;
    --dark-tertiary: #334249;
    --accent-rgb: 189, 208, 147;
    --bg-accent: #fcfdfa;
    --surface-accent: #f2f6e9;
    --subtle-accent: #e8efd9;
    --border-accent: #dee8c9;
    --muted-accent: #d7e3be;
    --base-accent: #bdd093;
    --accent-rgb: 189, 208, 147;
    --hover-accent: #a1b17d;
    --text-accent: #8e9c6e;
    --active-accent: #7b8760;
    --heading-accent: #5f684a;
    --dark-accent: #424933;
    --neutral-rgb: 181, 185, 172;
    --bg-neutral: #f5f5f4;
    --surface-neutral: #edeeec;
    --subtle-neutral: #e1e2df;
    --border-neutral: #d2d4ce;
    --muted-neutral: #c3c6be;
    --base-neutral: #b5b9ac;
    --neutral-rgb: 181, 185, 172;
    --hover-neutral: #939985;
    --text-neutral: #6f7660;
    --active-neutral: #4b503f;
    --heading-neutral: #26291e;
    --dark-neutral: #13150f;
    --base-white: #FFFFFF;
    --white-rgb: 255, 255, 255;
    --white-rgb: 255, 255, 255;
    --base-black: #000000;
    --black-rgb: 0, 0, 0;
    --black-rgb: 0, 0, 0;

    /* Alpha Color Variables */
    --primary-10: rgba(var(--primary-rgb), 0.10);
    --primary-20: rgba(var(--primary-rgb), 0.20);
    --primary-30: rgba(var(--primary-rgb), 0.30);
    --primary-40: rgba(var(--primary-rgb), 0.40);
    --primary-50: rgba(var(--primary-rgb), 0.50);
    --primary-60: rgba(var(--primary-rgb), 0.60);
    --primary-70: rgba(var(--primary-rgb), 0.70);
    --primary-80: rgba(var(--primary-rgb), 0.80);
    --primary-90: rgba(var(--primary-rgb), 0.90);
    --secondary-10: rgba(var(--secondary-rgb), 0.10);
    --secondary-20: rgba(var(--secondary-rgb), 0.20);
    --secondary-30: rgba(var(--secondary-rgb), 0.30);
    --secondary-40: rgba(var(--secondary-rgb), 0.40);
    --secondary-50: rgba(var(--secondary-rgb), 0.50);
    --secondary-60: rgba(var(--secondary-rgb), 0.60);
    --secondary-70: rgba(var(--secondary-rgb), 0.70);
    --secondary-80: rgba(var(--secondary-rgb), 0.80);
    --secondary-90: rgba(var(--secondary-rgb), 0.90);
    --tertiary-10: rgba(var(--tertiary-rgb), 0.10);
    --tertiary-20: rgba(var(--tertiary-rgb), 0.20);
    --tertiary-30: rgba(var(--tertiary-rgb), 0.30);
    --tertiary-40: rgba(var(--tertiary-rgb), 0.40);
    --tertiary-50: rgba(var(--tertiary-rgb), 0.50);
    --tertiary-60: rgba(var(--tertiary-rgb), 0.60);
    --tertiary-70: rgba(var(--tertiary-rgb), 0.70);
    --tertiary-80: rgba(var(--tertiary-rgb), 0.80);
    --tertiary-90: rgba(var(--tertiary-rgb), 0.90);
    --accent-10: rgba(var(--accent-rgb), 0.10);
    --accent-20: rgba(var(--accent-rgb), 0.20);
    --accent-30: rgba(var(--accent-rgb), 0.30);
    --accent-40: rgba(var(--accent-rgb), 0.40);
    --accent-50: rgba(var(--accent-rgb), 0.50);
    --accent-60: rgba(var(--accent-rgb), 0.60);
    --accent-70: rgba(var(--accent-rgb), 0.70);
    --accent-80: rgba(var(--accent-rgb), 0.80);
    --accent-90: rgba(var(--accent-rgb), 0.90);
    --neutral-10: rgba(var(--neutral-rgb), 0.10);
    --neutral-20: rgba(var(--neutral-rgb), 0.20);
    --neutral-30: rgba(var(--neutral-rgb), 0.30);
    --neutral-40: rgba(var(--neutral-rgb), 0.40);
    --neutral-50: rgba(var(--neutral-rgb), 0.50);
    --neutral-60: rgba(var(--neutral-rgb), 0.60);
    --neutral-70: rgba(var(--neutral-rgb), 0.70);
    --neutral-80: rgba(var(--neutral-rgb), 0.80);
    --neutral-90: rgba(var(--neutral-rgb), 0.90);
    --white-10: rgba(var(--white-rgb), 0.10);
    --white-20: rgba(var(--white-rgb), 0.20);
    --white-30: rgba(var(--white-rgb), 0.30);
    --white-40: rgba(var(--white-rgb), 0.40);
    --white-50: rgba(var(--white-rgb), 0.50);
    --white-60: rgba(var(--white-rgb), 0.60);
    --white-70: rgba(var(--white-rgb), 0.70);
    --white-80: rgba(var(--white-rgb), 0.80);
    --white-90: rgba(var(--white-rgb), 0.90);
    --black-10: rgba(var(--black-rgb), 0.10);
    --black-20: rgba(var(--black-rgb), 0.20);
    --black-30: rgba(var(--black-rgb), 0.30);
    --black-40: rgba(var(--black-rgb), 0.40);
    --black-50: rgba(var(--black-rgb), 0.50);
    --black-60: rgba(var(--black-rgb), 0.60);
    --black-70: rgba(var(--black-rgb), 0.70);
    --black-80: rgba(var(--black-rgb), 0.80);
    --black-90: rgba(var(--black-rgb), 0.90);

    /* Fluid Spacing Variables */
    --s1: clamp(4px, calc(0.125rem + ((1vw - 3.6px) * 0.1852)), 4px);
    --s2: clamp(8px, calc(0.25rem + ((1vw - 3.6px) * 0.3704)), 8px);
    --s3: clamp(8px, calc(0.375rem + ((1vw - 3.6px) * 0.5556)), 12px);
    --s4: clamp(10px, calc(0.5rem + ((1vw - 3.6px) * 0.7407)), 16px);
    --s5: clamp(12px, calc(0.625rem + ((1vw - 3.6px) * 0.9259)), 20px);
    --s6: clamp(14px, calc(0.75rem + ((1vw - 3.6px) * 1.1111)), 24px);
    --s7: clamp(14px, calc(0.875rem + ((1vw - 3.6px) * 1.2963)), 28px);
    --s8: clamp(16px, calc(1rem + ((1vw - 3.6px) * 1.4815)), 32px);
    --s9: clamp(18px, calc(1.125rem + ((1vw - 3.6px) * 1.6667)), 36px);
    --s10: clamp(20px, calc(1.25rem + ((1vw - 3.6px) * 1.8519)), 40px);
    --s12: clamp(24px, calc(1.5rem + ((1vw - 3.6px) * 2.2222)), 48px);
    --s14: clamp(28px, calc(1.75rem + ((1vw - 3.6px) * 2.5926)), 56px);
    --s16: clamp(32px, calc(2rem + ((1vw - 3.6px) * 2.963)), 64px);
    --s20: clamp(40px, calc(2.5rem + ((1vw - 3.6px) * 3.7037)), 80px);
    --s24: clamp(48px, calc(3rem + ((1vw - 3.6px) * 4.4444)), 96px);
    --s28: clamp(56px, calc(3.5rem + ((1vw - 3.6px) * 5.1852)), 112px);
    --s32: clamp(64px, calc(4rem + ((1vw - 3.6px) * 5.9259)), 128px);
    --s36: clamp(72px, calc(4.5rem + ((1vw - 3.6px) * 6.6667)), 144px);
    --s40: clamp(80px, calc(5rem + ((1vw - 3.6px) * 7.4074)), 160px);
    --s44: clamp(88px, calc(5.5rem + ((1vw - 3.6px) * 8.1491)), 176px);
    --s48: clamp(96px, calc(6rem + ((1vw - 3.6px) * 9.2593)), 192px);
    --s56: clamp(112px, calc(7rem + ((1vw - 3.6px) * 11.029)), 224px);
    --s64: clamp(128px, calc(8rem + ((1vw - 3.6px) * 12.5926)), 256px);
    --s72: clamp(144px, calc(9rem + ((1vw - 3.6px) * 14.1491)), 288px);
    --ss-none: 0px;
    --ss-xxs: clamp(10px, calc(0.625rem + ((1vw - 3.6px) * 0.9259)), 20px);
    --ss-xs: clamp(20px, calc(1.25rem + ((1vw - 3.6px) * 1.8519)), 40px);
    --ss-sm: clamp(32px, calc(2rem + ((1vw - 3.6px) * 2.963)), 64px);
    --ss-md: clamp(40px, calc(2.5rem + ((1vw - 3.6px) * 3.7037)), 80px);
    --ss-lg: clamp(64px, calc(4rem + ((1vw - 3.6px) * 5.9259)), 128px);
    --ss-xl: clamp(80px, calc(5rem + ((1vw - 3.6px) * 7.4074)), 160px);
    --ss-xxl: clamp(128px, calc(8rem + ((1vw - 3.6px) * 11.852)), 256px);

    /* Tailwind Border Radius Variables */
    --radius-sm: 0.125rem;
    --radius-md: 0.25rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --radius-full: 9999px;
}

/* Alt-Shade Class - Flipped Color Variable Overrides */
.alt-shade {
    --bg-primary: #424933;
    --dark-primary: #fcfdfa;
    --surface-primary: #5f684a;
    --heading-primary: #f2f6e9;
    --subtle-primary: #7b8760;
    --active-primary: #e8efd9;
    --border-primary: #8e9c6e;
    --text-primary: #dee8c9;
    --muted-primary: #a1b17d;
    --hover-primary: #d7e3be;
    --base-primary: #bdd093;
    --bg-secondary: #31314f;
    --dark-secondary: #f9f9fe;
    --surface-secondary: #474671;
    --heading-secondary: #e8e8f9;
    --subtle-secondary: #5c5b93;
    --active-secondary: #d7d7f5;
    --border-secondary: #6a69aa;
    --text-secondary: #c6c6f1;
    --muted-secondary: #7877c0;
    --hover-secondary: #bbbaee;
    --base-secondary: #8d8ce2;
    --bg-tertiary: #334249;
    --dark-tertiary: #fafcfd;
    --surface-tertiary: #4a5f68;
    --heading-tertiary: #e9f2f6;
    --subtle-tertiary: #607b87;
    --active-tertiary: #d9e8ef;
    --border-tertiary: #6e8e9c;
    --text-tertiary: #c9dee8;
    --muted-tertiary: #7da1b1;
    --hover-tertiary: #bed7e3;
    --base-tertiary: #93bdd0;
    --bg-accent: #424933;
    --dark-accent: #fcfdfa;
    --surface-accent: #5f684a;
    --heading-accent: #f2f6e9;
    --subtle-accent: #7b8760;
    --active-accent: #e8efd9;
    --border-accent: #8e9c6e;
    --text-accent: #dee8c9;
    --muted-accent: #a1b17d;
    --hover-accent: #d7e3be;
    --base-accent: #bdd093;
    --bg-neutral: #13150f;
    --dark-neutral: #f5f5f4;
    --surface-neutral: #26291e;
    --heading-neutral: #edeeec;
    --subtle-neutral: #4b503f;
    --active-neutral: #e1e2df;
    --border-neutral: #6f7660;
    --text-neutral: #d2d4ce;
    --muted-neutral: #939985;
    --hover-neutral: #c3c6be;
    --base-neutral: #b5b9ac;
    --base-white: #000000;
    --white-rgb: 0, 0, 0;
    --base-black: #FFFFFF;
    --black-rgb: 255, 255, 255;
}

/* Nested Alt-Shade Class - Double Inversion Returns to Original */
.alt-shade .alt-shade {
    --bg-primary: #fcfdfa;
    --dark-primary: #424933;
    --surface-primary: #f2f6e9;
    --heading-primary: #5f684a;
    --subtle-primary: #e8efd9;
    --active-primary: #7b8760;
    --border-primary: #dee8c9;
    --text-primary: #8e9c6e;
    --muted-primary: #d7e3be;
    --hover-primary: #a1b17d;
    --base-primary: #bdd093;
    --bg-secondary: #f9f9fe;
    --dark-secondary: #31314f;
    --surface-secondary: #e8e8f9;
    --heading-secondary: #474671;
    --subtle-secondary: #d7d7f5;
    --active-secondary: #5c5b93;
    --border-secondary: #c6c6f1;
    --text-secondary: #6a69aa;
    --muted-secondary: #bbbaee;
    --hover-secondary: #7877c0;
    --base-secondary: #8d8ce2;
    --bg-tertiary: #fafcfd;
    --dark-tertiary: #334249;
    --surface-tertiary: #e9f2f6;
    --heading-tertiary: #4a5f68;
    --subtle-tertiary: #d9e8ef;
    --active-tertiary: #607b87;
    --border-tertiary: #c9dee8;
    --text-tertiary: #6e8e9c;
    --muted-tertiary: #bed7e3;
    --hover-tertiary: #7da1b1;
    --base-tertiary: #93bdd0;
    --bg-accent: #fcfdfa;
    --dark-accent: #424933;
    --surface-accent: #f2f6e9;
    --heading-accent: #5f684a;
    --subtle-accent: #e8efd9;
    --active-accent: #7b8760;
    --border-accent: #dee8c9;
    --text-accent: #8e9c6e;
    --muted-accent: #d7e3be;
    --hover-accent: #a1b17d;
    --base-accent: #bdd093;
    --bg-neutral: #f5f5f4;
    --dark-neutral: #13150f;
    --surface-neutral: #edeeec;
    --heading-neutral: #26291e;
    --subtle-neutral: #e1e2df;
    --active-neutral: #4b503f;
    --border-neutral: #d2d4ce;
    --text-neutral: #6f7660;
    --muted-neutral: #c3c6be;
    --hover-neutral: #939985;
    --base-neutral: #b5b9ac;
    --base-white: #FFFFFF;
    --white-rgb: 255, 255, 255;
    --base-black: #000000;
    --black-rgb: 0, 0, 0;
}