/**
 * colors.css — Single source of truth for all brand color tokens.
 *
 * All colors are defined here as CSS custom properties.
 * No color values may be hardcoded in any other CSS or JS file.
 * The Tailwind config in index.html references these variables so that
 * Tailwind utility classes (e.g. bg-navy) resolve through these tokens.
 */

:root {
    /* ── Core brand blues ── */
    --color-navy:            #1d3561;
    --color-navy-dark:       #152845;
    --color-navy-light:      #2a4a80;

    /* ── Primary blue scale ── */
    --color-primary-50:      #e8eef7;
    --color-primary-100:     #c6d5eb;
    --color-primary-200:     #9fb8db;
    --color-primary-300:     #779bcb;
    --color-primary-400:     #5585be;
    --color-primary-500:     #3370b0;
    --color-primary-600:     #2558a0;
    --color-primary-700:     #1a4285;
    --color-primary-800:     #153368;
    --color-primary-900:     #0f244d;

    /* ── Semantic / status colors ── */
    --color-success-bg:      #dcfce7;
    --color-success-text:    #15803d;
    --color-success-light:   #86efac;
    --color-warning-bg:      #fef9c3;
    --color-warning-text:    #a16207;
    --color-warning-light:   #fbbf24;
    --color-error-bg:        #fee2e2;
    --color-error-bg-subtle: #fff5f5;
    --color-error-text:      #dc2626;
    --color-error-hover:     #b91c1c;

    /* ── Neutral grays (for text and surfaces) ── */
    --color-text-primary:    #1a1a1a;
    --color-gray-50:         #f9fafb;
    --color-gray-100:        #f3f4f6;
    --color-gray-200:        #e5e7eb;
    --color-gray-300:        #d1d5db;
    --color-gray-400:        #9ca3af;
    --color-gray-500:        #6b7280;
    --color-gray-600:        #4b5563;
    --color-gray-700:        #374151;
    --color-gray-800:        #1f2937;
    --color-surface:         #ffffff;
    --color-background:      #f8f9fa;

    /* ── Tag colors ── */
    --color-tag-education-bar:        #BA7517;
    --color-tag-education-pill-bg:    #FAEEDA;
    --color-tag-education-pill-text:  #854F0B;
    --color-tag-tutoring-bar:         #378ADD;
    --color-tag-tutoring-pill-bg:     #E6F1FB;
    --color-tag-tutoring-pill-text:   #185FA5;
    --color-tag-manual-labor-bar:     #1D9E75;
    --color-tag-manual-labor-pill-bg: #E1F5EE;
    --color-tag-manual-labor-pill-text:#0F6E56;
    --color-tag-community-outreach-bar: #7F77DD;
    --color-tag-community-outreach-pill-bg: #EEEDFE;
    --color-tag-community-outreach-pill-text: #3C3489;
    --color-tag-animal-care-bar:      #D85A30;
    --color-tag-animal-care-pill-bg:  #FAECE7;
    --color-tag-animal-care-pill-text:#993C1D;
    --color-tag-elder-care-bar:       #D4537E;
    --color-tag-elder-care-pill-bg:   #FBEAF0;
    --color-tag-elder-care-pill-text: #72243E;
    --color-tag-food-service-bar:     #EF9F27;
    --color-tag-food-service-pill-bg: #FAEEDA;
    --color-tag-food-service-pill-text:#633806;
    --color-tag-environmental-bar:    #0F6E56;
    --color-tag-environmental-pill-bg:#E1F5EE;
    --color-tag-environmental-pill-text:#04342C;
    --color-tag-indoor-bar:           #888780;
    --color-tag-indoor-pill-bg:       #F1EFE8;
    --color-tag-indoor-pill-text:     #444441;
    --color-tag-outdoor-bar:          #888780;
    --color-tag-outdoor-pill-bg:      #F1EFE8;
    --color-tag-outdoor-pill-text:    #444441;
    --color-tag-default-bar:          #C8C5BB;
    --color-tag-default-pill-bg:      #F1EFE8;
    --color-tag-default-pill-text:    #444441;

    /* ── Community Partners section bar colors ── */
    --color-partners-section-bg:        #f0f4fb;
    --color-partners-section-border:    var(--color-primary-200);
    --color-partners-section-text:      var(--color-navy);
    --color-partners-card-bg:           #ffffff;
    --color-partners-card-border:       var(--color-gray-200);
    --color-partners-logo-bg:           var(--color-gray-200);
    --color-partners-logo-fg:           var(--color-gray-400);
    --color-partners-overlay-bg:        rgba(0, 0, 0, 0.45);

    /* ── Map / terrain colors (used only in MapView) ── */
    --color-map-terrain:     #e8f0e0;
    --color-map-hills:       #c5daa8;
    --color-map-hills-alt:   #b8d49a;
    --color-map-road:        #d4c9a8;
    --color-map-center-line: #f0e8c8;
    --color-map-water:       #b8d4e8;
    --color-map-grid:        #cccccc;

    /* ── Transparent white overlays ── */
    --color-white-5:         rgba(255, 255, 255, 0.05);
    --color-white-10:        rgba(255, 255, 255, 0.1);
    --color-white-20:        rgba(255, 255, 255, 0.2);
    --color-white-30:        rgba(255, 255, 255, 0.3);
    --color-white-35:        rgba(255, 255, 255, 0.35);
    --color-white-40:        rgba(255, 255, 255, 0.4);
    --color-white-50:        rgba(255, 255, 255, 0.5);
    --color-white-60:        rgba(255, 255, 255, 0.6);
    --color-white-70:        rgba(255, 255, 255, 0.7);
    --color-white-80:        rgba(255, 255, 255, 0.8);
    --color-white-90:        rgba(255, 255, 255, 0.9);

    /* ── Transparent black overlays ── */
    --color-black-5:         rgba(0, 0, 0, 0.05);
    --color-black-6:         rgba(0, 0, 0, 0.06);
    --color-black-10:        rgba(0, 0, 0, 0.1);
    --color-black-20:        rgba(0, 0, 0, 0.2);
    --color-black-30:        rgba(0, 0, 0, 0.3);
    --color-black-40:        rgba(0, 0, 0, 0.4);
    --color-black-50:        rgba(0, 0, 0, 0.5);
    --color-black-60:        rgba(0, 0, 0, 0.6);
    --color-black-70:        rgba(0, 0, 0, 0.7);
    --color-black-80:        rgba(0, 0, 0, 0.8);
    --color-black-90:        rgba(0, 0, 0, 0.9);

    /* ── Additional semantic colors ── */
    --color-signed-up:       #16a34a;
    --color-error-light:     #fca5a5;
    --color-error:           #ef4444;
    --color-error-bg-light:  #fecaca;

    /* ── Brand greens (from logo forest/hill colors) ── */
    --color-forest:              #1b5228;   /* deep logo tree green */
    --color-forest-dark:         #123a1c;   /* darker for hover */
    --color-forest-light:        #246630;   /* lighter variant */
    --color-forest-50:           #edf7f0;   /* faint green tint */
    --color-forest-100:          #cce9d4;   /* light sage */
    --color-forest-200:          #9dd3b4;   /* soft green */
    --color-forest-400:          #3ca470;   /* medium green (logo hills) */

    /* ── Highlight / accent ── */
    --color-highlight-orange:    #f59e0b;

    /* ── Heart rating widget colors (used in OppRatingStars and cards.css) ── */
    --color-heart-filled:        #e11d48;
    --color-heart-filled-stroke: #c01040;
    --color-heart-empty-rated:   #fda4af;

    /* ── Predicted rating badge (muted mauve tone) ── */
    --color-predicted-muted:     #c08080;

    /* ── Warm neutrals (visual redesign) ── */
    --color-cream:        #faf8f4;
    --color-warm-white:   #fff9f2;
    --color-charcoal:     #1e2420;
    --color-border:       #dde5de;
    --color-mid:          #4a5550;
    --color-muted:        #8a9490;
}