/* Grace Awakening - Sacred Earth Harmony Design System */
/* Generated: 2025-12-29 */

@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+Pro:wght@300;400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Alegreya+Sans:wght@500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    :root {
        /* Primary Colors - Deep Saffron Palette */
        --color-primary: #D4761A; /* Deep saffron - spiritual authority */
        --color-primary-50: #FEF7F0; /* Lightest saffron tint */
        --color-primary-100: #FCEEE0; /* Very light saffron */
        --color-primary-200: #F9DCC1; /* Light saffron */
        --color-primary-300: #F5C49A; /* Medium-light saffron */
        --color-primary-400: #E99D4F; /* Medium saffron */
        --color-primary-500: #D4761A; /* Base deep saffron */
        --color-primary-600: #B86315; /* Dark saffron */
        --color-primary-700: #9A5212; /* Darker saffron */
        --color-primary-800: #7C4210; /* Very dark saffron */
        --color-primary-900: #5E320C; /* Darkest saffron */
        /* Secondary Colors - Rich Earth Brown Palette */
        --color-secondary: #8B4513; /* Rich earth brown - grounding */
        --color-secondary-50: #F7F3F0; /* Lightest earth tint */
        --color-secondary-100: #EDE5DC; /* Very light earth */
        --color-secondary-200: #DBCBB9; /* Light earth */
        --color-secondary-300: #C8B096; /* Medium-light earth */
        --color-secondary-400: #AA7A55; /* Medium earth */
        --color-secondary-500: #8B4513; /* Base rich earth brown */
        --color-secondary-600: #763A10; /* Dark earth */
        --color-secondary-700: #62300D; /* Darker earth */
        --color-secondary-800: #4E260B; /* Very dark earth */
        --color-secondary-900: #3A1C08; /* Darkest earth */
        /* Accent Colors - Gentle Gold Palette */
        --color-accent: #F4A460; /* Gentle gold - sacred moments */
        --color-accent-50: #FEF9F4; /* Lightest gold tint */
        --color-accent-100: #FDF2E8; /* Very light gold */
        --color-accent-200: #FBE5D1; /* Light gold */
        --color-accent-300: #F8D4B0; /* Medium-light gold */
        --color-accent-400: #F6BC88; /* Medium gold */
        --color-accent-500: #F4A460; /* Base gentle gold */
        --color-accent-600: #E88D3F; /* Dark gold */
        --color-accent-700: #D17528; /* Darker gold */
        --color-accent-800: #A85E20; /* Very dark gold */
        --color-accent-900: #7F4718; /* Darkest gold */
        /* Background Colors */
        --color-background: #FEFDF8; /* Warm ivory - peaceful canvas */
        --color-surface: #F5F2E8; /* Soft cream - content elevation */
        --color-surface-hover: #EDE9DC; /* Surface hover state */
        --color-surface-active: #E5E0D0; /* Surface active state */
        /* Text Colors */
        --color-text-primary: #2C1810; /* Deep brown - extended reading */
        --color-text-secondary: #6B4423; /* Medium brown - hierarchy */
        --color-text-tertiary: #8B6F47; /* Light brown - subtle text */
        --color-text-disabled: #A89A7E; /* Disabled text state */
        --color-text-inverse: #FEFDF8; /* Text on dark backgrounds */
        /* Semantic Colors */
        --color-success: #228B22; /* Natural green - spiritual progress */
        --color-success-light: #90EE90; /* Light green */
        --color-success-dark: #006400; /* Dark green */

        --color-warning: #CD853F; /* Warm amber - guidance alerts */
        --color-warning-light: #F5DEB3; /* Light amber */
        --color-warning-dark: #8B6914; /* Dark amber */

        --color-error: #A0522D; /* Earthy sienna - correction messages */
        --color-error-light: #DEB887; /* Light sienna */
        --color-error-dark: #6B3410; /* Dark sienna */
        /* Border Colors */
        --color-border-subtle: rgba(212, 118, 26, 0.12); /* Subtle primary border */
        --color-border-default: rgba(212, 118, 26, 0.20); /* Default border */
        --color-border-strong: rgba(212, 118, 26, 0.40); /* Strong border */
        --color-border-accent: rgba(244, 164, 96, 0.20); /* Accent border */
        /* Shadow Definitions */
        --shadow-subtle: 0 4px 12px rgba(212, 118, 26, 0.08); /* Subtle elevation */
        --shadow-default: 0 6px 16px rgba(212, 118, 26, 0.10); /* Default elevation */
        --shadow-strong: 0 8px 24px rgba(44, 24, 16, 0.12); /* Modal/floating CTAs */
        --shadow-inner: inset 0 2px 4px rgba(44, 24, 16, 0.06); /* Inner shadow */
        /* Spacing Scale - Meditation-inspired rhythm */
        --spacing-xs: 0.25rem; /* 4px */
        --spacing-sm: 0.5rem; /* 8px */
        --spacing-md: 1rem; /* 16px */
        --spacing-lg: 1.5rem; /* 24px */
        --spacing-xl: 2rem; /* 32px */
        --spacing-2xl: 3rem; /* 48px */
        --spacing-3xl: 4rem; /* 64px */
        --spacing-4xl: 6rem; /* 96px */
        /* Animation Timing - Breathing rhythm */
        --transition-fast: 200ms ease-in-out;
        --transition-base: 300ms ease-in-out;
        --transition-slow: 400ms ease-in-out;
        --transition-breath: 600ms cubic-bezier(0.4, 0, 0.2, 1);
        /* Border Radius */
        --radius-sm: 0.25rem; /* 4px */
        --radius-md: 0.5rem; /* 8px */
        --radius-lg: 0.75rem; /* 12px */
        --radius-xl: 1rem; /* 16px */
        --radius-full: 9999px;
    }

    /* Base Typography Styles */
    body {
        @apply font-body text-text-primary bg-background antialiased;
        font-feature-settings: 'kern' 1, 'liga' 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    h1, h2, h3, h4, h5, h6 {
        @apply font-headline text-text-primary;
        font-feature-settings: 'kern' 1, 'liga' 1, 'dlig' 1;
    }

    h1 {
        @apply text-5xl md:text-6xl font-bold leading-tight tracking-tight;
    }

    h2 {
        @apply text-4xl md:text-5xl font-semibold leading-tight tracking-tight;
    }

    h3 {
        @apply text-3xl md:text-4xl font-semibold leading-snug;
    }

    h4 {
        @apply text-2xl md:text-3xl font-semibold leading-snug;
    }

    h5 {
        @apply text-xl md:text-2xl font-medium leading-normal;
    }

    h6 {
        @apply text-lg md:text-xl font-medium leading-normal;
    }

    p {
        @apply text-base leading-relaxed text-text-primary;
    }

    a {
        @apply text-primary hover:text-primary-600 transition-colors duration-300;
    }

    /* Focus Styles - Accessible and spiritual */
    *:focus-visible {
        @apply outline-none ring-2 ring-primary ring-offset-2 ring-offset-background;
    }
}

