/* Custom styles and overrides */
:root {
    --terra-50: #fdf4f0;
    --terra-100: #fce8df;
    --terra-200: #f9d4c4;
    --terra-300: #f4b49c;
    --terra-400: #ed866a;
    --terra-500: #e05c42;
    --terra-600: #d14028;
    --terra-700: #af301f;
    --terra-800: #8c281d;
    --terra-900: #73221a;
    
    --sand-50: #fefdfb;
    --sand-100: #fdf9f1;
    --sand-200: #faeed3;
    --sand-300: #f5dbaa;
    --sand-400: #edc278;
    --sand-500: #e4a852;
    --sand-600: #d4903e;
    --sand-700: #b07230;
    --sand-800: #8c5a2d;
    --sand-900: #734a28;
}

/* Base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Outfit', sans-serif;
    line-height: 1.6;
    color: #292524;
    background-color: #fefdfb;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    line-height: 1.2;
}

/* Smooth transitions */
a, button {
    transition: all 0.3s ease;
}

/* Focus styles for accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 3px solid #d14028;
    outline-offset: 2px;
}

/* Print styles */
@media print {
    nav, .geo-circle, .geo-square, .geo-triangle {
        display: none;
    }
    
    body {
        color: #000;
        background: #fff;
    }
    
    a {
        text-decoration: underline;
    }
}

/* Reduced motion */
@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;
    }
    
    .reveal {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .btn-primary {
        border: 2px solid currentColor;
    }
}

/* Touch device optimizations */
@media (hover: none) {
    .btn-primary:hover {
        transform: none;
    }
    
    .reveal:hover {
        opacity: 1 !important;
        transform: none !important;
    }
}
