/*
Theme Name: Kio Child
Theme URI: https://kio.local/
Description: Child theme của Storefront cho cửa hàng demo Kio Mobile. Chứa phần hiển thị (CSS, layout, template).
Author: Kio Mobile
Author URI: https://kio.local/
Template: storefront
Version: 0.1.0
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: kio-child
*/

/*
 * Font "Be Vietnam Pro" (giấy phép SIL OFL 1.1) tự host trong assets/fonts/, không gọi Google Fonts.
 * WOFF2 chỉ giữ bộ ký tự Latin + tiếng Việt: 273 KB TTF còn 60 KB. Muốn thêm ký tự thì tạo lại từ
 * data/fonts/ bằng pyftsubset.
 */
@font-face {
	font-family: "Be Vietnam Pro";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/BeVietnamPro-Regular.woff2") format("woff2");
}

@font-face {
	font-family: "Be Vietnam Pro";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("assets/fonts/BeVietnamPro-Bold.woff2") format("woff2");
}

/* Icon của Storefront và Woo (vẽ bằng font trong CSS). Chỉ khai báo font, xem functions.php. */
@font-face {
	font-family: "Font Awesome 5 Free";
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: url("../storefront/assets/fonts/fa-solid-900.woff2") format("woff2");
}

/*
 * Hệ thống thiết kế (design tokens) dùng thống nhất toàn theme.
 * Chi tiết từng token xem docs/phase2/phase-2.md, mục "Hệ thống thiết kế".
 */
:root {
	--kio-brand: #0d47a1;
	--kio-brand-dark: #08347a;
	--kio-price: #d70018;
	--kio-accent: #ff6a00;
	--kio-bg: #f4f6f8;
	--kio-text: #1f2937;
	--kio-muted: #5b6472;
	--kio-border: #e5e7eb;
	--kio-card: #ffffff;
	--kio-success: #16a34a;
	--kio-radius: 12px;
	--kio-radius-sm: 8px;
	--kio-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.1);
	--kio-shadow-hover: 0 6px 18px rgba(16, 24, 40, 0.12);
	--kio-font: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--kio-max: 1280px;
	--kio-gutter: 24px;

	/* Chuyển động (Phase 4.5): chỉ dùng cho transform và opacity. */
	--kio-dur-fast: 150ms;
	--kio-dur-base: 250ms;
	--kio-dur-slow: 400ms;
	--kio-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
	--kio-ease-in: cubic-bezier(0.4, 0, 1, 1);

	/* Cỡ chữ (Phase 4.5). */
	--kio-text-xs: 12px;
	--kio-text-sm: 14px;
	--kio-text-md: 16px;
	--kio-text-lg: 20px;
	--kio-text-xl: 24px;
	--kio-text-2xl: 32px;

	/* Nền nhạt cho khối khuyến mãi / ưu đãi. */
	--kio-accent-soft: #fff4ec;
	--kio-accent-strong: #c2410c; /* cam dùng cho CHỮ: --kio-accent trên nền trắng chỉ đạt 2,9:1 */
	--kio-danger: #c81e1e;
	--kio-input-border: #8691a1; /* viền ô nhập đạt 3:1 trên nền trắng */
	--kio-accent-text: #b84300;
	--kio-brand-soft: #e8f0fc;
}