/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */
@import url('https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap');

/* Apply the font globally */
body {
    font-family: 'Outfit', sans-serif;
}

/* Brown theme custom styles - Define brown color scale */
:root {
    --color-brown-25: #fefcfa;
    --color-brown-50: #fdf8f4;
    --color-brown-100: #f7e6d4;
    --color-brown-200: #efd0b0;
    --color-brown-300: #daa573;
    --color-brown-400: #c4864f;
    --color-brown-500: #a66b35;
    --color-brown-600: #8b5a2e;
    --color-brown-700: #6b4423;
    --color-brown-800: #4a2f17;
    --color-brown-900: #2d1c0e;

    /* Amber accent colors - warm complement to brown */
    --color-amber-50: #fffbeb;
    --color-amber-100: #fef3c7;
    --color-amber-200: #fde68a;
    --color-amber-300: #fcd34d;
    --color-amber-400: #fbbf24;
    --color-amber-500: #f59e0b;
    --color-amber-600: #d97706;
    --color-amber-700: #b45309;
    --color-amber-800: #92400e;
    --color-amber-900: #78350f;

    /* Turquoise accent colors - cool complement to warm brown */
    --color-turquoise-50: #f0fdfa;
    --color-turquoise-100: #ccfbf1;
    --color-turquoise-200: #99f6e4;
    --color-turquoise-300: #5eead4;
    --color-turquoise-400: #2dd4bf;
    --color-turquoise-500: #14b8a6;
    --color-turquoise-600: #0891b2;
    --color-turquoise-700: #0e7490;
    --color-turquoise-800: #155e75;
    --color-turquoise-900: #164e63;
}

/* Brown background colors */
.bg-brown-25 {
    background-color: var(--color-brown-25);
}

.bg-brown-50 {
    background-color: var(--color-brown-50);
}

.bg-brown-100 {
    background-color: var(--color-brown-100);
}

.bg-brown-200 {
    background-color: var(--color-brown-200);
}

.bg-brown-300 {
    background-color: var(--color-brown-300);
}

.bg-brown-400 {
    background-color: var(--color-brown-400);
}

.bg-brown-500 {
    background-color: var(--color-brown-500);
}

.bg-brown-600 {
    background-color: var(--color-brown-600);
}

.bg-brown-700 {
    background-color: var(--color-brown-700);
}

.bg-brown-800 {
    background-color: var(--color-brown-800);
}

.bg-brown-900 {
    background-color: var(--color-brown-900);
}

/* Brown text colors */
.text-brown-50 {
    color: var(--color-brown-50);
}

.text-brown-100 {
    color: var(--color-brown-100);
}

.text-brown-200 {
    color: var(--color-brown-200);
}

.text-brown-300 {
    color: var(--color-brown-300);
}

.text-brown-400 {
    color: var(--color-brown-400);
}

.text-brown-500 {
    color: var(--color-brown-500);
}

.text-brown-600 {
    color: var(--color-brown-600);
}

.text-brown-700 {
    color: var(--color-brown-700);
}

.text-brown-800 {
    color: var(--color-brown-800);
}

.text-brown-900 {
    color: var(--color-brown-900);
}

/* Brown border colors */
.border-brown-300 {
    border-color: var(--color-brown-300);
}

.border-brown-400 {
    border-color: var(--color-brown-400);
}

.border-brown-500 {
    border-color: var(--color-brown-500);
}

/* Amber background colors */
.bg-amber-50 {
    background-color: var(--color-amber-50);
}

.bg-amber-100 {
    background-color: var(--color-amber-100);
}

.bg-amber-200 {
    background-color: var(--color-amber-200);
}

.bg-amber-500 {
    background-color: var(--color-amber-500);
}

.bg-amber-600 {
    background-color: var(--color-amber-600);
}

.bg-amber-700 {
    background-color: var(--color-amber-700);
}

.bg-amber-900 {
    background-color: var(--color-amber-900);
}