@layer components {
    /* Button Components */
    .btn {
        @apply font-cta font-bold px-6 py-3 rounded-lg transition-all duration-300;
        @apply focus:outline-none focus:ring-2 focus:ring-offset-2;
    }

    .btn-primary {
        @apply bg-primary text-white hover:bg-primary-600 active:bg-primary-700;
        @apply focus:ring-primary shadow-subtle hover:shadow-default;
    }

    .btn-secondary {
        @apply bg-secondary text-white hover:bg-secondary-600 active:bg-secondary-700;
        @apply focus:ring-secondary shadow-subtle hover:shadow-default;
    }

    .btn-accent {
        @apply bg-accent text-text-primary hover:bg-accent-600 active:bg-accent-700;
        @apply focus:ring-accent shadow-subtle hover:shadow-default;
    }

    .btn-outline {
        @apply border-2 border-primary text-primary bg-transparent;
        @apply hover:bg-primary hover:text-white active:bg-primary-700;
        @apply focus:ring-primary;
    }

    .btn-ghost {
        @apply text-primary bg-transparent hover:bg-primary-50 active:bg-primary-100;
        @apply focus:ring-primary;
    }

    /* Card Components */
    .card {
        @apply bg-surface rounded-xl p-6 shadow-subtle;
        @apply transition-all duration-300 hover:shadow-default;
    }

    .card-elevated {
        @apply bg-surface rounded-xl p-8 shadow-default;
        @apply transition-all duration-300 hover:shadow-strong;
    }

    /* Form Components */
    .input {
        @apply w-full px-4 py-3 rounded-lg border border-border-default;
        @apply bg-background text-text-primary placeholder-text-tertiary;
        @apply focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent;
        @apply transition-all duration-300;
    }

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

    .label {
        @apply block text-sm font-medium text-text-secondary mb-2;
    }

    /* Container Components */
    .container-narrow {
        @apply max-w-4xl mx-auto px-4 sm:px-6 lg:px-8;
    }

    .container-wide {
        @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
    }

    /* Section Spacing */
    .section {
        @apply py-16 md:py-24;
    }

    .section-sm {
        @apply py-12 md:py-16;
    }

    .section-lg {
        @apply py-24 md:py-32;
    }

    /* Sacred Divider */
    .divider-sacred {
        @apply h-px bg-gradient-to-r from-transparent via-primary-300 to-transparent;
        @apply my-8 md:my-12;
    }

    /* Quote Styling */
    .quote-sacred {
        @apply font-accent text-2xl md:text-3xl italic text-text-secondary;
        @apply border-l-4 border-accent pl-6 py-4;
    }

    /* Testimonial Card */
    .testimonial {
        @apply card relative;
        @apply before:content-['"'] before:absolute before:top-4 before:left-4;
        @apply before:text-6xl before:text-accent-300 before:font-accent;
    }

    /* Gallery Item */
    .gallery-item {
        @apply relative overflow-hidden rounded-lg border border-border-subtle;
        @apply transition-all hover:shadow-default;
        @apply hover:border-border-strong;
    }

    /* Navigation Link */
    .nav-link {
        @apply font-cta text-text-secondary hover:text-primary;
        @apply transition-colors duration-300 relative;
        @apply after:absolute after:bottom-0 after:left-0 after:w-0 after:h-0.5;
        @apply after:bg-primary after:transition-all after:duration-300;
        @apply hover:after:w-full;
    }

    /* Badge Component */
    .badge {
        @apply inline-flex items-center px-3 py-1 rounded-full text-sm font-medium;
    }

    .badge-primary {
        @apply bg-primary-100 text-primary-800;
    }

    .badge-success {
        @apply bg-success-light text-success-dark;
    }

    /* Loading Spinner */
    .spinner {
        @apply animate-spin rounded-full border-4 border-primary-200;
        @apply border-t-primary h-8 w-8;
    }
}

