/* =====================================================================================================
 * ari-tokens.css — TOKEN chung của web Ari Yoga (đợt 2, 26/09/2026). Một tệp cho mọi trang: trang chủ, trang Python sinh ra,
 * trang PHP. Nguồn: viec-dang-lam/thiet-ke-moi/design-system/ari-yoga/MASTER.md + chot/css/tap-chi.css.
 * 3 lớp: --p-* (màu thô) → --c-*, --glass-*, --f-*, --fs-*, --sp-*, --sh-*, --dur-* (vai trò) → lớp thành phần trong ari-chung.css.
 * LUẬT MÀU (ra-soat/UX.md P1-7): hồng thương hiệu #F284B5 (--c-brand) KHÔNG dùng làm chữ trên nền sáng (2,4:1).
 *   Chữ hồng trên nền sáng dùng --c-text-accent (#A8305E, ~6,4:1) hoặc --c-text-accent-sm (#8E2456, ~8:1).
 *   Hồng sáng chỉ làm chữ trên nền đen: --c-text-accent-on-dark. Nút hồng giữ chữ gần đen (--c-text-on-brand).
 * Phông: "Be Vietnam Pro" (chữ đọc) + "Bricolage Grotesque" (chữ hiển thị). Khi có bộ phông tải về máy (assets/phong/phong.css),
 * build-home.py tự dùng bản tại chỗ thay cho Google Fonts.
 * ===================================================================================================== */

/* Phông DỰ PHÒNG đo khớp số đo (26/09, sửa CLS lúc đổi phông, người kiểm đo 0,15–0,21 ở 768px): trong lúc Google Fonts chưa tải xong,
 * trình duyệt vẽ bằng Arial đã chỉnh cỡ (size-adjust) và độ cao dòng (ascent/descent) cho gần bằng phông thật, nên khi đổi sang phông
 * thật chữ gần như không xuống dòng khác đi. Số đo lấy bằng Chrome ẩn: đo bề ngang một câu tiếng Việt ở 100px (Bricolage 650–700 co 96–100%
 * so với Arial Bold; Bricolage có trục opsz nên chữ nhỏ rộng hơn chữ to ~7%: lấy 95%, khớp trong ±4% từ 14px tới 64px; Bricolage 500 so với Arial; Be Vietnam Pro 400/600 so với Arial / Arial Bold) + fontBoundingBox cao/sâu.
 * Công cụ đo: viec-dang-lam/thiet-ke-moi/dot-2/cong-cu/do-phong.mjs. Không phải tệp phông tải về: local() dùng phông có sẵn trên máy. */
