/**
 * UNIFIED DESIGN SYSTEM - Community Health Intelligence
 * Single source of truth for all colors, spacing, typography
 * Professional healthcare palette with high contrast
 */

:root {
    /* ============================================
     PRIMARY PALETTE - Teal (Clinical Trust)
     ============================================ */
    --color-primary-950: #042f2e;
    --color-primary-900: #134e4a;
    --color-primary-800: #115e59;
    --color-primary-700: #0f766e;
    --color-primary-600: #0d9488;
    --color-primary-500: #14b8a6;
    /* Main teal */
    --color-primary-400: #2dd4bf;
    --color-primary-300: #5eead4;
    --color-primary-200: #99f6e4;
    --color-primary-100: #ccfbf1;
    --color-primary-50: #f0fdfa;

    /* ============================================
     SECONDARY PALETTE - Orange (Warmth, Action)
     ============================================ */
    --color-secondary-950: #431407;
    --color-secondary-900: #7c2d12;
    --color-secondary-800: #9a3412;
    --color-secondary-700: #c2410c;
    --color-secondary-600: #ea580c;
    --color-secondary-500: #f97316;
    /* Main orange */
    --color-secondary-400: #fb923c;
    --color-secondary-300: #fdba74;
    --color-secondary-200: #fed7aa;
    --color-secondary-100: #ffedd5;
    --color-secondary-50: #fff7ed;

    /* ============================================
     ACCENT PALETTE - Emerald (Success, Health)
     ============================================ */
    --color-accent-950: #022c22;
    --color-accent-900: #064e3b;
    --color-accent-800: #065f46;
    --color-accent-700: #047857;
    --color-accent-600: #059669;
    --color-accent-500: #10b981;
    /* Main emerald */
    --color-accent-400: #34d399;
    --color-accent-300: #6ee7b7;
    --color-accent-200: #a7f3d0;
    --color-accent-100: #d1fae5;
    --color-accent-50: #ecfdf5;

    /* ============================================
     NEUTRAL PALETTE - Professional Grays
     ============================================ */
    --color-neutral-950: #030712;
    --color-neutral-900: #111827;
    --color-neutral-800: #1f2937;
    --color-neutral-700: #374151;
    --color-neutral-600: #4b5563;
    --color-neutral-500: #6b7280;
    --color-neutral-400: #9ca3af;
    --color-neutral-300: #d1d5db;
    --color-neutral-200: #e5e7eb;
    --color-neutral-100: #f3f4f6;
    --color-neutral-50: #f9fafb;

    /* ============================================
     SEMANTIC COLORS
     ============================================ */
    --color-success: #10b981;
    --color-success-light: #d1fae5;
    --color-warning: #f59e0b;
    --color-warning-light: #fef3c7;
    --color-error: #ef4444;
    --color-error-light: #fee2e2;
    --color-info: #0ea5e9;
    --color-info-light: #cffafe;

    /* ============================================
     BACKGROUNDS
     ============================================ */
    --bg-primary: var(--color-neutral-900);
    --bg-secondary: var(--color-neutral-800);
    --bg-tertiary: var(--color-neutral-700);
    --bg-elevated: var(--color-neutral-800);
    --bg-overlay: rgb(17 24 39 / 95%);

    /* Glass effects */
    --bg-glass: rgb(255 255 255 / 5%);
    --bg-glass-hover: rgb(255 255 255 / 8%);
    --bg-glass-strong: rgb(255 255 255 / 12%);

    /* ============================================
     TEXT COLORS (High Contrast)
     ============================================ */
    --text-primary: #f9fafb;
    --text-secondary: #d1d5db;
    --text-tertiary: #9ca3af;
    --text-muted: #6b7280;
    --text-inverse: #111827;

    /* ============================================
     BORDERS
     ============================================ */
    --border-default: rgb(255 255 255 / 10%);
    --border-strong: rgb(255 255 255 / 20%);
    --border-subtle: rgb(255 255 255 / 5%);

    /* ============================================
     GRADIENTS
     ============================================ */
    --gradient-primary: linear-gradient(135deg, #0d9488 0%, #14b8a6 100%);
    --gradient-secondary: linear-gradient(135deg, #ea580c 0%, #f97316 100%);
    --gradient-accent: linear-gradient(135deg, #059669 0%, #10b981 100%);
    --gradient-hero: linear-gradient(135deg, #134e4a 0%, #0f766e 50%, #0d9488 100%);

    /* ============================================
     SHADOWS
     ============================================ */
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 15%);
    --shadow-md: 0 4px 6px rgb(0 0 0 / 20%);
    --shadow-lg: 0 10px 15px rgb(0 0 0 / 25%);
    --shadow-xl: 0 20px 25px rgb(0 0 0 / 30%);
    --shadow-glass: 0 8px 32px rgb(0 0 0 / 18%);

    /* Glow effects */
    --glow-primary: 0 0 20px rgb(20 184 166 / 40%);
    --glow-secondary: 0 0 20px rgb(249 115 22 / 40%);
    --glow-accent: 0 0 20px rgb(16 185 129 / 40%);

    /* ============================================
     TYPOGRAPHY
     ============================================ */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', 'Consolas', monospace;

    --text-xs: 0.75rem;
    /* 12px */
    --text-sm: 0.875rem;
    /* 14px */
    --text-base: 1rem;
    /* 16px */
    --text-lg: 1.125rem;
    /* 18px */
    --text-xl: 1.25rem;
    /* 20px */
    --text-2xl: 1.5rem;
    /* 24px */
    --text-3xl: 1.875rem;
    /* 30px */
    --text-4xl: 2.25rem;
    /* 36px */
    --text-5xl: 3rem;
    /* 48px */

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    /* ============================================
     SPACING
     ============================================ */
    --space-1: 0.25rem;
    /* 4px */
    --space-2: 0.5rem;
    /* 8px */
    --space-3: 0.75rem;
    /* 12px */
    --space-4: 1rem;
    /* 16px */
    --space-5: 1.25rem;
    /* 20px */
    --space-6: 1.5rem;
    /* 24px */
    --space-8: 2rem;
    /* 32px */
    --space-10: 2.5rem;
    /* 40px */
    --space-12: 3rem;
    /* 48px */
    --space-16: 4rem;
    /* 64px */
    --space-20: 5rem;
    /* 80px */
    --space-24: 6rem;
    /* 96px */

    /* ============================================
     BORDER RADIUS
     ============================================ */
    --radius-sm: 0.25rem;
    /* 4px */
    --radius-md: 0.375rem;
    /* 6px */
    --radius-lg: 0.5rem;
    /* 8px */
    --radius-xl: 0.75rem;
    /* 12px */
    --radius-2xl: 1rem;
    /* 16px */
    --radius-full: 9999px;

    /* ============================================
     TRANSITIONS
     ============================================ */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);

    /* ============================================
     Z-INDEX
     ============================================ */
    --z-base: 0;
    --z-dropdown: 1000;
    --z-sticky: 1100;
    --z-fixed: 1200;
    --z-modal-backdrop: 1300;
    --z-modal: 1400;
    --z-popover: 1500;
    --z-tooltip: 1600;

    /* ============================================
     BLUR
     ============================================ */
    --blur-sm: 8px;
    --blur-md: 16px;
    --blur-lg: 24px;
    --blur-xl: 40px;
}

/* ============================================
     CULTURESHERPA COMPATIBILITY - Warm Accent Colors
     ============================================ */
--color-warm-orange: #f0a850;
--color-warm-coral: #e85d4a;
--color-warm-peach: #ffa07a;

/* ============================================
     LEGACY COLOR SUPPORT - For gradual migration
     ============================================ */
--color-cyan-400: #22d3ee;
--color-cyan-300: #67e8f9;
--color-emerald-400: #34d399;
--color-emerald-300: #6ee7b7;
--color-violet-500: #8b5cf6;
--color-violet-400: #a78bfa;

/* ============================================
     SEVERITY/STATE TOKENS - Service Gap Analysis
     ============================================ */
--severity-critical: #dc2626;
--severity-critical-bg: #7f1d1d;
--severity-critical-border: #991b1b;
--severity-high: #f97316;
--severity-high-bg: #7c2d12;
--severity-high-border: #9a3412;
--severity-medium: #facc15;
--severity-medium-bg: #713f12;
--severity-medium-border: #854d0e;
--severity-low: #22c55e;
--severity-low-bg: #14532d;
--severity-low-border: #166534;

/* ============================================
     INTERACTIVE STATES - Buttons, Links, Controls
     ============================================ */
--interactive-default: var(--color-primary-500);
--interactive-hover: var(--color-primary-400);
--interactive-active: var(--color-primary-600);
--interactive-disabled: var(--color-neutral-600);
--interactive-disabled-bg: var(--color-neutral-800);
--interactive-focus: var(--color-primary-400);

/* ============================================
     TOAST SYSTEM - Light Theme Support
     ============================================ */
--toast-bg-light: #ffffff;
--toast-text-light: #1f2937;
--toast-border-light: #e5e7eb;
--toast-shadow-light: 0 10px 15px -3px rgb(0 0 0 / 10%);

--toast-success-light: #d1fae5;
--toast-success-text-light: #065f46;
--toast-error-light: #fee2e2;
--toast-error-text-light: #991b1b;
--toast-warning-light: #fef3c7;
--toast-warning-text-light: #92400e;
--toast-info-light: #cffafe;
--toast-info-text-light: #075985;

/* Dark theme (current default) */
--toast-bg-dark: var(--bg-elevated);
--toast-text-dark: var(--text-primary);
--toast-border-dark: var(--border-strong);

/* ============================================
     CONTRAST-SAFE TEXT TIERS - WCAG AA Compliant
     ============================================ */
--text-contrast-primary: #f9fafb;
/* 14.7:1 on #111827 - AAA */
--text-contrast-secondary: #d1d5db;
/* 7.2:1 on #111827 - AA Large */
--text-contrast-tertiary: #a8b1bd;
/* 4.8:1 on #111827 - AA Minimum */
--text-contrast-quaternary: #9ca3af;
/* 4.1:1 on #111827 - Borderline */

/* For light backgrounds */
--text-contrast-dark-primary: #111827;
/* 14.7:1 on #f9fafb */
--text-contrast-dark-secondary: #1f2937;
/* 11.9:1 on #f9fafb */
--text-contrast-dark-tertiary: #374151;
/* 7.4:1 on #f9fafb */

/* ============================================
     OVERLAY BACKGROUNDS - Modals, Popovers, Backdrops
     ============================================ */
--overlay-dark-heavy: rgb(0 0 0 / 75%);
--overlay-dark-medium: rgb(0 0 0 / 62%);
--overlay-dark-light: rgb(0 0 0 / 45%);
--overlay-dark-subtle: rgb(0 0 0 / 25%);

--overlay-light-heavy: rgb(255 255 255 / 95%);
--overlay-light-medium: rgb(255 255 255 / 75%);
--overlay-light-subtle: rgb(255 255 255 / 50%);

--overlay-blur-dark: rgb(17 25 40 / 85%);
--overlay-blur-light: rgb(249 250 251 / 85%);

/* ============================================
     BRAND DYNAMIC TOKENS - Per-Organization Theming
     ============================================ */
--brand-primary: var(--color-primary-500);
/* Default: Teal #14b8a6 */
--brand-primary-light: var(--color-primary-300);
--brand-primary-dark: var(--color-primary-700);
--brand-accent: var(--color-secondary-500);
/* Default: Orange #f97316 */
--brand-accent-light: var(--color-secondary-300);
--brand-accent-dark: var(--color-secondary-700);

/* Organization-specific overrides via inline styles or scoped CSS */
/* Example: <div style="--brand-primary: #customcolor"> */

/* ============================================
     FOCUS RING TOKENS - Keyboard Navigation
     ============================================ */
--focus-ring-color: var(--color-primary-400);
--focus-ring-width: 2px;
--focus-ring-offset: 2px;
--focus-ring-style: solid;
--focus-ring-opacity: 1;

/* Alternative focus styles */
--focus-outline-color: var(--color-primary-400);
--focus-outline-width: 3px;
--focus-outline-offset: 3px;
--focus-outline-style: dashed;

/* ============================================
     FORM ELEMENT TOKENS
     ============================================ */
--input-bg: var(--bg-secondary);
--input-border: var(--border-default);
--input-border-hover: var(--border-strong);
--input-border-focus: var(--color-primary-500);
--input-text: var(--text-primary);
--input-placeholder: var(--color-neutral-300);
/* Improved from 400 - now 7.2:1 */
--input-disabled-bg: var(--color-neutral-800);
--input-disabled-text: var(--color-neutral-500);

/* ============================================
     CARD VARIANTS - Unified Card System
     ============================================ */
--card-bg-default: var(--bg-secondary);
--card-bg-elevated: var(--bg-elevated);
--card-bg-glass: var(--bg-glass);
--card-border-default: var(--border-default);
--card-border-strong: var(--border-strong);
--card-shadow-default: var(--shadow-md);
--card-shadow-hover: var(--shadow-lg);

/* ============================================
     BADGE TOKENS - Status Indicators
     ============================================ */
--badge-success-bg: var(--color-accent-900);
--badge-success-text: var(--color-accent-300);
--badge-success-border: var(--color-accent-700);

--badge-warning-bg: var(--color-secondary-900);
--badge-warning-text: var(--color-secondary-300);
--badge-warning-border: var(--color-secondary-700);

--badge-error-bg: #7f1d1d;
--badge-error-text: #fca5a5;
--badge-error-border: #991b1b;

--badge-info-bg: #0c4a6e;
--badge-info-text: #7dd3fc;
--badge-info-border: #075985;

--badge-neutral-bg: var(--color-neutral-800);
--badge-neutral-text: var(--color-neutral-200);
--badge-neutral-border: var(--color-neutral-600);

/* ============================================
     DATA VISUALIZATION - Charts & Graphs
     ============================================ */
--chart-grid: rgb(255 255 255 / 8%);
--chart-axis: var(--color-neutral-600);
--chart-label: var(--text-tertiary);
--chart-tooltip-bg: var(--overlay-blur-dark);
--chart-tooltip-border: var(--border-strong);

/* Chart color sequence (accessible) */
--chart-color-1: var(--color-primary-400);
--chart-color-2: var(--color-secondary-400);
--chart-color-3: var(--color-accent-400);
--chart-color-4: var(--color-cyan-400);
--chart-color-5: var(--color-violet-400);
--chart-color-6: var(--color-warm-orange);

/* ============================================
     MAP TOKENS - Geographic Visualizations
     ============================================ */
--map-background: var(--color-neutral-900);
--map-water: #1e3a5f;
--map-land: #2d4356;
--map-border: #506d85;
--map-label: var(--text-secondary);

--map-marker-default: var(--color-primary-500);
--map-marker-hover: var(--color-primary-300);
--map-marker-selected: var(--color-secondary-500);
--map-cluster-bg: var(--color-primary-600);
--map-cluster-text: var(--text-primary);

/* ============================================
     ANIMATION TOKENS
     ============================================ */
--animation-duration-fast: 150ms;
--animation-duration-base: 250ms;
--animation-duration-slow: 350ms;
--animation-duration-slower: 500ms;

--animation-easing-default: cubic-bezier(0.4, 0, 0.2, 1);
--animation-easing-in: cubic-bezier(0.4, 0, 1, 1);
--animation-easing-out: cubic-bezier(0, 0, 0.2, 1);
--animation-easing-in-out: cubic-bezier(0.4, 0, 0.2, 1);

/* ============================================
     SKELETON LOADING
     ============================================ */
--skeleton-base: var(--color-neutral-800);
--skeleton-highlight: var(--color-neutral-700);
--skeleton-shimmer: linear-gradient(90deg,
    transparent,
    rgb(255 255 255 / 5%),
    transparent);
}

/* ============================================
   FOCUS STATES
   ============================================ */
:focus-visible {
    outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
}