:root {
    /* Primary Colors */
    --color-primary: #E0A230;
    --color-primary-light: #e8b758; /* Lighter shade for hover states */
    --color-primary-dark: #b38126;  /* Darker shade for active states */

    /* Typography Colors */
    --color-ink: #111214;           /* Main text color */
    --color-muted: #6B7280;         /* Secondary text color */
    
    /* Neutrals */
    --color-true-black: #000000;    /* Background accents */
    --color-white: #FFFFFF;
    --color-light-bg: #F7F7F8;      /* Light gray background */

    /* Functional Colors */
    --color-success: #16A34A;       /* Success states and price badges */
    --color-success-light: #22c55e; /* Lighter success for hover states */
    --color-success-dark: #15803d;  /* Darker success for active states */
}

/* Utility Classes */
.text-primary { color: var(--color-primary); }
.text-ink { color: var(--color-ink); }
.text-light-gray { color: var(--color-light-bg); }
.text-muted { color: var(--color-muted); }
.text-white { color: var(--color-white); }
.text-success { color: var(--color-success); }

.bg-primary { background-color: var(--color-primary); }
.bg-true-black { background-color: var(--color-true-black); }
.bg-muted { background-color: var(--color-muted); }
.bg-ink { background-color: var(--color-ink); }
.bg-white { background-color: var(--color-white); }
.bg-light { background-color: var(--color-light-bg); }
.bg-success { background-color: var(--color-success); }

/* Interactive States */
.hover\:bg-primary-light:hover { background-color: var(--color-primary-light); }
.hover\:bg-primary-dark:active { background-color: var(--color-primary-dark); }
.hover\:bg-success-light:hover { background-color: var(--color-success-light); }
.hover\:bg-success-dark:active { background-color: var(--color-success-dark); }