:root { 
    /* Light Mode */
    /* color */
    --borders-color-border-1: #e6e6e6;
    --borders-color-border-2: #cacaca;
    --borders-color-border-3: #cacaca33;
    --interactions---primary-color-interaction-primary: #b87333;
    --interactions---primary-color-interaction-primary-active: #945e2b;
    --interactions---primary-color-interaction-primary-disabled: #d4b297;
    --interactions---primary-color-interaction-primary-hover: #d28440;
    --interactions---secondary-color-interaction-secondary: #ffffff;
    --interactions---secondary-color-interaction-secondary-active: #efe7e2;
    --interactions---secondary-color-interaction-secondary-disabled: #f2f1ef99;
    --interactions---secondary-color-interaction-secondary-hover: #f9f4f2;
    --neutrals-color-neutral-0: #ffffff;
    --neutrals-color-neutral-0-reverse: #000000;
    --neutrals-color-neutral-1: #f4f2f0;
    --neutrals-color-neutral-2: #e0ddd9;
    --neutrals-color-neutral-3: #b5b1ad;
    --overlays-color-background-modal-overlay: #0000004d;
    --overlays-color-background-overlay: #4d4a4766;
    --semantic-color-semantic-critical: #b34b4b;
    --semantic-color-semantic-critical-active: #923838;
    --semantic-color-semantic-critical-disabled: #d9979799;
    --semantic-color-semantic-critical-hover: #c75f5f;
    --semantic-color-semantic-info: #7a9db3;
    --semantic-color-semantic-info-active: #688494;
    --semantic-color-semantic-info-disabled: #aab7c399;
    --semantic-color-semantic-info-hover: #8ab2c5;
    --semantic-color-semantic-neutral: #a0978d;
    --semantic-color-semantic-neutral-active: #877b74;
    --semantic-color-semantic-neutral-disabled: #c6bfb999;
    --semantic-color-semantic-neutral-hover: #b1a89e;
    --semantic-color-semantic-success: #7baf5a;
    --semantic-color-semantic-success-active: #659547;
    --semantic-color-semantic-success-disabled: #a7c99799;
    --semantic-color-semantic-success-hover: #8bcf66;
    --semantic-color-semantic-warning: #d1a344;
    --semantic-color-semantic-warning-active: #b48634;
    --semantic-color-semantic-warning-disabled: #e6c68f99;
    --semantic-color-semantic-warning-hover: #e4b45a;
    --text-color-text-critical: #802e2e;
    --text-color-text-info: #4a6d82;
    --text-color-text-main: #262a30;
    --text-color-text-neutral: #6e5e56;
    --text-color-text-primary: #a36022;
    --text-color-text-reverse: #ffffff;
    --text-color-text-reverse-subtle: #e7e7e7;
    --text-color-text-subtle: #757575;
    --text-color-text-success: #51793d;
    --text-color-text-warning: #8b6c2e;

    /* Dark Mode */
    @media (prefers-color-scheme: dark) {
        --borders-color-border-1: #3a3a3a;
        --borders-color-border-2: #4a4a4a;
        --borders-color-border-3: #4a4a4a33;
        
        --neutrals-color-neutral-0: #242424;
        --neutrals-color-neutral-0-reverse: #ffffff;
        --neutrals-color-neutral-1: #2f2f2f;
        --neutrals-color-neutral-2: #3d3d3d;
        --neutrals-color-neutral-3: #505050;
        
        --text-color-text-main: #e7e7e7;
        --text-color-text-subtle: #a0a0a0;
        --text-color-text-reverse: #242424;
        --text-color-text-reverse-subtle: #2f2f2f;
        
        /* Keep the interaction colors the same for brand consistency */
        --interactions---primary-color-interaction-primary: #b87333;
        --interactions---primary-color-interaction-primary-hover: #d28440;
        --interactions---primary-color-interaction-primary-active: #945e2b;
        
        --interactions---secondary-color-interaction-secondary: #2f2f2f;
        --interactions---secondary-color-interaction-secondary-hover: #3d3d3d;
        --interactions---secondary-color-interaction-secondary-active: #505050;
    }
}