@import "tailwindcss";

/*
|--------------------------------------------------------------------------
| Tailwind Content Sources
|--------------------------------------------------------------------------
*/

@source "../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php";
@source "../../storage/framework/views/*.php";
@source "../**/*.blade.php";
@source "../**/*.js";

@theme {
    --color-foundation-green: #075b2b;
    --color-foundation-green-dark: #043d1d;
    --color-foundation-green-light: #15803d;
    --color-foundation-gold: #c9a227;
    --color-foundation-gold-light: #e7c75f;
}

/*
|--------------------------------------------------------------------------
| Bishop Angel Empowerment Foundation
|--------------------------------------------------------------------------
*/

:root {
    --foundation-green: #075b2b;
    --foundation-green-dark: #043d1d;
    --foundation-green-light: #15803d;

    --foundation-gold: #c9a227;
    --foundation-gold-light: #e7c75f;
}


/*
|--------------------------------------------------------------------------
| Base
|--------------------------------------------------------------------------
*/

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
}


/*
|--------------------------------------------------------------------------
| Headings
|--------------------------------------------------------------------------
*/

.font-serif {
    font-family: 'Playfair Display', serif;
}


/*
|--------------------------------------------------------------------------
| Text Selection
|--------------------------------------------------------------------------
*/

::selection {
    background: var(--foundation-green);
    color: white;
}


/*
|--------------------------------------------------------------------------
| Scrollbar
|--------------------------------------------------------------------------
*/

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f3f4f6;
}

::-webkit-scrollbar-thumb {
    background: var(--foundation-green);
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--foundation-green-dark);
}


/*
|--------------------------------------------------------------------------
| Focus
|--------------------------------------------------------------------------
*/

:focus-visible {
    outline: 2px solid var(--foundation-gold);
    outline-offset: 2px;
}