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

body {
    margin: 0;
    font-family:
        -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
        "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
        sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

code {
    font-family:
        source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
}

@layer base {
    :root {
        --background: 0 0% 100%;
        --foreground: 0 0% 3.9%;
        --card: 0 0% 100%;
        --card-foreground: 0 0% 3.9%;
        --popover: 0 0% 100%;
        --popover-foreground: 0 0% 3.9%;
        --primary: 148 85% 18%;
        --primary-foreground: 0 0% 98%;
        --secondary: 35 45% 39%;
        --secondary-foreground: 0 0% 98%;
        --muted: 0 0% 96.1%;
        --muted-foreground: 0 0% 45.1%;
        --accent: 35 45% 39%;
        --accent-foreground: 0 0% 98%;
        --destructive: 0 84.2% 60.2%;
        --destructive-foreground: 0 0% 98%;
        --border: 0 0% 89.8%;
        --input: 0 0% 89.8%;
        --ring: 148 85% 18%;
        --chart-1: 12 76% 61%;
        --chart-2: 173 58% 39%;
        --chart-3: 197 37% 24%;
        --chart-4: 43 74% 66%;
        --chart-5: 27 87% 67%;
        --radius: 0.5rem;
    }
    .dark {
        --background: 0 0% 3.9%;
        --foreground: 0 0% 98%;
        --card: 0 0% 3.9%;
        --card-foreground: 0 0% 98%;
        --popover: 0 0% 3.9%;
        --popover-foreground: 0 0% 98%;
        --primary: 0 0% 98%;
        --primary-foreground: 0 0% 9%;
        --secondary: 0 0% 14.9%;
        --secondary-foreground: 0 0% 98%;
        --muted: 0 0% 14.9%;
        --muted-foreground: 0 0% 63.9%;
        --accent: 0 0% 14.9%;
        --accent-foreground: 0 0% 98%;
        --destructive: 0 62.8% 30.6%;
        --destructive-foreground: 0 0% 98%;
        --border: 0 0% 14.9%;
        --input: 0 0% 14.9%;
        --ring: 0 0% 83.1%;
        --chart-1: 220 70% 50%;
        --chart-2: 160 60% 45%;
        --chart-3: 30 80% 55%;
        --chart-4: 280 65% 60%;
        --chart-5: 340 75% 55%;
    }
}

@layer components {
    .container {
        @apply max-w-7xl;
    }
    
    /* Brand Colors */
    .bg-brand-primary {
        background-color: #0A4F07;
    }
    
    .bg-brand-secondary {
        background-color: #987030;
    }
    
    .text-brand-primary {
        color: #0A4F07;
    }
    
    .text-brand-secondary {
        color: #987030;
    }
    
    .border-brand-primary {
        border-color: #0A4F07;
    }
    
    .border-brand-secondary {
        border-color: #987030;
    }
    
    .bg-brand-gradient {
        background: linear-gradient(135deg, #0A4F07 0%, #987030 100%);
    }
    
    .bg-brand-gradient-hover:hover {
        background: linear-gradient(135deg, #083d05 0%, #7a5926 100%);
    }
    
    .text-brand-gradient {
        background: linear-gradient(135deg, #0A4F07 0%, #987030 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
    
    /* Custom Scrollbar Styles */
    .scrollbar-thin::-webkit-scrollbar {
        width: 6px;
    }
    
    .scrollbar-thin::-webkit-scrollbar-track {
        background: transparent;
        border-radius: 10px;
    }
    
    .scrollbar-thin::-webkit-scrollbar-thumb {
        background: rgba(16, 185, 129, 0.3);
        border-radius: 10px;
    }
    
    .scrollbar-thin::-webkit-scrollbar-thumb:hover {
        background: rgba(16, 185, 129, 0.5);
    }
    
    /* For Firefox */
    .scrollbar-thin {
        scrollbar-width: thin;
        scrollbar-color: rgba(16, 185, 129, 0.3) transparent;
    }
    
    /* Animated Icons */
    @keyframes bounce-slow {
        0%, 100% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-10px);
        }
    }
    
    @keyframes pulse-slow {
        0%, 100% {
            opacity: 1;
        }
        50% {
            opacity: 0.8;
        }
    }
    
    .animate-bounce-slow {
        animation: bounce-slow 3s ease-in-out infinite;
    }
    
    .animate-pulse-slow {
        animation: pulse-slow 2s ease-in-out infinite;
    }
    
    /* Typography Standards - Use these classes throughout the website */
    /* Hero Headings (H1) */
    .text-hero {
        font-size: 3.75rem; /* 60px */
        line-height: 1.1;
        font-weight: 700;
    }
    
    /* Section Headings (H2) */
    .text-section-heading {
        font-size: 2.25rem; /* 36px */
        line-height: 1.2;
        font-weight: 700;
    }
    
    /* Card/Subsection Headings (H3) */
    .text-card-heading {
        font-size: 1.5rem; /* 24px */
        line-height: 1.3;
        font-weight: 700;
    }
    
    /* Small Headings (H4) */
    .text-small-heading {
        font-size: 1.25rem; /* 20px */
        line-height: 1.4;
        font-weight: 600;
    }
    
    /* Body Text / Paragraphs */
    .text-body {
        font-size: 1rem; /* 16px */
        line-height: 1.6;
    }
    
    /* Large Body Text */
    .text-body-large {
        font-size: 1.125rem; /* 18px */
        line-height: 1.6;
    }
    
    /* Small Text */
    .text-small {
        font-size: 0.875rem; /* 14px */
        line-height: 1.5;
    }
    
    @media (max-width: 768px) {
        .text-hero {
            font-size: 2.5rem; /* 40px on mobile */
        }
        
        .text-section-heading {
            font-size: 1.875rem; /* 30px on mobile */
        }
    }
}

@layer base {
    * {
        @apply border-border;
    }
    body {
        @apply bg-background text-foreground;
    }
}

@layer base {
    [data-debug-wrapper="true"] {
        display: contents !important;
    }

    [data-debug-wrapper="true"] > * {
        margin-left: inherit;
        margin-right: inherit;
        margin-top: inherit;
        margin-bottom: inherit;
        padding-left: inherit;
        padding-right: inherit;
        padding-top: inherit;
        padding-bottom: inherit;
        column-gap: inherit;
        row-gap: inherit;
        gap: inherit;
        border-left-width: inherit;
        border-right-width: inherit;
        border-top-width: inherit;
        border-bottom-width: inherit;
        border-left-style: inherit;
        border-right-style: inherit;
        border-top-style: inherit;
        border-bottom-style: inherit;
        border-left-color: inherit;
        border-right-color: inherit;
        border-top-color: inherit;
        border-bottom-color: inherit;
    }
}