/* Turquoise background colors */
.bg-turquoise-50 {
    background-color: var(--color-turquoise-50);
}

.bg-turquoise-100 {
    background-color: var(--color-turquoise-100);
}

.bg-turquoise-200 {
    background-color: var(--color-turquoise-200);
}

.bg-turquoise-500 {
    background-color: var(--color-turquoise-500);
}

.bg-turquoise-600 {
    background-color: var(--color-turquoise-600);
}

.bg-turquoise-700 {
    background-color: var(--color-turquoise-700);
}

.bg-turquoise-900 {
    background-color: var(--color-turquoise-900);
}

/* Amber text colors */
.text-amber-50 {
    color: var(--color-amber-50);
}

.text-amber-100 {
    color: var(--color-amber-100);
}

.text-amber-200 {
    color: var(--color-amber-200);
}

.text-amber-500 {
    color: var(--color-amber-500);
}

.text-amber-600 {
    color: var(--color-amber-600);
}

.text-amber-700 {
    color: var(--color-amber-700);
}

.text-amber-800 {
    color: var(--color-amber-800);
}

.text-amber-900 {
    color: var(--color-amber-900);
}

/* Turquoise text colors */
.text-turquoise-50 {
    color: var(--color-turquoise-50);
}

.text-turquoise-100 {
    color: var(--color-turquoise-100);
}

.text-turquoise-200 {
    color: var(--color-turquoise-200);
}

.text-turquoise-500 {
    color: var(--color-turquoise-500);
}

.text-turquoise-600 {
    color: var(--color-turquoise-600);
}

.text-turquoise-700 {
    color: var(--color-turquoise-700);
}

.text-turquoise-800 {
    color: var(--color-turquoise-800);
}

.text-turquoise-900 {
    color: var(--color-turquoise-900);
}

/* Turquoise border colors */
.border-turquoise-500 {
    border-color: var(--color-turquoise-500);
}

.border-turquoise-600 {
    border-color: var(--color-turquoise-600);
}

.border-turquoise-700 {
    border-color: var(--color-turquoise-700);
}

/* Brown hover states */
.hover\:bg-brown-200:hover {
    background-color: var(--color-brown-200);
}

.hover\:bg-brown-700:hover {
    background-color: var(--color-brown-700);
}

.hover\:text-brown-200:hover {
    color: var(--color-brown-200);
}

.hover\:text-brown-700:hover {
    color: var(--color-brown-700);
}

/* Turquoise hover states */
.hover\:bg-turquoise-600:hover {
    background-color: var(--color-turquoise-600);
}

.hover\:bg-turquoise-700:hover {
    background-color: var(--color-turquoise-700);
}

.hover\:bg-turquoise-800:hover {
    background-color: var(--color-turquoise-800);
}

.hover\:text-turquoise-600:hover {
    color: var(--color-turquoise-600);
}

.hover\:text-turquoise-700:hover {
    color: var(--color-turquoise-700);
}

/* Amber hover states */
.hover\:bg-amber-600:hover {
    background-color: var(--color-amber-600);
}

.hover\:bg-amber-700:hover {
    background-color: var(--color-amber-700);
}

.hover\:text-amber-600:hover {
    color: var(--color-amber-600);
}

.hover\:text-amber-700:hover {
    color: var(--color-amber-700);
}

/* Gradient support */
.from-brown-50 {
    --tw-gradient-from: var(--color-brown-50);
}

.to-brown-100 {
    --tw-gradient-to: var(--color-brown-100);
}

/* Smooth scrolling for anchor links */
html {
    scroll-behavior: smooth;
}

/* Custom focus styles for better accessibility */
a:focus,
button:focus {
    outline: 2px solid var(--color-turquoise-600);
    outline-offset: 2px;
}

/* Enhanced transitions */
.transition-colors {
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

/* Hero image rotation */
.hero-image {
    transform: rotate(2.0deg);
    transition: transform 0.3s ease;
}

.hero-image:hover {
    transform: rotate(0deg);
}