/**
 * static/css/cssvariables.css
 * CSS custom properties (variables) for SolutecApp.
 * Based on Bootstrap 3 blue theme with custom additions.
 */

:root {
	/* ==================
	   COLORS - Primary (Bootstrap 3 Blue)
	   ================== */
	--sol-color-primary: #337ab7;
	--sol-color-primary-dark: #286090;
	--sol-color-primary-light: #5bc0de;

	/* ==================
	   COLORS - Semantic
	   ================== */
	--sol-color-success: #5cb85c;
	--sol-color-warning: #f0ad4e;
	--sol-color-danger: #d9534f;
	--sol-color-info: #5bc0de;

	/* ==================
	   COLORS - Neutral
	   ================== */
	--sol-color-text: #333333;
	--sol-color-text-soft: #777777;
	--sol-color-text-muted: #6c757d;
	--sol-color-border: #dddddd;
	--sol-color-bg: #ffffff;
	--sol-color-bg-alt: #f5f5f5;
	--sol-color-surface: #f8f9fa;

	/* ==================
	   COLORS - Semantic Backgrounds (for badges, alerts)
	   ================== */
	--sol-color-success-bg: #d4edda;
	--sol-color-warning-bg: #fff3cd;
	--sol-color-danger-bg: #f8d7da;
	--sol-color-info-bg: #d1ecf1;

	/* ==================
	   COLORS - Semantic Text (for text on semantic backgrounds)
	   These ensure WCAG contrast compliance when used with their -bg counterparts.
	   ================== */
	--sol-color-success-text: #155724;
	--sol-color-warning-text: #856404;
	--sol-color-danger-text: #721c24;
	--sol-color-info-text: #0c5460;

	/* ==================
	   COLORS - Amber (orphan states, special warnings)
	   Distinct from warning - used for "needs attention" states like orphan records.
	   ================== */
	--sol-color-amber: #f59e0b;
	--sol-color-amber-bg: #fffbeb;
	--sol-color-amber-text: #b45309;

	/* ==================
	   TYPOGRAPHY
	   ================== */
	--sol-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
		sans-serif;
	--sol-font-size-base: 1rem;
	--sol-font-size-sm: 0.875rem;
	--sol-font-size-lg: 1.125rem;

	/* ==================
	   SPACING & BORDERS
	   ================== */
	--sol-border-radius: 4px;
	--sol-border-radius-lg: 6px;
	--sol-border-radius-xl: 8px;

	/* ==================
	   SHADOWS
	   ================== */
	--sol-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
	--sol-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
	--sol-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);

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

	/* ==================
	   Z-INDEX SCALE
	   ================== */
	--sol-z-dropdown: 1000;
	--sol-z-sticky: 1020;
	--sol-z-fixed: 1030;
	--sol-z-modal-backdrop: 1040;
	--sol-z-modal: 1050;
	--sol-z-popover: 1060;
	--sol-z-tooltip: 1070;
}