@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

/* -------------------------------------------------------
   Brand Color Tokens (change these to update the entire site)
   Format: R G B  (space-separated for Tailwind opacity support)
   ------------------------------------------------------- */
:root {
    --color-brand:          234 88 12;   /* orange-600 — primary */
    --color-brand-light:    249 115 22;  /* orange-500 */
    --color-brand-lighter:  251 146 60;  /* orange-400 */
    --color-brand-lightest: 254 215 170; /* orange-200 */
    --color-brand-dark:     194 65 12;   /* orange-700 */
    --color-brand-darker:   124 45 18;   /* orange-900 */
    --color-accent:         59 130 246;  /* blue-500 — secondary */
}

[x-cloak] { display: none !important; }
:focus-visible { outline: 3px solid rgb(var(--color-brand)); outline-offset: 2px; }
.focus-ring:focus-visible { outline: 3px solid rgb(var(--color-brand)); outline-offset: 2px; }

html {
    scroll-behavior: smooth;
}

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

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: rgb(var(--color-brand));
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgb(var(--color-brand-dark));
}