/* @casoon/ui-framework - Light Theme */
@import "../tokens.css";

:root,
[data-theme="light"] {
	/* Colors - Primary */
	--ui-primary: #0066cc;
	--ui-primary-light: #e3f2fd;
	--ui-primary-dark: #0052a3;
	--ui-primary-alpha: rgba(0, 102, 204, 0.15);

	/* Colors - Secondary */
	--ui-secondary: #6c757d;
	--ui-secondary-light: #e9ecef;
	--ui-secondary-dark: #545b62;

	/* Colors - Semantic */
	--ui-success: #28a745;
	--ui-success-light: #d4edda;
	--ui-warning: #ffc107;
	--ui-warning-light: #fff3cd;
	--ui-danger: #dc3545;
	--ui-danger-light: #f8d7da;
	--ui-info: #17a2b8;
	--ui-info-light: #d1ecf1;

	/* Surfaces */
	--ui-surface: #ffffff;
	--ui-surface-variant: #f8f9fa;
	--ui-surface-elevated: #ffffff;
	--ui-background: #f5f5f5;

	/* Text */
	--ui-text: #212529;
	--ui-text-secondary: #6c757d;
	--ui-text-muted: #adb5bd;
	--ui-text-inverse: #ffffff;

	/* Borders */
	--ui-border-color: #dee2e6;
	--ui-border-color-light: #e9ecef;
	--ui-border-color-dark: #ced4da;

	/* Interactive States */
	--ui-hover: #f8f9fa;
	--ui-active: #e9ecef;
	--ui-focus-ring: 0 0 0 3px var(--ui-primary-alpha);
	--ui-disabled-bg: #e9ecef;
	--ui-disabled-text: #adb5bd;

	/* Overlays */
	--ui-overlay: rgba(0, 0, 0, 0.5);
	--ui-backdrop: rgba(255, 255, 255, 0.8);
}