/* ==========================================================================
   tokens.css - Design tokens (CSS custom properties) for councilsepa.org
   Single source of truth for colors, typography, spacing, shadows.
   No rules here - only custom properties. Load this first.
   ========================================================================== */

:root,
[data-bs-theme=light] {

    /* --------------------------------------------------------
       CORE COLORS (HSL & Emphasis sets)
       -------------------------------------------------------- */

    --bs-blue: hsla(216, 98%, 52%, 1);
    --bs-blue-subtle: hsla(216, 98%, 82%, 1);
    --bs-blue-emphasis: hsla(216, 98%, 40%, 1);

    --bs-indigo: hsla(263, 90%, 51%, 1);
    --bs-indigo-subtle: hsla(263, 90%, 81%, 1);
    --bs-indigo-emphasis: hsla(263, 90%, 40%, 1);

    --bs-purple: hsla(261, 51%, 51%, 1);
    --bs-purple-subtle: hsla(261, 51%, 91%, 1);
    --bs-purple-emphasis: hsla(261, 51%, 31%, 1);

    --bs-pink: hsla(312, 33%, 94%, 1);
    --bs-pink-subtle: hsla(330, 67%, 82%, 1);
    --bs-pink-emphasis: hsla(330, 67%, 32%, 1);

    --bs-red: hsla(354, 70%, 54%, 1);
    --bs-red-subtle: hsla(354, 70%, 84%, 1);
    --bs-red-emphasis: hsla(354, 70%, 34%, 1);

    --bs-orange: hsla(27, 98%, 54%, 1);
    --bs-orange-subtle: hsla(27, 98%, 84%, 1);
    --bs-orange-emphasis: hsla(27, 98%, 34%, 1);

    --bs-yellow: hsla(45, 100%, 51%, 1);
    --bs-yellow-subtle: hsla(45, 100%, 81%, 1);
    --bs-yellow-emphasis: hsla(45, 100%, 31%, 1);

    --bs-green: hsla(152, 69%, 31%, 1);
    --bs-green-subtle: hsla(152, 69%, 61%, 1);
    --bs-green-emphasis: hsla(152, 69%, 21%, 1);

    --bs-teal: hsla(162, 73%, 46%, 1);
    --bs-teal-subtle: hsla(162, 73%, 76%, 1);
    --bs-teal-emphasis: hsla(162, 73%, 26%, 1);

    --bs-cyan: hsla(190, 90%, 50%, 1);
    --bs-cyan-subtle: hsla(190, 90%, 80%, 1);
    --bs-cyan-emphasis: hsla(190, 90%, 30%, 1);

    /* --------------------------------------------------------
       NEUTRALS (Black / White / Gray palette)
       -------------------------------------------------------- */

    --bs-black: hsla(0, 0%, 0%, 1);
    --bs-black-subtle: hsla(0, 0%, 20%, 1);
    --bs-black-emphasis: hsla(0, 0%, 10%, 1);

    --bs-white: hsla(0, 0%, 100%, 1);
    --bs-white-subtle: hsla(0, 0%, 90%, 1);
    --bs-white-emphasis: hsla(0, 0%, 80%, 1);

    --bs-gray: #a2a6cd !important;
    --bs-gray-dark: #343a40 !important;
    --bs-gray-100: #f8f9fa !important;
    --bs-gray-200: #e9ecef !important;
    --bs-gray-300: #dee2e6 !important;
    --bs-gray-400: #ced4da !important;
    --bs-gray-500: #adb5bd !important;
    --bs-gray-600: #6c757d !important;
    --bs-gray-700: #495057 !important;
    --bs-gray-800: #343a40 !important;
    --bs-gray-900: #212529 !important;

    /* --------------------------------------------------------
       BRAND COLORS (Primary, Secondary, etc.)
       Primary = green (#00543d), Secondary = purple (#55298a).
       App-specific aliases below map onto these so there is one
       source of truth for each hue.
       -------------------------------------------------------- */

    --bs-primary: #00543d !important;
    --bs-secondary: #55298a !important;
    --bs-success: #198754 !important;
    --bs-warning: #ffc107 !important;
    --bs-danger: #dc3545 !important;
    --bs-error: #ff2400 !important;

    --bs-primary-subtle: #e3efe3 !important;
    --bs-secondary-subtle: #f5ebf3 !important;

    --bs-primary-rgb: 0, 84, 61 !important;
    --bs-secondary-rgb: 85, 41, 138 !important;
    --bs-success-rgb: 25, 135, 84 !important;
    --bs-warning-rgb: 255, 193, 7 !important;
    --bs-danger-rgb: 220, 53, 69 !important;
    --bs-error-rgb: 255, 36, 0 !important;

    /* --------------------------------------------------------
       CONTAINER / SURFACE COLORS
       -------------------------------------------------------- */

    --bs-container-primary: #e3efe3 !important;
    --bs-light-primary: #e3efe3 !important;
    --bs-container-secondary: #f5ebf3 !important;

    --bs-tertiary: #1e1e1e !important;
    --bs-container-tertiary: #f5f5eb !important;

    --bs-light-grey: #f5f5f5 !important;

    --bs-container-primary-rgb: 227, 239, 227 !important;
    --bs-light-primary-rgb: 227, 239, 227 !important;
    --bs-container-secondary-rgb: 245, 235, 243 !important;
    --bs-tertiary-rgb: 30, 30, 30 !important;
    --bs-container-tertiary-rgb: 245, 245, 235 !important;
    --bs-light-grey-rgb: 245, 245, 245 !important;

    /* --------------------------------------------------------
       TYPOGRAPHY
       -------------------------------------------------------- */

    --bs-primary-text-emphasis: #052c65 !important;
    --bs-secondary-text-emphasis: #2b2f32 !important;
    --bs-success-text-emphasis: #0a3622 !important;
    --bs-info-text-emphasis: #055160 !important;
    --bs-warning-text-emphasis: #664d03 !important;
    --bs-danger-text-emphasis: #58151c !important;
    --bs-light-text-emphasis: #495057 !important;
    --bs-dark-text-emphasis: #495057 !important;

    --bs-white-rgb: 255, 255, 255 !important;
    --bs-black-rgb: 0, 0, 0 !important;
    --bs-font-sans-serif: "Oxygen", sans-serif !important;
    --bs-font-monospace: "Oxygen", sans-serif !important;
    --bs-gradient: linear-gradient(180deg, hsla(0, 0%, 100%, .15), hsla(0, 0%, 100%, 0)) !important;

    /* Body colors */

    --bs-body-font-family: var(--bs-font-sans-serif) !important;
    --bs-body-font-size: 1rem !important;
    --bs-body-font-weight: 400 !important;
    --bs-body-line-height: 1.5 !important;
    --bs-body-color: #212529 !important;
    --bs-body-color-rgb: 33, 37, 41 !important;
    --bs-body-bg: #fff !important;
    --bs-body-bg-rgb: 255, 255, 255 !important;

    /* Emphasis */

    --bs-emphasis-color: #000 !important;
    --bs-emphasis-color-rgb: 0, 0, 0 !important;
    --bs-secondary-color: rgba(33, 37, 41, .75) !important;
    --bs-secondary-color-rgb: 33, 37, 41 !important;
    --bs-secondary-bg: #e9ecef !important;
    --bs-secondary-bg-rgb: 233, 236, 239 !important;
    --bs-tertiary-color: rgba(33, 37, 41, .5) !important;
    --bs-tertiary-color-rgb: 33, 37, 41 !important;
    --bs-tertiary-bg: #f8f9fa !important;
    --bs-tertiary-bg-rgb: 248, 249, 250 !important;
    --bs-heading-color: inherit !important;

    /* --------------------------------------------------------
       LINK COLORS
       -------------------------------------------------------- */

    --bs-link-color: #00543d !important;
    --bs-link-color-rgb: 0, 84, 61 !important;
    --bs-link-decoration: underline !important;
    --bs-link-hover-color: #004331 !important;
    --bs-link-hover-color-rgb: 0, 67, 49 !important;
    --bs-code-color: #d63384 !important;

    /* --------------------------------------------------------
       HIGHLIGHTING & FEEDBACK
       -------------------------------------------------------- */

    --bs-highlight-color: #212529 !important;
    --bs-highlight-bg: #fff3cd !important;

    --bs-form-valid-color: #198754 !important;
    --bs-form-valid-border-color: #198754 !important;

    --bs-form-invalid-color: #dc3545 !important;
    --bs-form-invalid-border-color: #dc3545 !important;

    /* --------------------------------------------------------
       BORDER & SHADOW SYSTEM
       -------------------------------------------------------- */

    --bs-border-width: 1px !important;
    --bs-border-style: solid !important;
    --bs-border-color: #dee2e6 !important;
    --bs-border-color-translucent: rgba(0, 0, 0, .175) !important;
    --bs-border-radius: 0.375rem !important;
    --bs-border-radius-sm: 0.25rem !important;
    --bs-border-radius-lg: 0.5rem !important;
    --bs-border-radius-xl: 1rem !important;
    --bs-border-radius-xxl: 2rem !important;
    --bs-border-radius-2xl: var(--bs-border-radius-xxl) !important;
    --bs-border-radius-pill: 50rem !important;

    /* Shadows */

    --bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, .15) !important;
    --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, .075) !important;
    --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, .175) !important;
    --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, .075) !important;

    /* --------------------------------------------------------
       FOCUS RING
       -------------------------------------------------------- */

    --bs-focus-ring-width: 0.25rem !important;
    --bs-focus-ring-opacity: 0.25 !important;
    --bs-focus-ring-color: rgba(13, 110, 253, .25) !important;

    /* --------------------------------------------------------
       SUBTLE BACKGROUNDS
       -------------------------------------------------------- */

    --bs-primary-bg-subtle: #e3efe3 !important;
    --bs-secondary-bg-subtle: #f5ebf3 !important;
    --bs-success-bg-subtle: #d1e7dd !important;
    --bs-info-bg-subtle: #cff4fc !important;
    --bs-warning-bg-subtle: #fff3cd !important;
    --bs-danger-bg-subtle: #f8d7da !important;
    --bs-light-bg-subtle: #fcfcfd !important;
    --bs-dark-bg-subtle: #ced4da !important;

    /* Subtle borders */

    --bs-primary-border-subtle: #9ec5fe !important;
    --bs-secondary-border-subtle: #c4c8cb !important;
    --bs-success-border-subtle: #a3cfbb !important;
    --bs-info-border-subtle: #9eeaf9 !important;
    --bs-warning-border-subtle: #ffe69c !important;
    --bs-danger-border-subtle: #f1aeb5 !important;
    --bs-light-border-subtle: #e9ecef !important;
    --bs-dark-border-subtle: #adb5bd !important;

    /* --------------------------------------------------------
       APP ALIASES & SEMANTIC TOKENS
       Brand-hue aliases used by the resources app and cards.
       These point at the canonical brand values above so the
       same purple/teal is never hardcoded in two places.
       -------------------------------------------------------- */

    --primary-purple: #55298a;   /* == --bs-secondary */
    --secondary-teal: #20cb98;   /* near --bs-teal; resources accent */
    --light-purple-bg: #f5ebf3;  /* == --bs-secondary-subtle */
    --hover-green: #1ab888;

    /* Bootstrap pagination override (resources app) */
    --bs-pagination-active-bg: #55298a;
    --bs-pagination-active-border-color: #55298a;

    /* --------------------------------------------------------
       RESOURCE TYPE COLORS (map markers + badges)
       NOTE: mirrored as JS literals in assets/js/map.js
       (RESOURCE_COLORS) because MapLibre paint expressions need
       literal values. Keep the two in sync.
       -------------------------------------------------------- */

    --resource-recovery: #8243da;
    --resource-family: #ff66c4;
    --resource-housing: #00bf63;
    --resource-transportation: #ff6663;

    /* Card component tokens (marketing cards) */
    --card-primary: #006b54;
    --card-primary-dark: #005544;
    --card-primary-light: #008068;
    --card-accent-purple: #55298a;   /* == --bs-secondary */
    --card-accent-teal: #00857a;
    --card-white: #ffffff;
    --card-black: #1a1a1a;
    --card-gray-100: #f8f9fa;
    --card-gray-200: #e9ecef;
    --card-gray-600: #6c757d;
    --card-gray-800: #343a40;
    --card-bg-warm: #faf5f0;
    --card-bg-pink-tint: rgba(85, 41, 138, 0.08);
    --card-border-tan: #c4b5a0;
    --card-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --card-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --card-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    --card-transition: all 0.3s ease;
    --card-transition-fast: all 0.2s ease;
}

