/* static/css/colors.css */

/* Define custom colors for the light theme */
[data-bs-theme="light"] {
    --bs-black: #333;

    /* Primary Colors (tan-hide) */
    --bs-primary-25: #fff7ef;
    --bs-primary-50: #fff6ed;
    --bs-primary-100: #ffead4;
    --bs-primary-200: #ffd1a8;
    --bs-primary-300: #ffb071;
    --bs-primary-400: #ff914d;
    --bs-primary-500: #fe6211;
    --bs-primary-600: #ef4707;
    --bs-primary-700: #c63208;
    --bs-primary-800: #9d290f;
    --bs-primary-900: #7e2410;
    --bs-primary-950: #440f06;

    /* == Secondary Colors (picton-blue) == */
    --bs-secondary-50: #eff8ff;
    --bs-secondary-100: #dff0ff;
    --bs-secondary-200: #b8e3ff;
    --bs-secondary-300: #78cdff;
    --bs-secondary-400: #1eadff;
    --bs-secondary-500: #069bf1;
    /* could be a 'blue' brand color */
    --bs-secondary-600: #007ace;
    --bs-secondary-700: #0061a7;
    --bs-secondary-800: #02528a;
    --bs-secondary-900: #084572;
    --bs-secondary-950: #062b4b;

    /* Gray Palette */
    --bs-gray-50: #f8f9fa;
    /* very light gray */
    --bs-gray-100: #e9ecef;
    --bs-gray-200: #dee2e6;
    --bs-gray-300: #ced4da;
    --bs-gray-400: #adb5bd;
    --bs-gray-500: #6c757d;
    --bs-gray-600: #495057;
    --bs-gray-700: #343a40;
    --bs-gray-800: #212529;
    --bs-gray-900: #121416;

    /* White Palette */
    --bs-white: #ffffff;
    --bs-white-alt: #fafafa;

    /* Override Bootstrap's primary colors with your tan-hide colors */
    --bs-primary: var(--bs-primary-500);
    /* Primary Background Subtle as a gradient */
    --bs-primary-bg-subtle: var(--bs-primary-600);

}

/* Optionally, use :root for any variables that should be available globally */
:root {

    /* == Primary Colors (tan-hide) == */
    --bs-primary-50: #fff6ed;
    --bs-primary-100: #ffead4;
    --bs-primary-200: #ffd1a8;
    --bs-primary-300: #ffb071;
    --bs-primary-400: #ff914d;
    --bs-primary-500: #fe6211;
    /* often used as an 'orange' brand color */
    --bs-primary-600: #ef4707;
    --bs-primary-700: #c63208;
    --bs-primary-800: #9d290f;
    --bs-primary-900: #7e2410;
    --bs-primary-950: #440f06;

    /* == Secondary Colors (picton-blue) == */
    --bs-secondary-50: #eff8ff;
    --bs-secondary-100: #dff0ff;
    --bs-secondary-200: #b8e3ff;
    --bs-secondary-300: #78cdff;
    --bs-secondary-400: #1eadff;
    --bs-secondary-500: #069bf1;
    /* could be a 'blue' brand color */
    --bs-secondary-600: #007ace;
    --bs-secondary-700: #0061a7;
    --bs-secondary-800: #02528a;
    --bs-secondary-900: #084572;
    --bs-secondary-950: #062b4b;

    /* == For completeness, if you want them separate == */
    /* picton-blue (same values as 'secondary'): */
    --bs-picton-blue-50: #eff8ff;
    --bs-picton-blue-100: #dff0ff;
    --bs-picton-blue-200: #b8e3ff;
    --bs-picton-blue-300: #78cdff;
    --bs-picton-blue-400: #1eadff;
    --bs-picton-blue-500: #069bf1;
    --bs-picton-blue-600: #007ace;
    --bs-picton-blue-700: #0061a7;
    --bs-picton-blue-800: #02528a;
    --bs-picton-blue-900: #084572;
    --bs-picton-blue-950: #062b4b;

    /* tan-hide (identical to primary): */
    --bs-tan-hide-50: #fff6ed;
    --bs-tan-hide-100: #ffead4;
    --bs-tan-hide-200: #ffd1a8;
    --bs-tan-hide-300: #ffb071;
    --bs-tan-hide-400: #ff914d;
    --bs-tan-hide-500: #fe6211;
    --bs-tan-hide-600: #ef4707;
    --bs-tan-hide-700: #c63208;
    --bs-tan-hide-800: #9d290f;
    --bs-tan-hide-900: #7e2410;
    --bs-tan-hide-950: #440f06;

    /* == If you also reference these == */
    --bs-dark: #084572;
    /* example: you might pick a "dark" color from secondary or black */
    --bs-white: #ffffff;
    --bs-blue: #069bf1;
    /* example: maybe you wanted a single 'blue' var */
    --bs-orange: #fe6211;
    /* example: brand orange pulled from primary-500 */
}