/* 
 * KB Aesthetics - Custom Styles
 * Base styles that complement Tailwind
 */

:root {
    --brand-50: #f2fcf5;
    --brand-100: #e1f6e7;
    --brand-200: #c3ebd1;
    --brand-300: #92d8af;
    --brand-400: #5ac186;
    --brand-500: #33a668;
    --brand-600: #1d8750;
    --brand-700: #156b3f;
    --brand-800: #135533;
    --brand-900: #11462b;
    --cream-50: #fdfcf8;
    --cream-100: #faf8f0;
}

body {
    background-color: var(--cream-50);
    color: #1e293b; /* slate-800 */
}

/* Smooth image loading */
img {
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

img[data-src] {
    opacity: 0;
}

/* Selection color */
::selection {
    background-color: var(--brand-200);
    color: var(--brand-900);
}

/* Custom focus styles for accessibility */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--brand-500);
    outline-offset: 2px;
}