@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
	.app-tab {
		border-color: var(--card-border);
	}

	.app-tab-active {
		background: var(--brand-soft);
		color: var(--text);
	}

	.app-tab-inactive {
		background: var(--card);
		color: var(--muted);
	}

	.app-status-active {
		background: rgba(34, 197, 94, 0.12);
	}

	.app-status-inactive {
		background: rgba(239, 68, 68, 0.12);
	}

	.app-view-btn {
		border-color: var(--card-border);
		background: var(--card);
		color: var(--muted);
	}

	.app-view-btn-active {
		background: var(--brand-soft);
		color: var(--text);
	}
}