@layer utilities {
    /* Text Utilities */
    .text-balance {
        text-wrap: balance;
    }

    /* Gradient Text */
    .text-gradient-primary {
        @apply bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent;
    }

    /* Smooth Scroll */
    .scroll-smooth {
        scroll-behavior: smooth;
    }

    /* Breathing Animation */
    .animate-breathe {
        animation: breathe 6s ease-in-out infinite;
    }

    @keyframes breathe {
        0%, 100% {
            transform: scale(1);
            opacity: 1;
        }

        50% {
            transform: scale(1.05);
            opacity: 0.9;
        }
    }

    /* Fade In Animation */
    .animate-fade-in {
        animation: fadeIn 400ms ease-in-out;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Stagger Animation Delays */
    .stagger-1 {
        animation-delay: 100ms;
    }

    .stagger-2 {
        animation-delay: 200ms;
    }

    .stagger-3 {
        animation-delay: 300ms;
    }

    .stagger-4 {
        animation-delay: 400ms;
    }

    /* Sacred Glow Effect */
    .glow-sacred {
        box-shadow: 0 0 20px rgba(212, 118, 26, 0.3);
    }

    /* Parallax Container */
    .parallax {
        transform-style: preserve-3d;
        perspective: 1000px;
    }
}

/* Print Styles */
@media print {
    body {
        @apply bg-white text-black;
    }

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

/* 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;
    }
}