/* 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;

    /* Cream Palette (subtle warm beige, low saturation) */
    --bs-cream-50: #fffdf5;
    /* near-ivory */
    --bs-cream-100: #fff7ec;
    /* linen */
    --bs-cream-200: #fff0de;
    /* very light cream */
    --bs-cream-300: #fde7c8;
    /* light cream-beige */
    --bs-cream-400: #f5ddba;
    /* soft beige */
    --bs-cream-500: #e8cfab;
    /* muted beige */
    --bs-cream-600: #d5b995;
    /* deeper beige */
    --bs-cream-700: #b99d7b;
    /* tan/khaki */
    --bs-cream-800: #9a8165;
    /* cocoa beige */
    --bs-cream-900: #7e6953;
    /* warm brown-gray */
    --bs-cream-950: #504232;
    /* deep brown */

    /* 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);

    /* Semantic Colors for Nutrition */
    --color-orange: #fd7e14;
    --color-orange-light: rgba(255, 193, 7, 0.1);
    --color-blue: #0d6efd;
    --color-blue-light: rgba(13, 110, 253, 0.1);
    --color-green: #198754;
    --color-green-light: rgba(25, 135, 84, 0.1);
    --color-red: #dc3545;
    --color-red-light: rgba(220, 53, 69, 0.1);
    --color-purple: #6f42c1;
    --color-purple-light: rgba(111, 66, 193, 0.1);
    --color-teal: #20c997;
    --color-teal-light: rgba(32, 201, 151, 0.1);
    --color-brown: #8b6f47;
    --color-brown-light: rgba(139, 111, 71, 0.1);
    --color-yellow: #ffc107;
    --color-yellow-dark: #d39e00;
    --color-yellow-light: rgba(255, 193, 7, 0.15);

    /* Nutrition Badge Colors */
    --nutrition-calories-bg: var(--color-orange-light);
    --nutrition-calories-color: var(--color-orange);
    --nutrition-protein-bg: var(--color-blue-light);
    --nutrition-protein-color: var(--color-blue);
    --nutrition-carbs-bg: var(--color-green-light);
    --nutrition-carbs-color: var(--color-green);
    --nutrition-fat-bg: var(--color-red-light);
    --nutrition-fat-color: var(--color-red);

    /* ADA Compliance Badge Colors */
    --ada-recommended-bg: rgba(25, 135, 84, 0.15);
    --ada-recommended-color: #198754;
    --ada-recommended-border: rgba(25, 135, 84, 0.3);

    --ada-acceptable-bg: rgba(13, 202, 240, 0.15);
    --ada-acceptable-color: #0dcaf0;
    --ada-acceptable-border: rgba(13, 202, 240, 0.3);

    --ada-caution-bg: rgba(255, 193, 7, 0.15);
    --ada-caution-color: #d39e00;
    --ada-caution-border: rgba(255, 193, 7, 0.3);

    --ada-not-recommended-bg: rgba(220, 53, 69, 0.15);
    --ada-not-recommended-color: #dc3545;
    --ada-not-recommended-border: rgba(220, 53, 69, 0.3);

}

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

    /* Cream Palette (duplicated in :root for global access) */
    --bs-cream-50: #fffdf5;
    --bs-cream-100: #fff7ec;
    --bs-cream-200: #fff0de;
    --bs-cream-300: #fde7c8;
    --bs-cream-400: #f5ddba;
    --bs-cream-500: #e8cfab;
    --bs-cream-600: #d5b995;
    --bs-cream-700: #b99d7b;
    --bs-cream-800: #9a8165;
    --bs-cream-900: #7e6953;
    --bs-cream-950: #504232;
}