/* ========================================
   HUGE ASTROLOGY DESIGN SYSTEM
   Standardized components and utilities
   ======================================== */

/* === BASE BUTTON STYLES === */
.btn {
    @apply font-semibold rounded-lg transition-all duration-200
           focus:outline-none focus:ring-2 focus:ring-offset-2
           disabled:opacity-50 disabled:cursor-not-allowed
           inline-flex items-center justify-center gap-2;
}

/* Primary Button - Main CTAs */
.btn-primary {
    @apply btn px-6 py-3 bg-indigo-600 text-white
           hover:bg-indigo-700 hover:shadow-md
           focus:ring-indigo-500
           dark:bg-indigo-600 dark:hover:bg-indigo-700;
}

/* Secondary Button - Alternative actions */
.btn-secondary {
    @apply btn px-6 py-3 
           bg-slate-100 dark:bg-slate-800 
           text-slate-700 dark:text-slate-300
           hover:bg-slate-200 dark:hover:bg-slate-700
           focus:ring-slate-500;
}

/* Outline Button - Tertiary actions */
.btn-outline {
    @apply btn px-6 py-3 
           border-2 border-indigo-600 dark:border-indigo-500
           text-indigo-600 dark:text-indigo-400 bg-transparent
           hover:bg-indigo-50 dark:hover:bg-indigo-900/20
           focus:ring-indigo-500;
}

/* Danger Button - Destructive actions */
.btn-danger {
    @apply btn px-6 py-3 bg-red-600 text-white
           hover:bg-red-700 hover:shadow-md
           focus:ring-red-500;
}

/* Ghost Button - Minimal style */
.btn-ghost {
    @apply btn px-6 py-3 bg-transparent
           text-slate-700 dark:text-slate-300
           hover:bg-slate-100 dark:hover:bg-slate-800
           focus:ring-slate-500;
}

/* Button Sizes */
.btn-sm {
    @apply px-4 py-2 text-sm;
}

.btn-md {
    @apply px-6 py-3 text-base;
}

.btn-lg {
    @apply px-8 py-4 text-lg;
}

/* Icon-only buttons */
.btn-icon {
    @apply p-2 rounded-lg;
}

/* === CARD COMPONENTS === */
.card {
    @apply bg-white dark:bg-slate-900 
           border border-slate-200 dark:border-slate-800 
           rounded-lg p-6
           transition-all duration-200;
}

.card-hover {
    @apply card hover:border-indigo-200 dark:hover:border-indigo-900/50 
           hover:shadow-lg;
}

.card-interactive {
    @apply card-hover cursor-pointer
           active:scale-[0.98];
}

.card-header {
    @apply font-bold text-xl text-slate-900 dark:text-white mb-4
           flex items-center justify-between;
}

.card-title {
    @apply font-semibold text-lg text-slate-900 dark:text-white;
}

.card-body {
    @apply text-slate-600 dark:text-slate-300 leading-relaxed;
}

.card-footer {
    @apply mt-4 pt-4 border-t border-slate-200 dark:border-slate-700
           flex items-center justify-between;
}

/* === BADGE COMPONENTS === */
.badge {
    @apply inline-flex items-center gap-1 px-3 py-1 
           text-xs font-semibold rounded-md
           transition-colors duration-200;
}

.badge-primary {
    @apply badge bg-indigo-100 dark:bg-indigo-900/30 
           text-indigo-700 dark:text-indigo-400
           border border-indigo-200 dark:border-indigo-800;
}

.badge-secondary {
    @apply badge bg-slate-100 dark:bg-slate-800 
           text-slate-700 dark:text-slate-300
           border border-slate-200 dark:border-slate-700;
}

.badge-success {
    @apply badge bg-green-100 dark:bg-green-900/30 
           text-green-700 dark:text-green-400
           border border-green-200 dark:border-green-800;
}

.badge-warning {
    @apply badge bg-yellow-100 dark:bg-yellow-900/30 
           text-yellow-700 dark:text-yellow-400
           border border-yellow-200 dark:border-yellow-800;
}

.badge-danger {
    @apply badge bg-red-100 dark:bg-red-900/30 
           text-red-700 dark:text-red-400
           border border-red-200 dark:border-red-800;
}

.badge-info {
    @apply badge bg-blue-100 dark:bg-blue-900/30 
           text-blue-700 dark:text-blue-400
           border border-blue-200 dark:border-blue-800;
}

/* === INPUT COMPONENTS === */
.input {
    @apply w-full px-4 py-3 
           border border-slate-300 dark:border-slate-700 
           rounded-lg
           bg-white dark:bg-slate-800 
           text-slate-900 dark:text-white
           placeholder:text-slate-400 dark:placeholder:text-slate-500
           focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500
           transition-all duration-200;
}

.input-sm {
    @apply px-3 py-2 text-sm;
}

.input-lg {
    @apply px-5 py-4 text-lg;
}

.input-error {
    @apply input border-red-500 focus:ring-red-500 focus:border-red-500;
}

.input-success {
    @apply input border-green-500 focus:ring-green-500 focus:border-green-500;
}

/* Textarea */
.textarea {
    @apply input min-h-[120px] resize-y;
}

/* Select */
.select {
    @apply input appearance-none cursor-pointer;
}