[data-bs-theme=dark] {
    /* Core */
    --bs-body-bg: #121212 !important;
    --bs-body-bg-rgb: 18, 18, 18 !important;
    --bs-body-color: #e6e6e6 !important;
    --bs-body-color-rgb: 230, 230, 230 !important;

    --bs-emphasis-color: #fff !important;
    --bs-emphasis-color-rgb: 255, 255, 255 !important;

    --bs-secondary-color: rgba(230, 230, 230, .75) !important;
    --bs-secondary-bg: #2b2b2b !important;

    --bs-tertiary-color: rgba(230, 230, 230, .5) !important;
    --bs-tertiary-bg: #1d1d1d !important;

    /* Neutrals */
    --bs-black: #fff !important;
    --bs-black-subtle: #ccc !important;
    --bs-black-emphasis: #e6e6e6 !important;

    --bs-white: #000 !important;
    --bs-white-subtle: #111 !important;
    --bs-white-emphasis: #222 !important;

    --bs-gray-100: #2e2e2e !important;
    --bs-gray-200: #3a3a3a !important;
    --bs-gray-300: #444 !important;
    --bs-gray-400: #555 !important;
    --bs-gray-500: #777 !important;
    --bs-gray-600: #999 !important;
    --bs-gray-700: #bbb !important;
    --bs-gray-800: #ddd !important;
    --bs-gray-900: #f1f1f1 !important;

    /* Brand Colors — slightly brightened for dark mode contrast */
    --bs-primary: #3ad0a7 !important;
    --bs-secondary: #a97be4 !important;
    --bs-success: #49d07e !important;
    --bs-warning: #ffd85e !important;
    --bs-danger: #ff6f7e !important;

    --bs-primary-rgb: 58, 208, 167 !important;
    --bs-secondary-rgb: 169, 123, 228 !important;
    --bs-success-rgb: 73, 208, 126 !important;
    --bs-warning-rgb: 255, 216, 94 !important;
    --bs-danger-rgb: 255, 111, 126 !important;

    /* Containers */
    --bs-container-primary: #1e2a26 !important;
    --bs-container-secondary: #2d2634 !important;
    --bs-container-tertiary: #232323 !important;

    /* Subtle backgrounds tuned darker */
    --bs-primary-bg-subtle: #0f2922 !important;
    --bs-secondary-bg-subtle: #261b34 !important;
    --bs-success-bg-subtle: #0f2c1f !important;
    --bs-warning-bg-subtle: #433514 !important;
    --bs-danger-bg-subtle: #3b1a1f !important;

    /* Text Emphasis */
    --bs-primary-text-emphasis: #baffec !important;
    --bs-secondary-text-emphasis: #e1c6ff !important;
    --bs-success-text-emphasis: #b6ffd1 !important;
    --bs-warning-text-emphasis: #ffeea6 !important;
    --bs-danger-text-emphasis: #ffccd4 !important;

    /* Borders */
    --bs-border-color: rgba(255,255,255,.25) !important;
    --bs-border-color-translucent: rgba(255,255,255,.15) !important;

    /* Shadows (lightened for dark mode) */
    --bs-box-shadow: 0 0.5rem 1rem rgba(0,0,0,.5) !important;
    --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0,0,0,.4) !important;
    --bs-box-shadow-lg: 0 1rem 3rem rgba(0,0,0,.6) !important;

    /* Focus Rings */
    --bs-focus-ring-color: rgba(255,255,255,.35) !important;

    /* Links */
    --bs-link-color: #42e2bd !important;
    --bs-link-hover-color: #2bbf9e !important;
    --bs-link-color-rgb: 66, 226, 189 !important;
    --bs-link-hover-color-rgb: 43, 191, 158 !important;
}