/**
 * Signpost Planner - CSS Design System Variables
 * 
 * Centralized design tokens for consistent styling across the plugin.
 * Load this file FIRST before all other CSS files.
 * 
 * @package ScoutPlanner
 * @version 1.0.0
 */

:root {
	/* ===== PRIMARY PALETTE ===== */
	/* Scout Green - Main brand color */
	--sp-primary-dark: #385435;
	--sp-primary: #688664;
	--sp-primary-light: #8fa88b;
	--sp-primary-lighter: #b4c4b1;
	
	/* ===== ACCENT COLORS ===== */
	--sp-accent-orange: #ff9800;    /* Warnings, today indicators */
	--sp-accent-red: #ff5722;       /* Urgent, critical */
	--sp-accent-amber: #ffc107;     /* Caution, attention */
	--sp-accent-blue: #2271b1;      /* Admin interface, info */
	--sp-accent-blue-dark: #135e96;
	
	/* ===== SEMANTIC COLORS ===== */
	--sp-success: #4caf50;
	--sp-success-dark: #388e3c;
	--sp-success-light: #c8e6c9;
	
	--sp-error: #c62828;
	--sp-error-dark: #b71c1c;
	--sp-error-light: #ffebee;
	
	--sp-warning: #ff9800;
	--sp-warning-dark: #f57c00;
	--sp-warning-light: #fff8f0;
	
	--sp-info: #2196f3;
	--sp-info-dark: #1976d2;
	--sp-info-light: #e6f7ff;
	
	/* ===== NEUTRAL GRAYS ===== */
	--sp-gray-50: #f9fafb;
	--sp-gray-100: #f3f4f6;
	--sp-gray-200: #e5e7eb;
	--sp-gray-300: #d1d5db;
	--sp-gray-400: #9ca3af;
	--sp-gray-500: #6b7280;
	--sp-gray-600: #4b5563;
	--sp-gray-700: #374151;
	--sp-gray-800: #1f2937;
	--sp-gray-900: #111827;
	
	/* ===== TEXT COLORS ===== */
	--sp-text-primary: #333333;
	--sp-text-secondary: #666666;
	--sp-text-tertiary: #999999;
	--sp-text-light: #ffffff;
	--sp-text-muted: #8c8f94;
	
	/* ===== BACKGROUND COLORS ===== */
	--sp-bg-white: #ffffff;
	--sp-bg-light: #f8f9fa;
	--sp-bg-gray: #f5f5f5;
	--sp-bg-dark: #2c3e50;
	
	/* ===== SPACING SCALE (8px base) ===== */
	--sp-space-1: 4px;     /* 0.25rem */
	--sp-space-2: 8px;     /* 0.5rem */
	--sp-space-3: 12px;    /* 0.75rem */
	--sp-space-4: 16px;    /* 1rem */
	--sp-space-5: 20px;    /* 1.25rem */
	--sp-space-6: 24px;    /* 1.5rem */
	--sp-space-8: 32px;    /* 2rem */
	--sp-space-10: 40px;   /* 2.5rem */
	--sp-space-12: 48px;   /* 3rem */
	--sp-space-16: 64px;   /* 4rem */
	--sp-space-20: 80px;   /* 5rem */
	
	/* ===== BORDER RADIUS SCALE ===== */
	--sp-radius-sm: 4px;    /* Small elements, inputs */
	--sp-radius-md: 8px;    /* Cards, buttons */
	--sp-radius-lg: 12px;   /* Large cards, modals */
	--sp-radius-xl: 16px;   /* Hero sections */
	--sp-radius-full: 9999px; /* Pills, badges, rounded */
	
	/* ===== TYPOGRAPHY SCALE ===== */
	--sp-text-xs: 0.75rem;    /* 12px */
	--sp-text-sm: 0.875rem;   /* 14px */
	--sp-text-base: 1rem;     /* 16px */
	--sp-text-lg: 1.125rem;   /* 18px */
	--sp-text-xl: 1.25rem;    /* 20px */
	--sp-text-2xl: 1.5rem;    /* 24px */
	--sp-text-3xl: 1.875rem;  /* 30px */
	--sp-text-4xl: 2.25rem;   /* 36px */
	
	/* Font Weights */
	--sp-font-normal: 400;
	--sp-font-medium: 500;
	--sp-font-semibold: 600;
	--sp-font-bold: 700;
	
	/* Line Heights */
	--sp-leading-tight: 1.25;
	--sp-leading-normal: 1.5;
	--sp-leading-relaxed: 1.75;
	
	/* ===== SHADOW SYSTEM ===== */
	--sp-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
	--sp-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
	--sp-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	--sp-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
	--sp-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
	--sp-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
	--sp-shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.15);
	
	/* Colored Shadows */
	--sp-shadow-primary: 0 4px 12px rgba(104, 134, 100, 0.4);
	--sp-shadow-primary-sm: 0 2px 8px rgba(104, 134, 100, 0.2);
	
	/* ===== TRANSITIONS ===== */
	--sp-transition-fast: 150ms ease-in-out;
	--sp-transition-base: 200ms ease-in-out;
	--sp-transition-slow: 300ms ease-in-out;
	
	/* ===== BORDERS ===== */
	--sp-border-width: 1px;
	--sp-border-width-thick: 2px;
	--sp-border-width-thicker: 3px;
	--sp-border-width-heavy: 4px;
	
	--sp-border-color: #e0e0e0;
	--sp-border-color-light: #e5e7eb;
	--sp-border-color-dark: #d1d5db;
	
	/* ===== Z-INDEX SCALE ===== */
	--sp-z-base: 1;
	--sp-z-dropdown: 1000;
	--sp-z-sticky: 1020;
	--sp-z-fixed: 1030;
	--sp-z-modal-backdrop: 1040;
	--sp-z-modal: 1050;
	--sp-z-popover: 1060;
	--sp-z-tooltip: 1070;
	--sp-z-notification: 1080;
	
	/* ===== STATUS BADGES ===== */
	--sp-badge-today-bg: #ff5722;
	--sp-badge-today-text: var(--sp-text-light);
	
	--sp-badge-soon-bg: #ff9800;
	--sp-badge-soon-text: var(--sp-text-light);
	
	--sp-badge-urgent-bg: #ffc107;
	--sp-badge-urgent-text: #333333;  /* Dark text for contrast */
	
	--sp-badge-normal-bg: var(--sp-gray-600);  /* Darker gray for better contrast */
	--sp-badge-normal-text: var(--sp-text-light);
	
	/* ===== CONTAINER WIDTHS ===== */
	--sp-container-sm: 640px;
	--sp-container-md: 768px;
	--sp-container-lg: 1024px;
	--sp-container-xl: 1200px;
	--sp-container-2xl: 1400px;
}

/**
 * Dark Mode Support (Future)
 * Uncomment and customize when implementing dark mode
 */
/*
@media (prefers-color-scheme: dark) {
	:root {
		--sp-text-primary: #f3f4f6;
		--sp-text-secondary: #d1d5db;
		--sp-bg-white: #1f2937;
		--sp-bg-light: #111827;
		--sp-border-color: #374151;
	}
}
*/

/**
 * High Contrast Mode Support
 */
@media (prefers-contrast: high) {
	:root {
		--sp-border-width: 2px;
		--sp-text-secondary: var(--sp-text-primary);
	}
}

/**
 * Reduced Motion Support
 */
@media (prefers-reduced-motion: reduce) {
	:root {
		--sp-transition-fast: 0ms;
		--sp-transition-base: 0ms;
		--sp-transition-slow: 0ms;
	}
}