@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap');

html, body {
	position: relative;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

*, *::before, *::after {
	box-sizing: inherit;
}

:root {
	/* ========================================================
	   DESIGN SYSTEM PREMIUM MATAFOME (FASE 4.1 TOKENS)
	   ======================================================== */

	/* 1. Cores de Marca (Brand) */
	--brand-primary: #FF6A00;
	--brand-primary-hover: #E85A00;
	--brand-primary-active: #CF4F00;
	--brand-primary-soft: #FFF7ED;

	/* 2. Cores Neutras & Superfícies (Neutral) */
	--neutral-bg: #F8FAFC;
	--neutral-surface: #FFFFFF;
	--neutral-surface-hover: #F1F5F9;
	--neutral-surface-subtle: #F8FAFC;
	--neutral-border-subtle: #F1F5F9;
	--neutral-border: #E2E8F0;
	--neutral-border-focus: #94A3B8;

	/* 3. Textos & Contraste (Typography) */
	--text-primary: #0F172A;
	--text-secondary: #475569;
	--text-muted: #94A3B8;
	--text-inverse: #FFFFFF;

	/* Pesos Tipográficos Normativos */
	--font-sans: 'Montserrat', system-ui, -apple-system, sans-serif;
	--font-regular: 400;
	--font-medium: 500;
	--font-semibold: 600;
	--font-bold: 700;

	/* 4. Cores Semânticas de Estado (Semantic Solid & Soft) */
	--semantic-success: #059669;
	--semantic-success-soft: #ECFDF5;
	--semantic-warning: #D97706;
	--semantic-warning-soft: #FFFBEB;
	--semantic-danger: #DC2626;
	--semantic-danger-soft: #FEF2F2;
	--semantic-info: #2563EB;
	--semantic-info-soft: #EFF6FF;
	--semantic-purple: #7C3AED;
	--semantic-purple-soft: #F5F3FF;

	/* 5. Raios de Borda Padronizados (Radius) */
	--radius-sm: 6px;
	--radius-md: 10px;
	--radius-lg: 16px;
	--radius-full: 9999px;

	/* 6. Elevações & Sombras Sutis (Shadows) */
	--shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
	--shadow-card: 0 1px 3px 0 rgba(15, 23, 42, 0.06), 0 1px 2px 0 rgba(15, 23, 42, 0.04);
	--shadow-card-hover: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -1px rgba(15, 23, 42, 0.04);
	--shadow-modal: 0 20px 25px -5px rgba(15, 23, 42, 0.15), 0 10px 10px -5px rgba(15, 23, 42, 0.05);

	/* 7. Espaçamentos Universais */
	--space-xs: 4px;
	--space-sm: 8px;
	--space-md: 16px;
	--space-lg: 24px;

	/* 8. Transições */
	--transition-fast: 0.15s ease;
	--transition-normal: 0.2s ease;

	/* ========================================================
	   COMPATIBILIDADE RETROATIVA (LEGACY ALIASES)
	   Preserva 100% dos seletores e componentes existentes
	   ======================================================== */
	--primary-color: var(--brand-primary);
	--primary-hover: var(--brand-primary-hover);
	--primary-accent: #FF3830;
	--secondary-color: var(--text-secondary);
	--secondary-color-400: var(--neutral-surface-hover);
	--success-color: #10B981;
	--danger-color: #FF3830;
	--warning-color: #F59E0B;
	--info-color: #3B82F6;
	--purple-color: #8B5CF6;
	--bg-dark: #0F0F10;
	--bg-sidebar: #0F1218;
	--bg-card: var(--neutral-surface);
	--bg-surface-subtle: var(--neutral-bg);
	--text-color-light: #F8F8F8;
	--text-color-dark: var(--text-primary);
	--text-color-muted: var(--text-muted);
	--border-color: var(--neutral-border);
	--border-color-dark: rgba(255, 255, 255, 0.08);
	--shadow-md: var(--shadow-card-hover);
	--shadow-xl: var(--shadow-modal);
	--color-primary: var(--brand-primary);
	--color-surface: var(--neutral-surface);
	--color-surface-hover: var(--neutral-surface-hover);
	--color-border: var(--neutral-border);
	--color-text: var(--text-primary);
	--color-text-muted: var(--text-muted);
}

/* Utilitários de Ícones Vetoriais SVG */
.icon-inline {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	vertical-align: middle;
	flex-shrink: 0;
}
.icon-inline svg {
	display: block;
}
.icon-xs { width: 12px; height: 12px; }
.icon-sm { width: 14px; height: 14px; }
.icon-md { width: 16px; height: 16px; }
.icon-lg { width: 20px; height: 20px; }


body {
	font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
	background-color: #F8FAFC;
	color: var(--text-color-dark);
	-webkit-font-smoothing: antialiased;
}

.text-light {
	color: var(--text-color-light);
}

.text-dark {
	color: var(--text-color-dark);
}

label {
	display: block;
}

h2 {
	margin: 0;
}

input:disabled {
	color: #94A3B8;
	background-color: #F1F5F9;
}

.primary {
	background-color: var(--primary-color);
	color: var(--text-color-light);
}

.secondary {
	background-color: var(--secondary-color);
	color: var(--text-color-light);
}

.secondary-400 {
	background-color: var(--secondary-color-400);
	color: var(--text-color-dark);
}

.success {
	background-color: var(--success-color);
	color: var(--text-color-light);
}

.danger {
	background-color: var(--danger-color);
	color: var(--text-color-light);
}

.warning {
	background-color: var(--warning-color);
	color: var(--text-color-light);
}

.info {
	background-color: var(--info-color);
	color: var(--text-color-light);
}

.purple { 
	background-color: var(--purple-color);
	color: var(--text-color-light);
}

.badge {
	color: var(--text-color-light);
	font-weight: 600;
	border-radius: 9999px;
}

.button-light {
	background-color: var(--secondary-color-400);
	color: var(--secondary-color);
	transition: all 0.2s ease;
}

.button-light:hover {
	background-color: #E2E8F0;
	color: var(--text-color-dark);
}

/* Scrollbar styling */
::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}

::-webkit-scrollbar-track {
	background: #F1F5F9;
}

::-webkit-scrollbar-thumb {
	background: #CBD5E1;
	border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
	background: #94A3B8;
}