/* Base styles and custom color palette variables */
:root {
    /* Gothic (Primary) - trustworthy cool tones */
    --gothic-50: #f8fafc;
    --gothic-100: #f1f5f9;
    --gothic-200: #e2e8f0;
    --gothic-300: #cbd5e1;
    --gothic-400: #94a3b8;
    --gothic-500: #64748b;
    --gothic-600: #475569;
    --gothic-700: #334155;
    --gothic-800: #1e293b;
    --gothic-900: #0f172a;
    
    /* Casper (Accent) - light highlights */
    --casper-50: #f0fdff;
    --casper-100: #ccfbff;
    --casper-200: #99f6ff;
    --casper-300: #4ceaff;
    --casper-400: #06d6f0;
    --casper-500: #00bcd4;
    --casper-600: #0891b2;
    --casper-700: #0e7490;
    --casper-800: #155e75;
    --casper-900: #164e63;
    
    /* Envy (Success) */
    --envy-500: #22c55e;
    --envy-600: #16a34a;
    --envy-700: #15803d;
    
    /* Fuzzy Wuzzy Brown (Error) */
    --fuzzy-500: #ef4444;
    --fuzzy-600: #dc2626;
    --fuzzy-700: #b91c1c;
    
    /* Cement (Neutral Depth) */
    --cement-50: #fafafa;
    --cement-100: #f4f4f5;
    --cement-200: #e4e4e7;
    --cement-300: #d4d4d8;
    --cement-400: #a1a1aa;
    --cement-500: #71717a;
    --cement-600: #52525b;
    --cement-700: #3f3f46;
    --cement-800: #27272a;
    --cement-900: #18181b;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--gothic-700);
    font-weight: 400;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Enhanced typography hierarchy with Gothic palette */
h1 {
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--gothic-800);
}

h2 {
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--gothic-800);
}

h3 {
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--gothic-700);
}

p {
    color: var(--gothic-600);
    font-weight: 400;
}

label {
    font-weight: 500;
    color: var(--gothic-700);
    letter-spacing: -0.01em;
}

/* Icon styling with new palette */
.icon-primary {
    color: var(--gothic-600);
    filter: drop-shadow(0 2px 4px rgba(71, 85, 105, 0.2));
}

.icon-success {
    color: var(--envy-500);
    filter: drop-shadow(0 2px 4px rgba(34, 197, 94, 0.2));
}

.icon-error {
    color: var(--fuzzy-500);
    filter: drop-shadow(0 2px 4px rgba(239, 68, 68, 0.2));
}

.icon-accent {
    color: var(--casper-600);
    filter: drop-shadow(0 2px 4px rgba(8, 145, 178, 0.2));
}

/* Enhanced focus states for accessibility with Gothic colors */
*:focus-visible {
    outline: 2px solid var(--gothic-600);
    outline-offset: 2px;
}

/* Touch optimization */
.touch-manipulation {
    touch-action: manipulation;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Prevent zoom on input focus for iOS */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    input[type="email"],
    input[type="url"],
    input,
    button {
        font-size: max(16px, 1rem);
    }
}

/* Enhanced safe area support for mobile devices */
@supports (padding: max(0px)) {
    body {
        padding-left: max(0.75rem, env(safe-area-inset-left));
        padding-right: max(0.75rem, env(safe-area-inset-right));
        padding-top: max(0.75rem, env(safe-area-inset-top));
        padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
    }
}

/* Text overflow prevention */
.break-words {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}

/* Subtle hover effects for interactive elements */
.hover-lift {
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-lift:hover {
    transform: translateY(-2px);
}

/* Desktop-first responsive utilities */
@media (min-width: 1280px) {
    .desktop-container {
        max-width: 1200px;
        margin: 0 auto;
    }
}

/* Professional micro-interactions */
.transition-smooth {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.transition-bounce {
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Accessibility enhancements */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --gothic-700: #000000;
        --gothic-600: #333333;
        --gothic-500: #666666;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}