/**
 * WCP Field Media Upload - CSS Variables
 *
 * Centralized design tokens for consistent theming.
 * Edit colors here to change the entire application appearance.
 *
 * COLOR NAMING CONVENTION:
 * --color-{name}         : Base color
 * --color-{name}-{shade} : Shade variant (50=lightest, 900=darkest)
 * --color-{name}-bg      : Background tint
 * --color-{name}-text    : Text color for use on light backgrounds
 * --color-{name}-border  : Border color
 */

:root {
    /* ===========================================
       COLOR PALETTE - Light Mode
       =========================================== */

    /* Brand/Primary Colors - Monochrome theme matching logo */
    --color-primary: #2d2d2d;
    --color-primary-dark: #1a1a1a;
    --color-primary-light: #4a4a4a;

    /* Accent Color - Used for interactive elements */
    --color-accent: #2563eb;
    --color-accent-light: #3b82f6;
    --color-accent-dark: #1d4ed8;
    --color-accent-bg: rgba(37, 99, 235, 0.1);

    /* ===========================================
       SEMANTIC COLORS
       =========================================== */

    /* Red - Errors, danger, delete actions */
    --color-red-50: #fef2f2;
    --color-red-100: #fee2e2;
    --color-red-200: #fecaca;
    --color-red-500: #ef4444;
    --color-red-600: #dc2626;
    --color-red-700: #b91c1c;
    --color-red-800: #991b1b;

    /* Green - Success, confirmation, vegetation */
    --color-green-50: #f0fdf4;
    --color-green-100: #dcfce7;
    --color-green-200: #bbf7d0;
    --color-green-500: #22c55e;
    --color-green-600: #16a34a;
    --color-green-700: #15803d;
    --color-green-800: #166534;

    /* Blue - Info, links, water */
    --color-blue-50: #eff6ff;
    --color-blue-100: #dbeafe;
    --color-blue-200: #bfdbfe;
    --color-blue-500: #3b82f6;
    --color-blue-600: #2563eb;
    --color-blue-700: #1d4ed8;
    --color-blue-800: #1e40af;

    /* Sky - Light blue for water, info badges */
    --color-sky-50: #f0f9ff;
    --color-sky-100: #e0f2fe;
    --color-sky-500: #0ea5e9;
    --color-sky-600: #0284c7;
    --color-sky-700: #0369a1;

    /* Cyan - Deeper blue-green */
    --color-cyan-50: #ecfeff;
    --color-cyan-100: #cffafe;
    --color-cyan-200: #a5f3fc;
    --color-cyan-500: #06b6d4;
    --color-cyan-600: #0891b2;
    --color-cyan-700: #0e7490;

    /* Teal - Blue-green for categories */
    --color-teal-50: #f0fdfa;
    --color-teal-100: #ccfbf1;
    --color-teal-200: #99f6e4;
    --color-teal-500: #14b8a6;
    --color-teal-600: #0d9488;
    --color-teal-700: #0f766e;

    /* Orange - Distinct from amber, more saturated */
    --color-orange-50: #fff7ed;
    --color-orange-100: #ffedd5;
    --color-orange-200: #fed7aa;
    --color-orange-500: #f97316;
    --color-orange-600: #ea580c;
    --color-orange-700: #c2410c;

    /* Amber/Yellow - Warnings, caution */
    --color-amber-50: #fffbeb;
    --color-amber-100: #fef3c7;
    --color-amber-200: #fde68a;
    --color-amber-500: #f59e0b;
    --color-amber-600: #d97706;
    --color-amber-700: #b45309;
    --color-amber-800: #92400e;

    /* Yellow aliases (map to amber for consistency) */
    --color-yellow-50: var(--color-amber-50);
    --color-yellow-100: var(--color-amber-100);
    --color-yellow-200: var(--color-amber-200);
    --color-yellow-500: var(--color-amber-500);
    --color-yellow-600: var(--color-amber-600);
    --color-yellow-700: var(--color-amber-700);
    --color-yellow-800: var(--color-amber-800);

    /* Purple/Violet - Structures, special items */
    --color-purple-50: #faf5ff;
    --color-purple-100: #f3e8ff;
    --color-purple-200: #e9d5ff;
    --color-purple-500: #a855f7;
    --color-purple-600: #9333ea;
    --color-purple-700: #7c3aed;
    --color-purple-800: #6b21a8;

    /* Semantic Aliases */
    --color-success: var(--color-green-600);
    --color-success-bg: var(--color-green-50);
    --color-success-text: var(--color-green-800);
    --color-success-border: var(--color-green-200);

    --color-warning: var(--color-amber-500);
    --color-warning-bg: var(--color-amber-50);
    --color-warning-text: var(--color-amber-800);
    --color-warning-border: var(--color-amber-200);

    --color-error: var(--color-red-600);
    --color-error-bg: var(--color-red-50);
    --color-error-text: var(--color-red-800);
    --color-error-border: var(--color-red-200);

    --color-info: var(--color-blue-600);
    --color-info-bg: var(--color-blue-50);
    --color-info-text: var(--color-blue-800);
    --color-info-border: var(--color-blue-200);

    /* ===========================================
       WORK CATEGORY COLORS
       =========================================== */
    --color-category-vegetation: var(--color-green-700);
    --color-category-vegetation-bg: var(--color-green-50);
    --color-category-vegetation-border: var(--color-green-200);

    --color-category-water: var(--color-sky-700);
    --color-category-water-bg: var(--color-sky-50);
    --color-category-water-border: var(--color-sky-100);

    --color-category-structures: var(--color-purple-700);
    --color-category-structures-bg: var(--color-purple-50);
    --color-category-structures-border: var(--color-purple-100);

    --color-category-site-prep: var(--color-amber-700);
    --color-category-site-prep-bg: var(--color-amber-50);
    --color-category-site-prep-border: var(--color-amber-100);

    --color-category-other: var(--color-gray-600);
    --color-category-other-bg: var(--color-gray-50);
    --color-category-other-border: var(--color-gray-200);

    /* ===========================================
       MEASUREMENT CATEGORY COLORS
       =========================================== */
    --color-measure-physical: var(--color-blue-700);
    --color-measure-physical-bg: var(--color-blue-50);

    --color-measure-chemical: var(--color-purple-700);
    --color-measure-chemical-bg: var(--color-purple-50);

    --color-measure-biological: var(--color-green-700);
    --color-measure-biological-bg: var(--color-green-50);

    --color-measure-habitat: var(--color-amber-700);
    --color-measure-habitat-bg: var(--color-amber-50);

    --color-measure-weather: var(--color-sky-700);
    --color-measure-weather-bg: var(--color-sky-50);

    /* ===========================================
       POINT TYPE BADGE COLORS
       Used in Measurement > Point Types color picker
       =========================================== */
    --color-point-blue: var(--color-blue-700);
    --color-point-blue-bg: var(--color-blue-100);

    --color-point-green: var(--color-green-700);
    --color-point-green-bg: var(--color-green-100);

    --color-point-teal: var(--color-teal-700);
    --color-point-teal-bg: var(--color-teal-100);

    --color-point-orange: var(--color-orange-700);
    --color-point-orange-bg: var(--color-orange-100);

    --color-point-red: var(--color-red-700);
    --color-point-red-bg: var(--color-red-100);

    --color-point-purple: var(--color-purple-700);
    --color-point-purple-bg: var(--color-purple-100);

    --color-point-gray: var(--color-gray-600);
    --color-point-gray-bg: var(--color-gray-200);

    /* ===========================================
       TAXON/SPECIES COLORS
       =========================================== */
    --color-taxon-bird: #1565c0;
    --color-taxon-bird-bg: #e3f2fd;

    --color-taxon-mammal: #8b4513;
    --color-taxon-mammal-bg: #fff8e1;

    --color-taxon-reptile: #228b22;
    --color-taxon-reptile-bg: #e8f5e9;

    --color-taxon-amphibian: #1e90ff;
    --color-taxon-amphibian-bg: #e1f5fe;

    --color-taxon-fish: #0097a7;
    --color-taxon-fish-bg: #e0f7fa;

    --color-taxon-insect: #f59e0b;
    --color-taxon-insect-bg: #fff8e1;

    --color-taxon-arachnid: #8b4513;
    --color-taxon-arachnid-bg: #efebe9;

    --color-taxon-plant: #2e7d32;
    --color-taxon-plant-bg: #e8f5e9;

    --color-taxon-fungi: #6d4c41;
    --color-taxon-fungi-bg: #efebe9;

    --color-taxon-unknown: #708090;
    --color-taxon-unknown-bg: #f5f5f5;

    /* ===========================================
       CHART COLORS (for data visualization)
       =========================================== */
    --color-chart-1: #3b82f6;  /* Blue */
    --color-chart-2: #ef4444;  /* Red */
    --color-chart-3: #22c55e;  /* Green */
    --color-chart-4: #f59e0b;  /* Amber */
    --color-chart-5: #8b5cf6;  /* Purple */
    --color-chart-6: #94a3b8;  /* Gray */
    --color-chart-7: #ec4899;  /* Pink */
    --color-chart-8: #14b8a6;  /* Teal */

    /* ===========================================
       OVERLAY & BACKDROP COLORS
       =========================================== */
    --color-overlay-light: rgba(255, 255, 255, 0.9);
    --color-overlay-dark: rgba(0, 0, 0, 0.5);
    --color-backdrop: rgba(0, 0, 0, 0.6);

    /* ===========================================
       GRAY SCALE
       =========================================== */
    --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-gray-900: #111827;

    /* Core Colors */
    --color-white: #ffffff;
    --color-black: #000000;

    /* ===========================================
       DEBUG/DEVELOPMENT COLORS
       =========================================== */
    --color-debug-bg: #fffbe6;
    --color-debug-border: #ffe58f;

    /* ===========================================
       DARK MODE COLORS (Slate palette)
       =========================================== */
    --dark-bg-primary: #0f172a;      /* slate-900 - darkest, main background */
    --dark-bg-secondary: #1e293b;    /* slate-800 - cards, panels */
    --dark-bg-tertiary: #334155;     /* slate-700 - hover states, borders */
    --dark-bg-elevated: #475569;     /* slate-600 - elevated elements */

    --dark-border-primary: #334155;  /* slate-700 */
    --dark-border-secondary: #1e293b; /* slate-800 */

    --dark-text-primary: #f1f5f9;    /* slate-100 - primary text */
    --dark-text-secondary: #e2e8f0;  /* slate-200 - secondary text */
    --dark-text-muted: #94a3b8;      /* slate-400 - muted text */
    --dark-text-dimmed: #64748b;     /* slate-500 - very muted text */

    /* ===========================================
       TYPOGRAPHY
       =========================================== */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    --font-size-xs: 0.75rem;     /* 12px */
    --font-size-sm: 0.875rem;    /* 14px */
    --font-size-base: 1rem;      /* 16px */
    --font-size-lg: 1.125rem;    /* 18px */
    --font-size-xl: 1.25rem;     /* 20px */
    --font-size-2xl: 1.5rem;     /* 24px */
    --font-size-3xl: 1.875rem;   /* 30px */

    --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
       =========================================== */
    --spacing-1: 0.25rem;   /* 4px */
    --spacing-2: 0.5rem;    /* 8px */
    --spacing-3: 0.75rem;   /* 12px */
    --spacing-4: 1rem;      /* 16px */
    --spacing-5: 1.25rem;   /* 20px */
    --spacing-6: 1.5rem;    /* 24px */
    --spacing-8: 2rem;      /* 32px */
    --spacing-10: 2.5rem;   /* 40px */
    --spacing-12: 3rem;     /* 48px */

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

    /* ===========================================
       SHADOWS
       =========================================== */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

    /* Component-specific shadows */
    --shadow-card: 0 4px 12px rgb(0 0 0 / 0.08);
    --shadow-card-hover: 0 4px 12px rgb(0 0 0 / 0.15);
    --shadow-dropdown: 0 4px 12px rgb(0 0 0 / 0.15);
    --shadow-modal: 0 20px 60px rgb(0 0 0 / 0.3);
    --shadow-floating: 0 2px 8px rgb(0 0 0 / 0.15);
    --shadow-control: 0 2px 4px rgb(0 0 0 / 0.3);
    --shadow-mobile-bar: 0 -4px 20px rgb(0 0 0 / 0.25);

    /* Focus ring */
    --shadow-focus: 0 0 0 3px rgb(45 45 45 / 0.1);
    --shadow-focus-primary: 0 0 0 3px rgb(59 130 246 / 0.2);

    /* Dark mode shadows (more visible on dark backgrounds) */
    --shadow-dark-sm: 0 1px 3px 0 rgb(0 0 0 / 0.3);
    --shadow-dark-md: 0 4px 6px -1px rgb(0 0 0 / 0.4);
    --shadow-dark-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5);
    --shadow-dark-modal: 0 20px 60px rgb(0 0 0 / 0.5);
    --shadow-dark-card: 0 4px 12px rgb(0 0 0 / 0.3);

    /* ===========================================
       TRANSITIONS
       =========================================== */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;

    /* ===========================================
       Z-INDEX SCALE
       =========================================== */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-popover: 600;
    --z-tooltip: 700;
    --z-toast: 800;
}

/* ===========================================
   DARK MODE OVERRIDES
   Apply dark mode colors when user prefers dark color scheme
   Note: Use actual values, not var() references, for proper resolution
   =========================================== */
@media (prefers-color-scheme: dark) {
    :root {
        /* Override gray scale for dark mode (inverted) */
        --color-gray-50: #0f172a;   /* Was light, now darkest */
        --color-gray-100: #1e293b;
        --color-gray-200: #334155;
        --color-gray-300: #475569;
        --color-gray-400: #64748b;
        --color-gray-500: #94a3b8;
        --color-gray-600: #cbd5e1;
        --color-gray-700: #e2e8f0;
        --color-gray-800: #f1f5f9;
        --color-gray-900: #f8fafc;  /* Was dark, now lightest */

        /* Flip white/black for dark mode */
        --color-white: #1e293b;
        --color-black: #f1f5f9;

        /* Use accent color for primary in dark mode for better visibility */
        --color-primary: #2563eb;
        --color-primary-dark: #1d4ed8;
        --color-primary-light: #3b82f6;
    }
}