/**
 * Base CSS variables for CPIT-N theme system
 * This file defines the core CSS variables that are used across the application
 */

:root {
    /* Primary Colors */
    --color-primary: var(--theme-primary, #2e4a7d);
    --color-primary-light: var(--theme-primary-light, #60A5FA);
    --color-primary-dark: var(--theme-primary-dark, #1D4ED8);
    --color-primary-hover: var(--theme-primary-hover, #3B82F6);

    /* Secondary Colors */
    --color-secondary: var(--theme-secondary, #64748B);
    --color-secondary-light: var(--theme-secondary-light, #94A3B8);
    --color-secondary-dark: var(--theme-secondary-dark, #475569);

    /* Accent Colors */
    --color-accent: var(--theme-accent, #F59E0B);
    --color-accent-light: var(--theme-accent-light, #FCD34D);
    --color-accent-dark: var(--theme-accent-dark, #D97706);

    /* Neutral Colors */
    --color-background: var(--theme-background, #FFFFFF);
    --color-surface: var(--theme-surface, #F8FAFC);
    --color-surface-variant: var(--theme-surface-variant, #F1F5F9);
    --color-border: var(--theme-border, #E2E8F0);

    /* Text Colors */
    --color-text-primary: var(--theme-text-primary, #0F172A);
    --color-text-secondary: var(--theme-text-secondary, #475569);
    --color-text-disabled: var(--theme-text-disabled, #94A3B8);
    --color-text-inverse: var(--theme-text-inverse, #FFFFFF);

    /* Status Colors */
    --color-success: var(--theme-success, #10B981);
    --color-success-light: var(--theme-success-light, #D1FAE5);
    --color-warning: var(--theme-warning, #F59E0B);
    --color-warning-light: var(--theme-warning-light, #FEF3C7);
    --color-danger: var(--theme-danger, #EF4444);
    --color-danger-light: var(--theme-danger-light, #FEE2E2);
    --color-info: var(--theme-info, #3B82F6);
    --color-info-light: var(--theme-info-light, #DBEAFE);

    /* Map/Geospatial Colors */
    --color-route: var(--theme-route-color, #3B82F6);
    --color-route-secondary: var(--theme-route-color-secondary, #8B5CF6);
    --color-marker: var(--theme-marker-color, #EF4444);
    --color-selection: var(--theme-selection-color, #F59E0B);

    /* Shadows */
    --shadow-light: var(--theme-shadow-light, rgba(0, 0, 0, 0.05));
    --shadow-medium: var(--theme-shadow-medium, rgba(0, 0, 0, 0.1));
    --shadow-dark: var(--theme-shadow-dark, rgba(0, 0, 0, 0.15));

    /* Border Radius */
    --radius-sm: var(--theme-radius-sm, 4px);
    --radius-md: var(--theme-radius-md, 8px);
    --radius-lg: var(--theme-radius-lg, 12px);
    --radius-xl: var(--theme-radius-xl, 16px);
    --radius-full: var(--theme-radius-full, 9999px);

    /* Spacing */
    --spacing-xs: var(--theme-spacing-xs, 4px);
    --spacing-sm: var(--theme-spacing-sm, 8px);
    --spacing-md: var(--theme-spacing-md, 16px);
    --spacing-lg: var(--theme-spacing-lg, 24px);
    --spacing-xl: var(--theme-spacing-xl, 32px);

    /* Transitions */
    --transition-fast: var(--theme-transition-fast, 150ms);
    --transition-normal: var(--theme-transition-normal, 300ms);
    --transition-slow: var(--theme-transition-slow, 500ms);
}

/* Dark Mode */
:root.dark {
    --color-background: #0F172A;
    --color-surface: #1E293B;
    --color-surface-variant: #334155;
    --color-border: #475569;
    --color-text-primary: #F8FAFC;
    --color-text-secondary: #CBD5E1;
    --color-text-disabled: #64748B;
    --color-text-inverse: #0F172A;
    --shadow-light: rgba(0, 0, 0, 0.2);
    --shadow-medium: rgba(0, 0, 0, 0.3);
    --shadow-dark: rgba(0, 0, 0, 0.4);
}

/* Smooth transitions for theme changes */
* {
    transition-property: background-color, border-color, color, fill, stroke;
    transition-timing-function: ease;
    transition-duration: var(--transition-normal);
}

/* Disable transitions for specific elements that need instant changes */
.no-transition,
.no-transition * {
    transition: none !important;
}