/* =========================================================
   DESIGN TOKENS — anhmeme
   Phong cach iOS: xanh he thong, bo goc mem, do bong diu,
   chu he thong (SF Pro tren Apple). Spacing gon gang.
   Doi mau/bo goc => chi sua o day, toan site cap nhat.
   ========================================================= */

/* Theme dung font he thong — tren thiet bi Apple chinh la SF Pro. */

:root {

	/* ---------- 1. COLOR (Modern Premium Palette) ---------- */
	/* Brand — Indigo-Blue hybrid for more depth */
	--am-color-primary:        #2563EB;
	--am-color-primary-hover:  #1D4ED8;
	--am-color-primary-soft:   #EFF6FF;

	/* Accent — Vibrant Amber */
	--am-color-accent:         #F59E0B;
	--am-color-accent-hover:   #D97706;

	/* Neutral */
	--am-color-bg:             #FFFFFF;
	--am-color-bg-soft:        #F8FAFC;
	--am-color-bg-muted:       #F1F5F9;
	--am-color-bg-muted-hover: #E2E8F0;
	--am-color-border:         #E2E8F0;
	--am-color-border-strong:  #CBD5E1;

	/* Text */
	--am-color-text:           #0F172A;
	--am-color-text-soft:      #475569;
	--am-color-text-muted:     #94A3B8;
	--am-color-text-invert:    #FFFFFF;

	/* Link */
	--am-color-link:           #2563EB;

	/* Semantic */
	--am-color-success:        #10B981;
	--am-color-warning:        #F59E0B;
	--am-color-danger:         #EF4444;
	--am-color-info:           #3B82F6;

	/* ---------- 2. TYPOGRAPHY ---------- */
	/* Font he thong (Apple => SF Pro). Heading & body chung stack. */
	--am-font-heading: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--am-font-body:    -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--am-font-mono:    ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

	/* Font size — fluid clamp() */
	--am-fs-xs:   clamp(0.75rem, 0.72rem + 0.15vw, 0.8rem);    /* ~12-13px */
	--am-fs-sm:   clamp(0.8125rem, 0.79rem + 0.12vw, 0.875rem);/* ~13-14px */
	--am-fs-base: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);      /* 15-16px */
	--am-fs-lg:   clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);    /* 17-20px */
	--am-fs-xl:   clamp(1.3125rem, 1.15rem + 0.6vw, 1.625rem); /* 21-26px */
	--am-fs-2xl:  clamp(1.625rem, 1.35rem + 1.2vw, 2.25rem);   /* 26-36px */
	--am-fs-3xl:  clamp(2rem, 1.5rem + 2vw, 3rem);             /* 32-48px */
	--am-fs-hero: clamp(2.5rem, 1.7rem + 3.2vw, 4rem);         /* 40-64px */

	/* Font weight */
	--am-fw-regular:  400;
	--am-fw-medium:   500;
	--am-fw-semibold: 600;
	--am-fw-bold:     700;

	/* Line height */
	--am-lh-tight:    1.18;
	--am-lh-snug:     1.35;
	--am-lh-normal:   1.5;
	--am-lh-relaxed:  1.65;

	/* Letter spacing — iOS dung tracking am nhe o chu lon */
	--am-ls-tight:    -0.022em;
	--am-ls-normal:   0;
	--am-ls-wide:     0.02em;

	/* ---------- 3. SPACING (scale 4px) ---------- */
	--am-space-1:  0.25rem;   /* 4px */
	--am-space-2:  0.5rem;    /* 8px */
	--am-space-3:  0.75rem;   /* 12px */
	--am-space-4:  1rem;      /* 16px */
	--am-space-5:  1.5rem;    /* 24px */
	--am-space-6:  2rem;      /* 32px */
	--am-space-7:  2.5rem;    /* 40px */
	--am-space-8:  3rem;      /* 48px */
	--am-space-10: 4rem;      /* 64px */
	--am-space-12: 6rem;      /* 96px */
	--am-space-16: 8rem;      /* 128px */

	--am-section-py: clamp(2rem, 4vw, 3.5rem);

	/* ---------- 4. LAYOUT ---------- */
	--am-container-max:    1280px;
	--am-container-narrow: 880px;
	--am-container-wide:   1440px;
	--am-container-px:     clamp(1rem, 3vw, 2rem);

	--am-grid-gap-sm: var(--am-space-3);
	--am-grid-gap-md: var(--am-space-4);
	--am-grid-gap-lg: var(--am-space-6);

	/* ---------- 5. BORDER & RADIUS (bo goc mem kieu iOS) ---------- */
	--am-radius-xs:   6px;
	--am-radius-sm:   10px;
	--am-radius-md:   12px;    /* nut, input */
	--am-radius-lg:   16px;    /* card */
	--am-radius-xl:   22px;    /* container lon */
	--am-radius-pill: 9999px;

	--am-border-w:    1px;
	--am-border-w-md: 2px;

	/* ---------- 6. SHADOW (Layered & Soft) ---------- */
	--am-shadow-sm:  0 1px 2px 0 rgb(0 0 0 / 0.05);
	--am-shadow-md:  0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
	--am-shadow-lg:  0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
	--am-shadow-xl:  0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
	--am-shadow-glass: 0 8px 32px 0 rgba(31, 38, 135, 0.07);

	/* ---------- 7. MOTION ---------- */
	--am-ease:       cubic-bezier(0.4, 0, 0.2, 1);
	--am-ease-out:   cubic-bezier(0, 0, 0.2, 1);
	--am-ease-in:    cubic-bezier(0.4, 0, 1, 1);

	--am-duration-fast:   150ms;
	--am-duration-normal: 250ms;
	--am-duration-slow:   400ms;

	/* ---------- 8. Z-INDEX ---------- */
	--am-z-dropdown: 100;
	--am-z-sticky:   200;
	--am-z-header:   300;
	--am-z-overlay:  400;
	--am-z-modal:    500;
	--am-z-toast:    600;

	/* ---------- 9. BREAKPOINTS (cho JS doc) ---------- */
	--am-bp-sm:  640px;
	--am-bp-md:  768px;
	--am-bp-lg:  1024px;
	--am-bp-xl:  1280px;
	--am-bp-2xl: 1536px;
}

/* Dark mode (optional, bat sau) */
/* @media (prefers-color-scheme: dark) { ... } */