/* === ICON SIZES === */
.icon-xs { @apply w-4 h-4; }
.icon-sm { @apply w-5 h-5; }
.icon-md { @apply w-6 h-6; }
.icon-lg { @apply w-8 h-8; }
.icon-xl { @apply w-12 h-12; }
.icon-2xl { @apply w-16 h-16; }

/* === SPACING UTILITIES === */
.section-spacing { @apply space-y-12; }
.card-spacing { @apply space-y-6; }
.item-spacing { @apply space-y-4; }
.tight-spacing { @apply space-y-2; }

/* === TYPOGRAPHY === */
.heading-1 {
    @apply text-4xl md:text-5xl font-black text-slate-900 dark:text-white
           leading-tight;
}

.heading-2 {
    @apply text-3xl md:text-4xl font-bold text-slate-900 dark:text-white
           leading-tight;
}

.heading-3 {
    @apply text-2xl md:text-3xl font-bold text-slate-900 dark:text-white
           leading-snug;
}

.heading-4 {
    @apply text-xl md:text-2xl font-semibold text-slate-900 dark:text-white
           leading-snug;
}

.heading-5 {
    @apply text-lg md:text-xl font-semibold text-slate-900 dark:text-white;
}

.body-large {
    @apply text-lg text-slate-600 dark:text-slate-300 leading-relaxed;
}

.body-text {
    @apply text-base text-slate-600 dark:text-slate-300 leading-relaxed;
}

.body-small {
    @apply text-sm text-slate-500 dark:text-slate-400 leading-normal;
}

.caption {
    @apply text-xs text-slate-500 dark:text-slate-400;
}

/* === LINK STYLES === */
.link {
    @apply text-indigo-600 dark:text-indigo-400 
           hover:text-indigo-700 dark:hover:text-indigo-300
           hover:underline transition-colors;
}

.link-muted {
    @apply text-slate-600 dark:text-slate-400
           hover:text-indigo-600 dark:hover:text-indigo-400
           transition-colors;
}

/* === ALERT COMPONENTS === */
.alert {
    @apply p-4 rounded-lg border flex items-start gap-3;
}

.alert-info {
    @apply alert bg-blue-50 dark:bg-blue-900/20 
           border-blue-200 dark:border-blue-800
           text-blue-800 dark:text-blue-300;
}

.alert-success {
    @apply alert bg-green-50 dark:bg-green-900/20 
           border-green-200 dark:border-green-800
           text-green-800 dark:text-green-300;
}

.alert-warning {
    @apply alert bg-yellow-50 dark:bg-yellow-900/20 
           border-yellow-200 dark:border-yellow-800
           text-yellow-800 dark:text-yellow-300;
}

.alert-danger {
    @apply alert bg-red-50 dark:bg-red-900/20 
           border-red-200 dark:border-red-800
           text-red-800 dark:text-red-300;
}

/* === AVATAR COMPONENTS === */
.avatar {
    @apply rounded-full object-cover border-2 border-slate-200 dark:border-slate-700;
}

.avatar-xs { @apply w-6 h-6; }
.avatar-sm { @apply w-8 h-8; }
.avatar-md { @apply w-10 h-10; }
.avatar-lg { @apply w-12 h-12; }
.avatar-xl { @apply w-16 h-16; }
.avatar-2xl { @apply w-24 h-24; }

/* === DIVIDER === */
.divider {
    @apply border-t border-slate-200 dark:border-slate-700 my-6;
}

.divider-vertical {
    @apply border-l border-slate-200 dark:border-slate-700 mx-4;
}

/* === SKELETON LOADERS === */
.skeleton {
    @apply animate-pulse bg-slate-200 dark:bg-slate-700 rounded-lg;
}

.skeleton-text {
    @apply skeleton h-4 w-full;
}

.skeleton-title {
    @apply skeleton h-6 w-3/4;
}

.skeleton-avatar {
    @apply skeleton rounded-full;
}

/* === UTILITY CLASSES === */
.glass {
    @apply bg-white/80 dark:bg-slate-900/80 backdrop-blur-md;
}

.gradient-primary {
    @apply bg-gradient-to-r from-indigo-600 to-purple-600;
}

.gradient-secondary {
    @apply bg-gradient-to-r from-slate-600 to-slate-800;
}

.shadow-soft {
    @apply shadow-lg shadow-slate-200/50 dark:shadow-slate-900/50;
}

.border-standard {
    @apply border border-slate-200 dark:border-slate-800;
}

/* === ANIMATION UTILITIES === */
.transition-standard {
    @apply transition-all duration-200 ease-in-out;
}

.hover-lift {
    @apply transition-transform duration-200 hover:-translate-y-1;
}

.hover-scale {
    @apply transition-transform duration-200 hover:scale-105;
}

/* === RESPONSIVE CONTAINERS === */
.container-narrow {
    @apply max-w-4xl mx-auto px-4;
}

.container-standard {
    @apply max-w-7xl mx-auto px-4;
}

.container-wide {
    @apply max-w-screen-2xl mx-auto px-4;
}

/* === FOCUS STATES === */
.focus-ring {
    @apply focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2;
}

.focus-ring-inset {
    @apply focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500;
}

/* cache bust */