/*
 * Custom Styles for AwningRepair.co.uk London Website
 * This file complements the Tailwind CSS framework for unique design elements.
 *
 * Colour Palette:
 * - Primary Dark (backgrounds, text): #292524 (Tailwind stone-800), #1c1917 (Tailwind stone-900)
 * - Accent (buttons, highlights): #fcd34d (Tailwind amber-300), #d97706 (Tailwind amber-600), #b45309 (Tailwind amber-700)
 * - Light Neutrals (backgrounds): #fafaf9 (Tailwind stone-50), #f5f5f4 (Tailwind stone-100), #e7e5e4 (Tailwind stone-200)
 */

/* Base body styles: Sets font and default text color */
body {
    font-family: 'Roboto', sans-serif; /* Primary content font */
    color: #44403c; /* Equivalent to Tailwind's stone-700 for primary text */
}

/* Font Family Overrides for specific elements for a unique typographic feel */
.font-playfair {
    font-family: 'Playfair Display', serif; /* Used for headings and strong calls to action */
}

.font-roboto {
    font-family: 'Roboto', sans-serif; /* Used for body text and descriptive elements */
}

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

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

.border-amber-500 {
    border-color: #f59e0b; /* Amber border colour */
}

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

.hover\:text-amber-200:hover {
    color: #fde68a; /* Lighter amber for hover states on text */
}

.hover\:text-amber-300:hover {
    color: #fcd34d; /* Amber for hover states on 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 */
}