/**
 * AUDIMAC Design Tokens
 * ----------------------------------------------------------------------
 * File: assets/css/tokens.css
 * Chỉ khai báo CSS custom properties (design tokens). KHÔNG chứa rule
 * style nào áp trực tiếp lên element/class — mọi component khác phải
 * đọc giá trị từ đây, không hard-code lại số.
 *
 * Brand nguồn: Primary #25B84B / Dark #4A4A4A / Gray #666666 / White #FFFFFF.
 * Mọi biến thể (hover/border/bg/disabled/overlay) đều là tint/shade phái
 * sinh từ đúng 4 màu gốc này — không thêm màu thương hiệu mới.
 */

:root {

	/* ============================================================
	   1. BRAND COLOR (nguồn gốc — không đổi)
	   ============================================================ */
	--audm-color-primary: #25B84B;
	--audm-color-dark: #4A4A4A;
	--audm-color-gray: #666666;
	--audm-color-white: #FFFFFF;

	/* ============================================================
	   2. COLOR — biến thể nhẹ, phái sinh từ 4 màu gốc
	   ============================================================ */
	/* Primary */
	--audm-color-primary-hover: #1E9A3F;   /* primary tối hơn ~15%, dùng cho hover/active */
	--audm-color-primary-light: #E8F7EC;   /* primary rất nhạt, dùng cho background badge/soft button */

	/* Dark */
	--audm-color-dark-hover: #3A3A3A;      /* dark tối hơn, dùng cho hover của button/link tối */

	/* Gray */
	--audm-color-gray-light: #999999;      /* gray nhạt hơn, dùng cho text phụ/placeholder */
	--audm-color-border: #E5E5E5;          /* border mặc định, phái sinh từ gray rất nhạt */

	/* White / neutral background */
	--audm-color-bg: #FFFFFF;
	--audm-color-bg-alt: #F7F8F7;          /* nền phụ (section alt, download box) — gần trắng, ánh xám nhẹ */

	/* Trạng thái chức năng (disabled/overlay) — vẫn phái sinh từ gray/dark, không thêm hue mới */
	--audm-color-disabled-bg: #F0F0F0;
	--audm-color-disabled-text: #B3B3B3;
	--audm-color-overlay: rgba(74, 74, 74, 0.6); /* overlay tối, dựa trên --audm-color-dark */

	/* ============================================================
	   3. TYPOGRAPHY
	   ============================================================ */
	--audm-font-family: inherit; /* kế thừa font hiện có của theme Moderno, không ép font mới */

	--audm-font-size-xs: 0.75rem;    /* 12px — Caption */
	--audm-font-size-sm: 0.875rem;   /* 14px — Small */
	--audm-font-size-md: 1rem;       /* 16px — Body (base) */
	--audm-font-size-lg: 1.125rem;   /* 18px — Lead */
	--audm-font-size-xl: 1.5rem;     /* 24px — H4 */
	--audm-font-size-2xl: 2rem;      /* 32px — H3 */
	--audm-font-size-3xl: 2.5rem;    /* 40px — H2 */
	--audm-font-size-4xl: 3.25rem;   /* 52px — H1 */

	--audm-font-weight-regular: 400;
	--audm-font-weight-medium: 500;
	--audm-font-weight-semibold: 600;
	--audm-font-weight-bold: 700;

	--audm-line-height-tight: 1.2;
	--audm-line-height-base: 1.6;
	--audm-line-height-relaxed: 1.75;

	/* ============================================================
	   4. SPACING (bội số 4px)
	   ============================================================ */
	--audm-space-1: 4px;
	--audm-space-2: 8px;
	--audm-space-3: 12px;
	--audm-space-4: 16px;
	--audm-space-5: 20px;
	--audm-space-6: 24px;
	--audm-space-8: 32px;
	--audm-space-10: 40px;
	--audm-space-12: 48px;
	--audm-space-16: 64px;

	/* ============================================================
	   5. CONTAINER
	   ============================================================ */
	--audm-container: 1200px;
	--audm-container-wide: 1440px;
	--audm-container-gutter: 20px;

	/* ============================================================
	   6. BORDER RADIUS
	   ============================================================ */
	--audm-radius-sm: 4px;
	--audm-radius-md: 8px;
	--audm-radius-lg: 12px;
	--audm-radius-full: 999px;

	/* ============================================================
	   7. SHADOW
	   ============================================================ */
	--audm-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
	--audm-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
	--audm-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.12);

	/* ============================================================
	   8. TRANSITION
	   ============================================================ */
	--audm-transition: 200ms ease;

	/* ============================================================
	   9. Z-INDEX (giới hạn, chỉ cho các layer thực sự cần)
	   ============================================================ */
	--audm-z-sticky-cta: 60;
}