@font-face { font-family: "Ari Hien DP"; font-weight: 100 549; src: local("Arial"), local("ArialMT"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 92.2%; ascent-override: 100.9%; descent-override: 29.3%; line-gap-override: 0%; }
@font-face { font-family: "Ari Hien DP"; font-weight: 550 1000; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Neue Bold"), local("Helvetica Bold");
  size-adjust: 95%; ascent-override: 97.9%; descent-override: 28.4%; line-gap-override: 0%; }
@font-face { font-family: "Ari Doc DP"; font-weight: 100 549; src: local("Arial"), local("ArialMT"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 108.4%; ascent-override: 92.3%; descent-override: 24.9%; line-gap-override: 0%; }
@font-face { font-family: "Ari Doc DP"; font-weight: 550 1000; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Neue Bold"), local("Helvetica Bold");
  size-adjust: 103.4%; ascent-override: 96.7%; descent-override: 26.1%; line-gap-override: 0%; }

:root {
  color-scheme: light;
  /* primitive */
  --p-pink-25: #FFFAFC; --p-pink-50: #FFF5F8; --p-pink-100: #FBE9F0; --p-pink-200: #F8D3E3; --p-pink-300: #F6B3CF;
  --p-pink-400: #F284B5; --p-pink-450: #F69CC4; --p-pink-500: #E0689D; --p-pink-600: #C24A7E; --p-pink-700: #A8305E;
  --p-pink-800: #8E2456; --p-pink-900: #7A1D48; --p-pink-950: #2A0F1A;
  --p-ink-950: #120C0F; --p-ink-900: #1D1519; --p-ink-700: #3F3137; --p-ink-600: #4E3E46; --p-ink-500: #5B4A52;
  --p-ink-400: #6E5A63; --p-ink-300: #94808A; --p-ink-200: #C9BBC2; --p-ink-100: #E9E0E4; --p-white: #FFFFFF;
  --p-lilac-200: #DDCBFA; --p-peach-200: #FFD6C4;
  /* semantic */
  --c-bg: var(--p-pink-50); --c-bg-raise: var(--p-pink-25); --c-bg-sunk: var(--p-pink-100); --c-bg-invert: var(--p-ink-900);
  --c-text: var(--p-ink-900); --c-text-2: var(--p-ink-500); --c-text-3: var(--p-ink-400);
  --c-text-invert: var(--p-pink-50); --c-text-invert-2: var(--p-ink-200);
  --c-text-accent: var(--p-pink-700); --c-text-accent-sm: var(--p-pink-800); --c-text-on-brand: var(--p-pink-950);
  --c-text-accent-on-dark: var(--p-pink-400);
  --c-brand: var(--p-pink-400); --c-brand-hover: var(--p-pink-450); --c-brand-soft: var(--p-pink-200);
  --c-line: rgb(168 48 94 / .16); --c-line-soft: rgb(29 21 25 / .08); --c-line-strong: rgb(168 48 94 / .32);
  --c-focus: var(--p-pink-700); --c-selection: rgb(242 132 181 / .32);
  /* kính */
  --glass-thin-bg: linear-gradient(135deg, rgb(255 255 255 / .62), rgb(255 255 255 / .16) 45%, rgb(255 255 255 / .06) 70%, rgb(255 255 255 / .24)), rgb(255 255 255 / .42);
  --glass-thick-bg: linear-gradient(180deg, rgb(255 255 255 / .6), rgb(255 255 255 / 0) 55%), rgb(255 250 252 / .72);
  --glass-thick-blur: blur(22px) saturate(175%);
  --glass-edge: rgb(255 255 255 / .82);
  /* chữ */
  --f-hien: "Bricolage Grotesque", "Ari Hien DP", "Be Vietnam Pro", system-ui, sans-serif;
  --f-doc: "Be Vietnam Pro", "Ari Doc DP", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-display: clamp(2.75rem, 7vw, 6.25rem);
  --fs-h2: clamp(1.875rem, 3.6vw, 3.25rem);
  --fs-h3: clamp(1.3125rem, 2vw, 1.75rem);
  --fs-lead: clamp(1.125rem, 1.4vw, 1.3125rem);
  --fs-body: clamp(1rem, .96rem + .2vw, 1.0625rem);
  --fs-sm: .875rem;
  /* khoảng cách */
  --gutter: clamp(16px, 4vw, 48px);
  --sp-section: clamp(88px, 12vw, 176px);
  --container: 1320px;
  --r-sm: 12px; --r-md: 20px; --r-lg: 28px; --r-xl: 40px; --r-pill: 999px;
  /* bóng pha hồng */
  --sh-1: 0 1px 2px rgb(150 52 100 / .08), 0 4px 12px -6px rgb(150 52 100 / .14);
  --sh-2: 0 0 0 .5px rgb(168 48 94 / .12), 0 16px 36px -18px rgb(150 52 100 / .26);
  --sh-3: 0 0 0 .5px rgb(168 48 94 / .16), 0 28px 60px -24px rgb(150 52 100 / .34);
  --sh-glow: 0 0 0 6px rgb(242 132 181 / .18), 0 12px 40px -8px rgb(242 132 181 / .55);
  --sh-glass: inset 1px 1px 0 rgb(255 255 255 / .95), inset -1px -1px 0 rgb(242 132 181 / .18), inset 0 -16px 28px -22px rgb(242 132 181 / .30), var(--sh-2);
  --sh-ink: 0 30px 70px -30px rgb(18 12 15 / .55);
  /* chuyển động (nhịp 120 BPM: 1 phách 500ms) */
  --dur-press: 100ms; --dur-fast: 180ms; --dur-base: 280ms; --dur-slow: 520ms;
  --ease-out: cubic-bezier(.22, .61, .36, 1); --ease-flow: cubic-bezier(.32, .72, 0, 1);
  --ease-breath: cubic-bezier(.45, .05, .25, 1); --ease-spring: cubic-bezier(.34, 1.36, .64, 1);
}
@media (max-width: 767px) { :root { --glass-thick-blur: blur(14px) saturate(160%); } }