/* Aisle Kit Custom Styles */

/* Custom Properties */
:root {
    --font-display: 'Cormorant Garamond', Georgia, serif;
    --font-body: 'DM Sans', ui-sans-serif, system-ui, sans-serif;

    /* Sage palette */
    --color-sage-50: #f6f7f5;
    --color-sage-100: #e3e6df;
    --color-sage-200: #c7cdc0;
    --color-sage-300: #a5af9a;
    --color-sage-400: #8b9d83;
    --color-sage-500: #6b7d63;
    --color-sage-600: #54634e;
    --color-sage-700: #434f3f;
    --color-sage-800: #384135;
    --color-sage-900: #30372e;

    --color-cream: #FAF9F6;
    --color-charcoal: #2C3E50;
    --color-blush: #F5E6E0;
    --color-gold: #D4AF37;
}

/* Font classes */
.font-display { font-family: var(--font-display); }
.font-body { font-family: var(--font-body); }

/* Background colors */
.bg-cream { background-color: var(--color-cream); }
.bg-charcoal { background-color: var(--color-charcoal); }
.bg-blush { background-color: var(--color-blush); }
.bg-gold { background-color: var(--color-gold); }
.bg-sage-50 { background-color: var(--color-sage-50); }
.bg-sage-100 { background-color: var(--color-sage-100); }
.bg-sage-200 { background-color: var(--color-sage-200); }
.bg-sage-300 { background-color: var(--color-sage-300); }
.bg-sage-400 { background-color: var(--color-sage-400); }
.bg-sage-500 { background-color: var(--color-sage-500); }
.bg-sage-600 { background-color: var(--color-sage-600); }
.bg-sage-700 { background-color: var(--color-sage-700); }
.bg-sage-800 { background-color: var(--color-sage-800); }
.bg-sage-900 { background-color: var(--color-sage-900); }

/* Text colors */
.text-cream { color: var(--color-cream); }
.text-charcoal { color: var(--color-charcoal); }
.text-blush { color: var(--color-blush); }
.text-gold { color: var(--color-gold); }
.text-sage-50 { color: var(--color-sage-50); }
.text-sage-100 { color: var(--color-sage-100); }
.text-sage-200 { color: var(--color-sage-200); }
.text-sage-300 { color: var(--color-sage-300); }
.text-sage-400 { color: var(--color-sage-400); }
.text-sage-500 { color: var(--color-sage-500); }
.text-sage-600 { color: var(--color-sage-600); }
.text-sage-700 { color: var(--color-sage-700); }
.text-sage-800 { color: var(--color-sage-800); }
.text-sage-900 { color: var(--color-sage-900); }

/* Border colors */
.border-sage-200 { border-color: var(--color-sage-200); }
.border-sage-300 { border-color: var(--color-sage-300); }
.border-sage-400 { border-color: var(--color-sage-400); }
.border-sage-500 { border-color: var(--color-sage-500); }

/* Ring colors */
.ring-sage-500 { --tw-ring-color: var(--color-sage-500); }

/* Focus states */
.focus\:ring-sage-500:focus { --tw-ring-color: var(--color-sage-500); }
.focus\:border-sage-500:focus { border-color: var(--color-sage-500); }

/* Hover states */
.hover\:bg-sage-50:hover { background-color: var(--color-sage-50); }
.hover\:bg-sage-600:hover { background-color: var(--color-sage-600); }
.hover\:bg-sage-700:hover { background-color: var(--color-sage-700); }
.hover\:text-sage-600:hover { color: var(--color-sage-600); }
.hover\:text-sage-700:hover { color: var(--color-sage-700); }

/* Alpine.js cloak */
[x-cloak] { display: none !important; }