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

/* Theme variables */
:root {
    --primary: #2563eb;
    --secondary: #3b82f6;
    --accent: #60a5fa;
    --text: #1f2937;
    --background: #f9fafb;
    --footer-bg: #1e40af;
    --footer-text: #f1f5f9;
}

/* Theme specific styles */
@layer components {
    .btn-primary {
        @apply px-4 py-2 text-white bg-blue-600 rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2;
    }

    .btn-secondary {
        @apply px-4 py-2 text-white bg-blue-500 rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2;
    }

    .card {
        @apply p-6 bg-white rounded-lg shadow-md;
    }

    .form-input {
        @apply w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500;
    }
}

/* Arizona Carports specific overrides */
header.app-header {
    background-color: #2563eb !important; /* BLUE-600 */
    color: white !important;
}

/* All headers in the template should have blue bg */
.theme-header, header, .app-header {
    background-color: #2563eb !important; /* BLUE-600 */
    color: white !important;
}

/* Initially hide the theme header */
.theme-header {
    display: none !important; /* Don't use @apply with utility classes */
    background-color: #2563eb; /* Blue theme header */
    color: white;
}

/* This utility class will be applied by JavaScript */
#app-header.hidden + .theme-header {
    display: block !important; /* When app header is hidden, show theme header */
}

header h1 {
    color: white !important;
}

/* Footer styling - apply to all footer tags */
footer, .theme-footer {
    background-color: #1e40af !important; /* BLUE-800 */
    color: white !important;
}

footer p {
    color: white !important;
}