:root {
    --th-purple: #8160C2;
    --th-cyan: #83C0CC;
    --th-pink: #F49097;
    --th-yellow: #EBC408;
    --th-white: #fff;
    --th-black: #000;
    --th-dark: #1f2937;
    --th-dark-hover: #374151;
    --th-light-gray: #F0F0F0;
    --th-text-dark: #333;
    --th-text-light: #666;
    --th-border-color: #ddd;

    --th-gap: 20px;
    --th-gap-30: 30px;
    --th-gap-sm: 12px;

    --th-radius: 20px;
    --th-radius-full: 50%;

    --th-transition: all 0.3s ease;
    --th-transition-fast: all 0.15s ease;

    --th-success-color: #46b450;
    --th-error-color: #dc3232;
    --th-warning-color: #f0ad4e;
    --th-info-color: #5bc0de;

    --th-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --th-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --th-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --th-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);

    --th-z-dropdown: 1000;
    --th-z-sticky: 1020;
    --th-z-fixed: 1030;
    --th-z-modal-backdrop: 1040;
    --th-z-modal: 1050;
    --th-z-popover: 1060;
    --th-z-tooltip: 1070;

    --th-breakpoint-xs: 480px;
    --th-breakpoint-sm: 576px;
    --th-breakpoint-md: 768px;
    --th-breakpoint-lg: 992px;
    --th-breakpoint-xl: 1200px;
    --th-breakpoint-xxl: 1400px;
}