/* 
 * PharmaNony Design System Utilities
 * Built to UI/UX Guru standards
 */

html {
    scroll-padding-top: 6rem; /* Prevent sticky header from obscuring focused items (2.4.11) */
}

/* WCAG 2.2 AA Focus Appearance (2.4.13) */
*:focus-visible {
    @apply outline-none ring-2 ring-primary ring-offset-2 ring-offset-surface-bright;
}

@layer components {
    /* Advanced Glassmorphism */
    .glass {
        @apply bg-white/70 backdrop-blur-md border border-white/20 shadow-inner-glow;
    }
    
    .glass-dark {
        @apply bg-on-surface/10 backdrop-blur-md border border-white/10 shadow-inner-glow;
    }

    /* Tactile Interaction */
    .hover-lift {
        @apply transition-all duration-300 hover:shadow-lifted hover:-translate-y-1 active:scale-[0.98];
    }

    .btn-spring {
        @apply transition-all duration-400 ease-[cubic-bezier(0.175,0.885,0.32,1.275)] active:scale-95;
    }

    /* Typography Hierarchy */
    .text-display { @apply font-display text-display; }
    .text-headline { @apply font-display text-headline; }
    .text-title { @apply font-display text-title; }
    .text-label { @apply font-sans text-label uppercase tracking-widest; }

    /* M3 Components */
    .card-m3 {
        @apply bg-surface-low rounded-3xl p-6 shadow-soft hover:shadow-lifted transition-all duration-300 border border-outline-variant;
    }

    .pill {
        @apply rounded-full px-6 py-2 text-sm font-medium;
    }
}

/* 8dp Spacing System Utilities if not covered by tailwind defaults */
.gap-8dp { gap: 0.5rem; }
.gap-16dp { gap: 1rem; }
.gap-24dp { gap: 1.5rem; }
.gap-32dp { gap: 2rem; }

/* Custom Micro-animations */
.animate-slide-up {
    animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }