/* Natural, Human-Designed Global Styles */

html {
    scroll-behavior: smooth;
}

/* Natural spacing system - not perfectly uniform */
.spacing-comfortable { padding: 1.125rem 1.375rem; }
.spacing-relaxed { padding: 1.875rem 2.125rem; }
.spacing-generous { padding: 2.625rem 3.25rem; }

/* Natural typography scale - intentionally irregular for human feel */
.text-natural-xs { font-size: 0.8125rem; line-height: 1.5; }
.text-natural-sm { font-size: 0.9375rem; line-height: 1.55; }
.text-natural-base { font-size: 1.0625rem; line-height: 1.6; }
.text-natural-lg { font-size: 1.1875rem; line-height: 1.65; }
.text-natural-xl { font-size: 1.375rem; line-height: 1.4; }
.text-natural-2xl { font-size: 1.625rem; line-height: 1.35; }
.text-natural-3xl { font-size: 2.125rem; line-height: 1.25; }

/* Subtle, production-ready shadows - no excessive glow */
.shadow-natural-sm {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06),
                0 1px 2px rgba(0, 0, 0, 0.04);
}

.shadow-natural-md {
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08),
                0 2px 4px rgba(0, 0, 0, 0.04);
}

.shadow-natural-lg {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12),
                0 4px 8px rgba(0, 0, 0, 0.06);
}

.shadow-natural-xl {
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15),
                0 8px 16px rgba(0, 0, 0, 0.08);
}

/* Subtle theme-aware accent shadow */
.shadow-accent-subtle {
    box-shadow: 0 4px 12px color-mix(in srgb, var(--color-primary) 8%, transparent),
                0 2px 6px rgba(0, 0, 0, 0.04);
}

/* Natural border radius - soft but not overly rounded */
.rounded-natural { border-radius: 0.4375rem; }
.rounded-natural-lg { border-radius: 0.625rem; }
.rounded-natural-xl { border-radius: 0.875rem; }

/* Realistic hover lift */
.hover-natural {
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-natural:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1),
                0 3px 8px rgba(0, 0, 0, 0.06);
}

/* Subtle glass effect - not overdone */
.glass-subtle {
    background: color-mix(in srgb, var(--color-card) 85%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Natural gradient text - theme-aware */
.text-gradient-natural {
    background: linear-gradient(120deg, var(--color-primary), var(--color-secondary));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Realistic button states */
.btn-natural {
    position: relative;
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-natural:hover {
    transform: translateY(-1px);
}

.btn-natural:active {
    transform: translateY(0);
}

/* Soft focus rings for accessibility */
.focus-natural:focus {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 15%, transparent);
}

/* Realistic card styles */
.card-natural {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.card-natural:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

/* Natural grid pattern - very subtle */
.grid-pattern-subtle {
    background-image:
        linear-gradient(color-mix(in srgb, var(--color-border) 20%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--color-border) 20%, transparent) 1px, transparent 1px);
    background-size: 60px 60px;
}

/* Subtle glow for primary elements - not neon */
.glow-subtle {
    box-shadow: 0 0 24px color-mix(in srgb, var(--color-primary) 12%, transparent);
}

/* Natural transitions - varied timing for organic feel */
.transition-natural-fast {
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.transition-natural {
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.transition-natural-slow {
    transition: all 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Touch-friendly utilities for mobile */
.touch-action-pan-y {
    touch-action: pan-y;
}

.touch-action-manipulation {
    touch-action: manipulation;
}

/* Safe area padding for notched devices */
.safe-area-inset-top {
    padding-top: env(safe-area-inset-top);
}

.safe-area-inset-bottom {
    padding-bottom: env(safe-area-inset-bottom);
}

/* Natural animations */
@keyframes fadeInNatural {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInNatural {
    from {
        opacity: 0;
        transform: translateX(-12px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.fade-in-natural {
    animation: fadeInNatural 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.slide-in-natural {
    animation: slideInNatural 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Responsive typography adjustments */
@media (max-width: 479px) {
    html {
        font-size: 14px;
    }

    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

@media (min-width: 480px) and (max-width: 639px) {
    html {
        font-size: 15px;
    }
}

@media (min-width: 640px) and (max-width: 767px) {
    html {
        font-size: 15px;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    html {
        font-size: 16px;
    }
}

@media (min-width: 1024px) {
    html {
        font-size: 16px;
    }
}

@media (min-width: 1280px) {
    .container {
        max-width: 1280px;
    }
}

@media (min-width: 1536px) {
    .container {
        max-width: 1400px;
    }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    html {
        scroll-behavior: auto;
    }

    .hover-natural:hover {
        transform: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .card-natural {
        border-width: 2px;
    }

    .focus-natural:focus {
        outline: 2px solid var(--color-primary);
        outline-offset: 2px;
    }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    button,
    a,
    input,
    select,
    textarea {
        min-height: 44px;
        min-width: 44px;
    }

    .hover-natural:hover {
        transform: none;
    }
}

/* Landscape orientation adjustments */
@media (orientation: landscape) and (max-height: 500px) {
    section {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }
}

/* Print styles */
@media print {
    .glass-subtle,
    .glow-subtle,
    .shadow-natural-sm,
    .shadow-natural-md,
    .shadow-natural-lg {
        box-shadow: none;
        backdrop-filter: none;
    }

    .grid-pattern-subtle {
        background-image: none;
    }

    nav,
    footer,
    .no-print {
        display: none !important;
    }

    .card-natural {
        border: 1px solid #000;
    }
}

/* Dark mode adjustments for themes */
@media (prefers-color-scheme: dark) {
    /* Automatically handled by theme system */
}