/* =============================================================
 * Design token - trich tu Figma "Design System 1.1 [VPTWD]"
 * File: Jy47CaSLkTmFq7ctClRaEp | Colors page node 2:4
 * SINH TU DONG - dung sua tay.
 * Nguon: agents/figma-design-system/{tokens,typography}.json
 * ============================================================= */

:root {
	/* --- Neutral scale --- */
	--color-neutral-0: #FFFFFF;	/* base-white */
	--color-neutral-50: #F9FAFB;	/* neutral-50 */
	--color-neutral-100: #F0F2F4;	/* neutral-100 */
	--color-neutral-200: #E5E7EB;	/* neutral-200 */
	--color-neutral-300: #C3C8D0;	/* neutral-300 */
	--color-neutral-400: #9CA3AF;	/* neutral-400 */
	--color-neutral-500: #6B7280;	/* neutral-500 */
	--color-neutral-600: #4B5563;	/* neutral-600 */
	--color-neutral-700: #374151;	/* neutral-700 */
	--color-neutral-800: #1F2937;	/* neutral-800 */
	--color-neutral-900: #111827;	/* neutral-900 */

	/* --- Thang primary --- */
	--color-primary-50: #FEF2F2;
	--color-primary-100: #FEE2E2;
	--color-primary-200: #FECACA;
	--color-primary-300: #FCA5A5;
	--color-primary-400: #F87171;
	--color-primary-500: #DC2626;
	--color-primary-600: #B9000E;
	--color-primary-700: #A60002;
	--color-primary-800: #950002;
	--color-primary-900: #740001;

	/* --- Thang success --- */
	--color-success-50: #F0FDF4;
	--color-success-100: #DCFCE7;
	--color-success-200: #BBF7D0;
	--color-success-300: #86EFAC;
	--color-success-400: #4ADE80;
	--color-success-500: #22C55E;
	--color-success-600: #16A34A;
	--color-success-700: #15803D;
	--color-success-800: #166534;
	--color-success-900: #14532D;

	/* --- Thang warning --- */
	--color-warning-50: #FFFBEB;
	--color-warning-100: #FEF3C7;
	--color-warning-200: #FDE68A;
	--color-warning-300: #FCD34D;
	--color-warning-400: #FBBF24;
	--color-warning-500: #F59E0B;
	--color-warning-600: #D97706;
	--color-warning-700: #B45309;
	--color-warning-800: #92400E;
	--color-warning-900: #78350F;

	/* --- Thang danger --- */
	--color-danger-50: #FEF2F2;
	--color-danger-100: #FEE2E2;
	--color-danger-200: #FECACA;
	--color-danger-300: #FCA5A5;
	--color-danger-400: #F87171;
	--color-danger-500: #EF4444;
	--color-danger-600: #DC2626;
	--color-danger-700: #B9000E;
	--color-danger-800: #991B1B;
	--color-danger-900: #7F1D1D;

	/* --- Ngu nghia: Brand & UI --- */
	--brand-primary: var(--color-primary-600);	/* #B9000E - do Viettel */
	--brand-primary-hover: var(--color-primary-500);	/* #DC2626 */
	--brand-primary-active: var(--color-primary-700);	/* #A60002 */
	--brand-primary-disabled: var(--color-primary-300);

	--color-bg-body: var(--color-neutral-50);
	--color-bg-surface: var(--color-neutral-0);
	--color-bg-subtle: var(--color-neutral-100);

	--color-text-primary: var(--color-neutral-900);
	--color-text-secondary: var(--color-neutral-600);
	--color-text-muted: var(--color-neutral-500);
	--color-text-on-primary: var(--color-neutral-0);

	--color-border-subtle: var(--color-neutral-200);
	--color-border-primary: var(--color-neutral-300);
	--color-border-brand: var(--brand-primary);

	/* --- Radius --- */
	--radius-none: 0px;
	--radius-xs: 2px;
	--radius-sm: 4px;
	--radius-md: 8px;	/* dung cho input & button theo Figma */
	--radius-lg: 12px;
	--radius-xl: 16px;
	--radius-full: 9999px;

	/* --- Spacing --- */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 24px;
	--space-8: 32px;
	--space-10: 40px;
	--space-12: 48px;

	/* --- Typography scales --- */
	--font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--font-size-display: 36px;	--font-line-display: 44px;
	--font-size-h1: 30px;	--font-line-h1: 38px;
	--font-size-h2: 24px;	--font-line-h2: 32px;
	--font-size-h3: 20px;	--font-line-h3: 28px;
	--font-size-h4: 18px;	--font-line-h4: 26px;
	--font-size-h5: 16px;	--font-line-h5: 24px;
	--font-size-body: 14px;	--font-line-body: 20px;
	--font-size-caption: 12px;	--font-line-caption: 16px;
}