/* theme.css - IronGate Design System & Variables */

:root {
	/* --- Primitives: Base Colors --- */
	--color-white: #ffffff;
	--color-black: #000000;

	/* --- Primitives: Grays --- */
	--gray-50:  #f9f9f9;
	--gray-100: #f5f5f5;
	--gray-200: #eeeeee;
	--gray-300: #e0e0e0;
	--gray-400: #d4d4d4;
	--gray-500: #cccccc;
	--gray-600: #95a5a6;
	--gray-700: #7f8c8d;
	--gray-800: #555555;
	--gray-900: #333333;
	--gray-dark: #2c3e50;

	/* --- Primitives: Brand Colors --- */
	--brand-blue: #3498db;
	--brand-blue-dark: #2980b9;
	--brand-blue-light: #e8f4fd;
	--brand-blue-alice: #f0f8ff;

	/* --- Primitives: Status Colors --- */
	--color-upcoming-bg: #fff4e6;
	--color-upcoming-text: #e67e22;
	--color-proofed-bg: #f0e6ff;
	--color-proofed-text: #8e44ad;
	--color-changes-bg: #ffe6e6;
	--color-changes-text: #c0392b;
	--color-complete-bg: #e8f8f5;
	--color-complete-text: #229954;
	--color-danger: #e74c3c;
	--color-danger-bg: #fadbd8;

	/* ========================================= */
	/* --- Semantic Variables --- */
	/* ========================================= */

	/* Backgrounds */
	--bg-body: var(--color-white);
	--bg-section: var(--gray-100);
	--bg-header: var(--brand-blue-alice);
	--bg-hover: var(--gray-50);
	--bg-input: var(--color-white);

	/* Borders */
	--border-light: var(--gray-200);
	--border-main: var(--gray-300);
	--border-input: var(--gray-500);

	/* Text */
	--text-main: var(--gray-900);
	--text-dark: var(--gray-dark);
	--text-medium: var(--gray-800);
	--text-muted: var(--gray-700);
	--text-placeholder: #bdc3c7;

	/* Primary Actions */
	--primary-color: var(--brand-blue);
	--primary-dark: var(--brand-blue-dark);
	--primary-light: var(--brand-blue-light);

	/* Status Mappings */
	--status-upcoming-bg: var(--color-upcoming-bg);
	--status-upcoming-text: var(--color-upcoming-text);
	--status-working-bg: var(--brand-blue-light);
	--status-working-text: var(--brand-blue-dark);
	--status-proofed-bg: var(--color-proofed-bg);
	--status-proofed-text: var(--color-proofed-text);
	--status-changes-bg: var(--color-changes-bg);
	--status-changes-text: var(--color-changes-text);
	--status-complete-bg: var(--color-complete-bg);
	--status-complete-text: var(--color-complete-text);

	--danger-color: var(--color-danger);
	--danger-bg: var(--color-danger-bg);

	/* Sizing */
	--space-xs: 4px;
	--space-sm: 8px;
	--space-md: 12px;
	--space-lg: 20px;
	--space-xl: 30px;

	--radius-sm: 3px;
	--radius-md: 4px;
	--radius-lg: 8px;

	--font-stack: 'Helvetica Neue', Arial, sans-serif;
}