/*
 * Design token.
 *
 * Mọi giá trị màu, cỡ chữ, khoảng cách trong theme đều lấy từ đây.
 * Không viết mã màu hay số px trực tiếp trong file component — sửa một chỗ
 * phải đổi được cả site.
 *
 * Giá trị gốc trích xuất từ theluxurywatchcompany.com, xem docs/PLAN.md §2.1.
 */

:root {
	/* ---------------------------------------------------------------
	 * MÀU
	 * --------------------------------------------------------------- */

	/* Navy — màu chủ đạo, lấy nguyên từ LWC. */
	--c-navy: #051c2b;
	--c-navy-800: #0a2739;
	--c-navy-700: #123449;
	--c-navy-600: #1d445c;

	/*
	 * Gold — ba sắc độ, KHÔNG phải một.
	 *
	 * Gold gốc của LWC (#AD8C4E) chỉ đạt tương phản 3.16:1 trên nền trắng,
	 * trượt WCAG AA cho chữ thường (cần 4.5:1). Trên nền navy nó đạt 5.50:1.
	 * Nên tách làm ba, dùng đúng chỗ:
	 */
	--c-gold: #ad8c4e;         /* Gốc LWC. Viền, đường kẻ, chữ lớn, chữ trên navy. */
	--c-gold-ink: #82682e;     /* Chữ nhỏ trên nền sáng — xem ghi chú dưới. */
	--c-gold-bright: #c9a961;  /* Chữ nhỏ trên nền navy — 7.73:1, đạt AA. */
	--c-gold-soft: #f2ece0;    /* Nền nhạt cho badge, highlight. */

	/* Trung tính — lệch nhẹ về navy để không bị xám chết. */
	--c-white: #ffffff;
	--c-paper: #fafbfc;
	--c-mist: #f0f3f5;
	--c-line: #dde4e9;
	--c-line-soft: #eaeff2;

	/*
	 * Viền trên nền tối. Trước đây có hai mức 0.25 và 0.15 dùng lẫn lộn ở
	 * thanh trên cùng và chân trang — mắt bắt được sự khác nhau đó khi hai
	 * vùng nằm gần nhau. Gộp về một giá trị.
	 */
	--c-line-invert: rgba(255, 255, 255, 0.2);
	--c-muted: #5c707f;
	/*
	 * Trùng --c-navy, không phải một sắc riêng.
	 *
	 * Trước đây là #0B1F2E — lệch navy thương hiệu đúng vài đơn vị, không ai
	 * nhìn ra khi đứng một mình, nhưng làm sinh ra HAI màu viền đen gần giống
	 * nhau: nút primary lấy --c-navy còn nút outline lấy currentColor tức
	 * --c-ink. Hai nút cạnh nhau có viền hơi khác sắc — kiểu lệch mà mắt cảm
	 * thấy trước khi kịp chỉ ra.
	 */
	--c-ink: #051c2b;

	/*
	 * Vì sao gold-ink và muted tối hơn mức "vừa đủ trên nền trắng".
	 *
	 * Nền sáng nhất mà chúng nằm lên KHÔNG phải màu trắng — các section như
	 * newsletter dùng `--c-mist` (#F0F3F5). Chọn màu vừa đủ 4,5:1 trên trắng
	 * thì đặt lên mist chỉ còn 4,06–4,16:1, tức trượt AA ở đúng những khối
	 * dễ bị bỏ sót nhất.
	 *
	 * Hai giá trị hiện tại tính theo nền mist:
	 *   #82682E trên mist = 4,75:1   trên trắng = 5,29:1
	 *   #5C707F trên mist = 4,62:1   trên trắng = 5,15:1
	 *
	 * Chuẩn phải tính trên nền XẤU NHẤT mà màu được dùng, không phải nền
	 * thuận lợi nhất.
	 */

	/* Ngữ nghĩa */
	--c-success: #1f7a4d;
	--c-danger: #b3261e;
	--c-sale: #b3261e;

	/* Vai trò — component tham chiếu vai trò, không tham chiếu màu thô. */
	--c-bg: var(--c-white);
	--c-bg-alt: var(--c-mist);
	--c-text: var(--c-ink);
	--c-text-muted: var(--c-muted);
	--c-border: var(--c-line);
	--c-accent: var(--c-gold);
	--c-accent-text: var(--c-gold-ink);

	/* ---------------------------------------------------------------
	 * CHỮ
	 * --------------------------------------------------------------- */

	/*
	 * Amiri và Jost của LWC không có subset vietnamese — dấu tiếng Việt sẽ
	 * rơi về font hệ thống giữa dòng. Thay bằng hai font có tiếng Việt đầy
	 * đủ, xem docs/PLAN.md §4.1.
	 */
	--f-head: 'Playfair Display', 'Times New Roman', Georgia, serif;
	--f-ui: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;

	/* Thang cỡ chữ — tỉ lệ 1.25, làm tròn về số dễ nhớ. */
	/*
	 * 10px cho nhan vi mo: dong phu cua logo, dong tren cua huy hieu. Duoi
	 * thang chu thuong nhung van la mot buoc CO THAT trong he thong — truoc
	 * day chung viet cung 9px va 10px o hai noi khac nhau cho cung mot loai
	 * nhan, khong ai biet cai nao moi dung.
	 */
	--fs-3xs: 0.625rem;   /* 10px */
	--fs-2xs: 0.6875rem;  /* 11px — eyebrow, nhãn */
	--fs-xs: 0.75rem;     /* 12px */
	--fs-sm: 0.875rem;    /* 14px */
	--fs-base: 1rem;      /* 16px */
	--fs-md: 1.125rem;    /* 18px */
	--fs-lg: 1.375rem;    /* 22px */
	--fs-xl: 1.75rem;     /* 28px */
	--fs-2xl: 2.25rem;    /* 36px */
	--fs-3xl: 3rem;       /* 48px */
	--fs-4xl: 4rem;       /* 64px */

	/* Cỡ co giãn theo màn hình cho tiêu đề lớn. */
	--fs-hero: clamp(2.25rem, 5vw, 4rem);
	--fs-section: clamp(1.75rem, 3vw, 2.25rem);

	--fw-light: 300;
	--fw-normal: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;

	--lh-tight: 1.12;
	--lh-snug: 1.32;
	--lh-normal: 1.6;
	--lh-loose: 1.8;

	/*
	 * Line-height tính bằng PX cho chữ giao diện.
	 *
	 * Hệ số nhân sinh ra số lẻ: 14px × 1.6 = 22,4px. Chiều cao lẻ đẩy phần
	 * tử xuống toạ độ lẻ, chữ bị làm mềm cạnh và các đường kẻ mảnh 1px lúc
	 * dày lúc mỏng. Với hàng xa xỉ thì đó là thứ người ta cảm thấy trước khi
	 * kịp chỉ ra được là gì.
	 *
	 * Chữ trong bài viết vẫn dùng hệ số nhân — ở đó nhịp đọc quan trọng hơn
	 * việc trùng lưới pixel, và đoạn văn dài thì sai số không tích luỹ.
	 */
	--lh-9: 14px;
	--lh-10: 16px;
	--lh-11: 18px;
	--lh-12: 20px;
	--lh-13: 20px;
	--lh-14: 22px;
	--lh-16: 26px;
	--lh-18: 28px;
	--lh-22: 28px;

	/* Giãn chữ — LWC dùng nhãn viết hoa giãn rộng rất nhiều. */
	--ls-tight: -0.015em;
	--ls-normal: 0;
	--ls-wide: 0.06em;
	--ls-wider: 0.14em;
	--ls-widest: 0.22em;

	/* Bề rộng dòng chữ dễ đọc. */
	--measure: 68ch;

	/* ---------------------------------------------------------------
	 * KHOẢNG CÁCH — thang 4px
	 * --------------------------------------------------------------- */

	/*
	 * Bước nửa. Thang 4px điều tiết khoảng cách GIỮA các thành phần; còn
	 * đệm bên trong một vùng bấm đôi khi cần nửa bước để đưa chiều cao lên
	 * mức 24px của WCAG mà không làm dãn nhịp nhìn thấy. Khai báo ra token
	 * để đó là lựa chọn có chủ ý chứ không phải số ngẫu nhiên.
	 */
	--sp-half: 2px;
	--sp-1: 0.25rem;   /* 4 */
	--sp-2: 0.5rem;    /* 8 */
	--sp-3: 0.75rem;   /* 12 */
	--sp-4: 1rem;      /* 16 */
	--sp-5: 1.5rem;    /* 24 */
	--sp-6: 2rem;      /* 32 */
	--sp-7: 2.5rem;    /* 40 */
	--sp-8: 3rem;      /* 48 */
	--sp-9: 4rem;      /* 64 */
	--sp-10: 5rem;     /* 80 */
	--sp-11: 6.5rem;   /* 104 */

	/* Khoảng cách dọc giữa các section, co theo màn hình. */
	--sp-section: clamp(3rem, 7vw, 6.5rem);

	/* ---------------------------------------------------------------
	 * BỐ CỤC
	 * --------------------------------------------------------------- */

	--container: 1320px;
	--container-narrow: 960px;
	--container-text: 720px;
	--gutter: clamp(1rem, 4vw, 2.5rem);

	/*
	 * Breakpoint — CSS không cho dùng var() trong @media, nên đây chỉ là
	 * tài liệu. Giá trị thật hardcode trong media query, lấy từ LWC:
	 *   480px  — mobile
	 *   960px  — tablet
	 *   1320px — desktop
	 */

	--header-h: 84px;
	--header-h-sm: 64px;
	--topbar-h: 38px;

	/* ---------------------------------------------------------------
	 * HÌNH THỨC
	 * --------------------------------------------------------------- */

	/* Luxury = góc vuông. Bo tròn chỉ dùng cho pill và avatar. */
	--r-none: 0;

	/*
	 * Bo góc CHỈ cho biểu mẫu và các thẻ trong luồng mua hàng.
	 *
	 * Phần biên tập của site — ảnh sản phẩm, banner, thẻ bài viết — giữ cạnh
	 * vuông; đó là ngôn ngữ hình học của thương hiệu và không đổi. Nhưng ô
	 * nhập vuông góc thì đọc ra là "biểu mẫu hệ thống", còn ô bo góc đọc ra
	 * là "chỗ để chạm vào". Ở bước thanh toán, cảm giác đó đáng giá.
	 *
	 * 10px lấy theo bản checkout của LWC (đo được 11–12px), lùi một chút cho
	 * hợp với cạnh vuông của phần còn lại.
	 */
	--r-field: 10px;
	--r-check: 4px;

	/*
	 * Kem ấm cho trạng thái ĐANG CHỌN và thẻ tóm tắt đơn.
	 *
	 * `--c-mist` (#F0F3F5) là xám ngả lam — trung tính nhưng lạnh, và trên
	 * một trang thanh toán nó đọc ra là nhợt nhạt chứ không phải tinh tế.
	 * #FCF5ED là màu LWC dùng cho hàng vận chuyển và cổng thanh toán đang
	 * chọn; nó thực chất là sắc vàng thương hiệu pha rất loãng, nên nằm cùng
	 * họ với `--c-gold` thay vì cạnh tranh với nó.
	 */
	--c-cream: #fcf5ed;

	/*
	 * Viền của ô nhập, TÁCH khỏi `--c-line`.
	 *
	 * `--c-line` (#DDE4E9) chỉ đạt tương phản 1,28:1 trên nền trắng. Với
	 * đường kẻ phân cách thì được — mắt đọc nó như một gợi ý. Với ô nhập thì
	 * không: WCAG 1.4.11 đòi 3:1 cho ranh giới của một control, vì đó là thứ
	 * duy nhất cho biết bấm vào đâu thì gõ được.
	 *
	 * #7E90A0 đạt 3,29:1 trên trắng và 3,04:1 trên nền kem — vừa đủ ở cả hai
	 * nền mà biểu mẫu này dùng.
	 */
	--c-field-border: #7e90a0;

	/*
	 * Vàng thương hiệu pha loãng, dùng cho viền và vòng focus trên nền kem.
	 *
	 * Ba mức, không hơn. Bản nháp đầu tiên rải ra năm độ trong suốt khác nhau
	 * (0,22 · 0,24 · 0,28 · 0,32 · 0,4) cho đúng ba công việc — chênh 0,04 thì
	 * mắt không phân biệt được, nhưng mỗi con số lại là một chỗ để lần sau
	 * chỉnh lệch đi.
	 */
	--c-gold-ring: rgba(173, 140, 78, 0.22);   /* vòng focus */
	--c-gold-line: rgba(173, 140, 78, 0.28);   /* viền thẻ, đường phân cách */
	--c-gold-line-strong: rgba(173, 140, 78, 0.4);

	/* Cặp nền/viền cho thông báo lỗi, cùng sắc với `--c-danger`. */
	--c-danger-bg: #fdf1f0;
	--c-danger-line: rgba(179, 38, 30, 0.28);
	--r-sm: 2px;
	--r-pill: 999px;

	--bd: 1px solid var(--c-border);
	--bd-gold: 1px solid var(--c-gold);

	--sh-sm: 0 1px 2px rgba(5, 28, 43, 0.06);
	--sh-md: 0 2px 8px rgba(5, 28, 43, 0.08);
	--sh-lg: 0 8px 32px rgba(5, 28, 43, 0.12);

	--ease: cubic-bezier(0.4, 0, 0.2, 1);
	--dur-fast: 140ms;
	--dur: 240ms;
	--dur-slow: 420ms;

	/*
	 * Đường cong và nhịp cho panel trượt, lấy đúng từ site mẫu:
	 * LWC khai báo `--easing: cubic-bezier(.33, 0, 0, 1)` và dùng chung cho
	 * mọi chuyển động. Đây là ease-out rất mạnh — bung nhanh ở đầu rồi đậu
	 * lại rất êm, khác hẳn cubic-bezier(.4,0,.2,1) vốn khởi động chậm và
	 * dừng cụt, chính là cảm giác "thô" khi mở giỏ hàng.
	 *
	 * Mở chậm hơn đóng: mở là lúc người dùng cần nhìn nội dung hiện ra,
	 * còn đóng thì họ đã quyết định rồi, kéo dài chỉ gây khó chịu.
	 */
	--ease-panel: cubic-bezier(0.33, 0, 0, 1);
	--dur-panel-in: 520ms;
	--dur-panel-out: 300ms;
	--dur-panel-content: 420ms;

	/* Đường cong cho gạch chân menu — cũng là easing của LWC. */
	--dur-underline: 300ms;

	/* Lớp chồng */
	--z-base: 1;
	--z-sticky: 100;
	--z-header: 200;
	--z-dropdown: 300;
	--z-drawer: 400;
	--z-modal: 500;
}

/*
 * Vùng nền tối — đảo vai trò màu thay vì viết lại từng component.
 * Dùng cho footer, hero navy, section đối tác.
 */
.on-dark {
	--c-bg: var(--c-navy);
	--c-bg-alt: var(--c-navy-800);
	--c-text: var(--c-white);
	--c-text-muted: #9fb3c1;
	--c-border: var(--c-navy-600);
	--c-accent-text: var(--c-gold-bright);
}