:root {
    /* Font Variables - disesuaikan dengan kebutuhan */
    --font-sans: "IBM Plex Sans Condensed", sans-serif;
    --font-bjcredits: "Lexend Deca", sans-serif;
    --font-chakra: "Chakra Petch", sans-serif;
    
    /* Color Variables */
    --flashsale-background: 240 3.7% 15.88%;
    --flashsale-foreground: 60 9.09% 97.84%;
    --flashsale-image: url('https://asset.kitadigital.my.id/background.webp');
    
    --recommendation-background: 240 3.7% 15.88%;
    --recommendation-foreground: 60 9.09% 97.84%;
    --recommendation-image: url('https://asset.kitadigital.my.id/background.webp');
    
    --popular-background: 240 3.7% 15.88%;
    --popular-foreground: 60 9.09% 97.84%;
    --popular-image: url('https://asset.kitadigital.my.id/background.webp');
    
    --order-variant: 0 0% 21.96%;
    --order-variant-foreground: 60 9.09% 97.84%;
    --order-variant-image: url('https://asset.kitadigital.my.id/background.webp');
    
    --payment-card-background: 0 0% 32.16%;
    --payment-card-foreground: 60 9.09% 97.84%;
    --payment-category-background: 0 0% 23.14%;
    --payment-category-foreground: 60 9.09% 97.84%;
    --payment-category-header: 0 0% 12.94%;
    --payment-category-footer: 0 0% 25.1%;
    
    --auth-color: 24.58 94.98% 53.14%;
    --auth-image: none; /* ganti url() dengan none */
    
    --background: 240 5.88% 10%;
    --foreground: 60 9.09% 97.84%;
    --card: 0 0% 25.1%;
    --card-foreground: 60 9.09% 97.84%;
    --popover: 240 3.7% 15.88%;
    --popover-foreground: 60 9.09% 97.84%;
    --primary: 24.58 94.98% 53.14%;
    --primary-foreground: 60 9.09% 97.84%;
    --secondary: 240 1.41% 13.92%;
    --secondary-foreground: 60 9.09% 97.84%;
    --muted: 240 3.7% 15.88%;
    --muted-foreground: 60 9.09% 97.84%;
    --accent: 0 0% 21.96%;
    --accent-foreground: 60 9.09% 97.84%;
    
    /* Status Colors */
    --success: 142.09 71.18% 44.9%;
    --success-foreground: 60 9.09% 97.84%;
    --warning: 45.2 93.31% 46.86%;
    --warning-foreground: 60 9.09% 97.84%;
    --info: 189.03 93.64% 43.14%;
    --info-foreground: 204 100% 97.06%;
    --destructive: 0 84.24% 60.2%;
    --destructive-foreground: 60 9.09% 97.84%;
    
    /* UI Elements */
    --border: 0 0% 21.96%;
    --input: 0 0% 21.96%;
    --ring: 24.58 94.98% 53.14%;
    --radius: 1rem;
    
    /* Gradient Variables - diperbaiki konsistensi penamaan */
    --button-gradient-active: true;
    --button-gradient-dir: to top;
    --button-gradient-from: #351b08;
    --button-gradient-from-stop: 0%;
    --button-gradient-via: #c2570c;
    --button-gradient-via-stop: 50%;
    --button-gradient-to: #f97316;
    --button-gradient-to-stop: 100%;
    --button-gradient-theme: linear-gradient(to top, #351b08 0%, #c2570c 50%, #f97316 100%);
}