/*
 * Custom Styles for Awning Repairs London Website
 * This file complements the Tailwind CSS framework for unique design elements.
 *
 * Colour Palette:
 * - Amber (accents): #d97706 (Tailwind amber-600)
 * - Dark Neutrals (text, backgrounds): #262626 (Tailwind neutral-800), #171717 (Tailwind neutral-900)
 * - Light Neutrals (backgrounds): #fafafa (Tailwind neutral-50), #f5f5f5 (Tailwind neutral-100)
 * - Light Grey (scrollbar): #888
 */

/* Base body styles: Sets font and default text color */
body {
    font-family: 'Inter', sans-serif; /* Using Inter font preloaded in HTML */
    color: #262626; /* Equivalent to Tailwind's neutral-800 for primary text */
}

/* Custom Tailwind colour overrides/definitions for consistency and clarity */
.text-amber-600 {
    color: #d97706; /* Matches Tailwind's amber-600 */
}

.bg-amber-600 {
    background-color: #d97706; /* Matches Tailwind's amber-600 */
}

.hover\:bg-amber-700:hover {
    background-color: #b45309; /* Darker amber for hover states */
}

.focus\:ring-amber-500:focus {
    --tw-ring-color: #f59e0b; /* Amber ring colour for focus states */
}

.border-amber-600 {
    border-color: #d97706; /* Amber border colour */
}

.placeholder-amber-200::placeholder {
    color: #fcd34d; /* Lighter amber for placeholder text */
}

/* Custom Scrollbar Styling for a refined look */
::-webkit-scrollbar {
    width: 8px; /* Width of the vertical scrollbar */
}

::-webkit-scrollbar-track {
    background: #f1f1f1; /* Background of the scrollbar track */
    border-radius: 10px; /* Rounded corners for the track */
}

::-webkit-scrollbar-thumb {
    background: #888; /* Colour of the scrollbar thumb */
    border-radius: 10px; /* Rounded corners for the thumb */
}

::-webkit-scrollbar-thumb:hover {
    background: #555; /* Darker colour when hovering over the thumb */
}