:root {
    /*#region Theme colors */
    /*#region Surface Colors */
    --surface-default: #F7F5F4;
    --surface-secondary: #FFFFFF;
    --surface-tertiary: #F8F8FA;
    --surface-inverted: #121212;
    --surface-overlay: rgba(12, 12, 12, 0.20);
    --surface-50: #E5E5E5;
    --surface-100: #F5F8FA;
    --surface-200: #D7DBDB;
    /*#endregion*/
    /*#region Brand Colors */
    --brand-50: #EFF5E8;
    --brand-100: #DFE8D4;
    --brand-200: #C0D1A9;
    --brand-300: #A0B97E;
    --brand-400: #80A253;
    --brand-500: #638C1C;
    /*#endregion*/
    /*#region Secondary Colors */
    --secondary-50: #F8FAE8;
    --secondary-100: #EEF1D2;
    --secondary-200: #D8E3A4;
    --secondary-300: #C1D678;
    --secondary-400: #A8C848;
    --secondary-500: #80BC00;
    /*#endregion*/
    /*#region Neutral Colors */
    --text-neutral-default: #E9E9E9;
    --neutral-default: #E5E5E5;
    --neutral-primary: #212529;
    --neutral-50: #E5E5E5;
    --neutral-100: #F8F8FA;
    --neutral-200: #D7D8DB;
    --neutral-300: #5B6065;
    --neutral-400: #666666;
    --neutral-500: #212529;
    --neutral-600: #1A1E21;
    --neutral-700: #141619;
    --neutral-800: #0D0F10;
    --neutral-900: #070708;
    --neutral-inverted: #FFFFFF;
    /*#endregion*/
    /*#region Info Colors */
    --info-50: #E9F5FE;
    --info-100: #C0D1A9;
    --info-200: #A6D5FA;
    --info-300: #7AC0F8;
    --info-400: #4DABF5;
    --info-500: #2196F3;
    --info-600: #1A78C2;
    --info-700: #145A92;
    --info-800: #0D3C61;
    --info-900: #1A548E;
    /*#endregion*/
    /*#region Error Colors */
    --error-50: #FFEBEE;
    --error-100: #FDD9D7;
    --error-200: #FBB4AF;
    --error-300: #F88E86;
    --error-400: #F6695E;
    --error-500: #F44336;
    --error-600: #C4362B;
    --error-700: #932820;
    --error-800: #631B16;
    --error-900: #82211A;
    /*#endregion*/
    /*#region Warning Colors */
    --warning-50: #FFF5E6;
    --warning-100: #FFEACC;
    --warning-200: #FFD699;
    --warning-300: #FFC166;
    --warning-400: #FFAD33;
    --warning-500: #FF9800;
    --warning-600: #CC7A00;
    --warning-700: #995B00;
    --warning-800: #663D00;
    --warning-900: #331E00;
    /*#endregion*/
    /*#region Success Colors */
    --success-50: #DFE8D4;
    --success-100: #DBEFDC;
    --success-200: #B7DFB9;
    --success-300: #94CF96;
    --success-400: #70BF73;
    --success-500: #4CAF50;
    --success-600: #3D8C40;
    --success-700: #2E6930;
    --success-800: #1E4620;
    --success-900: #173518;
    /*#endregion*/
    /*#endregion */
    /*#region Typography */
    --font-family-poppins: Poppins;
    --font-family-manrope: Manrope;
    --font-size-lg-title: 32px;
    --line-height-lg-title: 40px;
    --font-size-title: 20px;
    --line-height-title: 28px;
    --font-size-subtitle: 16px;
    --line-height-subtitle: 24px;
    --font-size-body: 14px;
    --line-height-body: 22px;
    --font-size-caption: 12px;
    --line-height-caption: 20px;
    --letter-spacing-default: -0.4px;
    /*#endregion*/
    /*#region Text Colors */
    --text-primary: var(--neutral-primary);
    --text-secondary: var(--neutral-200);
    --text-tertiary: var(--neutral-300);
    --text-inverted: var(--neutral-inverted);
    /*#endregion*/
    /*#region Theme Layout and Spacing */
    --theme-gap-default: 8px;
    /*#region Width */
    --width-button-lg: 150px;
    --width-button-sm: 111px;
    --width-button-md: 130px;
    --width-icon-default: 20px;
    --width-icon-sm: 16px;
    /*#endregion*/
    /*#region Height */
    --height-button-lg: 48px;
    --height-button-sm: 28px;
    --height-button-md: 38px;
    --height-icon-sm: 20px;
    /*#endregion*/
    /*#region Padding */
    --padding-x-button-lg: 24px;
    --padding-y-button-lg: 12px;
    --padding-x-button-sm: 8px;
    --padding-y-button-sm: 4px;
    /*#endregion*/
    /*#region Borders*/
    --border-size-default: 1px;
    --border-size-none: 0px;
    --border-radius-default: 12px;
    --border-radius-sm: 4px;
    --border-radius-md: 6px;
    --border-radius-lg: 12px;
    /*#endregion*/
    /*#endregion*/
    /*#region Semantic Aliases */
    /*#region System Colors */
    --color-bg-system-default: var(--surface-default);
    --color-bg-system-secondary: var(--surface-secondary);
    --color-bg-system-tertiary: var(--surface-tertiary);
    --color-bg-system-inverted: var(--surface-inverted);
    --color-bg-system-overlay: var(--surface-overlay);
    /*#endregion */
    /*#region Brand Colors */
    --color-bg-brand-lightest: var(--brand-50);
    --color-bg-brand-default: var(--brand-100);
    --color-bg-brand-secondary: var(--brand-400);
    --color-bg-brand-tertiary: var(--brand-500);
    --color-text-brand-lightest: var(--brand-50);
    --color-text-brand-default: var(--brand-100);
    --color-text-brand-secondary: var(--brand-400);
    --color-text-brand-tertiary: var(--brand-500);
    --color-border-brand-lightest: var(--brand-50);
    --color-border-brand-default: var(--brand-100);
    --color-border-brand-secondary: var(--brand-400);
    --color-border-brand-tertiary: var(--brand-500);
    /*#endregion */
    /*#region Neutral Colors */
    --color-text-neutral-lightest: var(--neutral-50);
    --color-text-neutral-default: var(--text-neutral-default);
    --color-text-neutral-primary: var(--neutral-primary);
    --color-text-neutral-secondary: var(--neutral-400);
    --color-text-neutral-tertiary: var(--neutral-500);
    --color-text-neutral-inverted: var(--neutral-inverted);
    --color-border-neutral-lightest: var(--neutral-50);
    --color-border-neutral-default: var(--text-neutral-default);
    --color-border-neutral-secondary: var(--neutral-400);
    --color-border-neutral-tertiary: var(--neutral-500);
    --color-border-neutral-inverted: var(--neutral-inverted);
    /*#endregion */
    /*#region Success Colors */
    --color-bg-success-default: var(--success-50);
    --color-bg-success-secondary: var(--success-400);
    --color-bg-success-tertiary: var(--success-500);
    --color-text-success-default: var(--success-50);
    --color-text-success-secondary: var(--success-400);
    --color-text-success-tertiary: var(--success-500);
    --color-border-success-default: var(--success-50);
    --color-border-success-secondary: var(--success-400);
    --color-border-success-tertiary: var(--success-500);
    /*#endregion */
    /*#region Error Colors */
    --color-bg-error-default: var(--error-50);
    --color-bg-error-secondary: var(--error-400);
    --color-bg-error-tertiary: var(--error-500);
    --color-text-error-default: var(--error-50);
    --color-text-error-secondary: var(--error-400);
    --color-text-error-tertiary: var(--error-500);
    --color-border-error-default: var(--error-50);
    --color-border-error-secondary: var(--error-400);
    --color-border-error-tertiary: var(--error-500);
    /*#endregion */
    /*#region Warning Colors */
    --color-bg-warning-default: var(--warning-50);
    --color-bg-warning-secondary: var(--warning-400);
    --color-bg-warning-tertiary: var(--warning-500);
    --color-text-warning-default: var(--warning-50);
    --color-text-warning-secondary: var(--warning-400);
    --color-text-warning-tertiary: var(--warning-500);
    --color-border-warning-default: var(--warning-50);
    --color-border-warning-secondary: var(--warning-400);
    --color-border-warning-tertiary: var(--warning-500);
    /*#endregion */
    /*#region Info Colors */
    --color-bg-info-default: var(--info-50);
    --color-bg-info-secondary: var(--info-400);
    --color-bg-info-tertiary: var(--info-500);
    --color-text-info-default: var(--info-50);
    --color-text-info-secondary: var(--info-400);
    --color-text-info-tertiary: var(--info-500);
    --color-border-info-default: var(--info-50);
    --color-border-info-secondary: var(--info-400);
    --color-border-info-tertiary: var(--info-500);
    /*#endregion */
    /*#region Width */
    --width-button-icon: var(--width-icon-default);
    --width-menu-icon: var(--width-icon-sm);
    /*#endregion */
    /*#endregion*/
}

/* ======================
   Theme Overrides
   ====================== */
[data-theme="dark"] {
    --surface-default: #121212;
    --surface-secondary: #1E1E1E;
    --surface-tertiary: #2D2D2D;
    --surface-inverted: #F7F5F4;
    --surface-overlay: rgba(247, 245, 244, 0.20);
}