/**
 * 设计令牌 · 全站唯一样式来源（design-spec.md §10，共 182 个自定义属性）
 *
 * 纪律：除本文件外，任何 .css / 内联 style / blocks/xxx/style.css 都不得出现
 * #hex、rgb()、hsl()、px 字号、px 圆角。后台「改主色全站同步」完全依赖这一点。
 *
 * @package wig-brand
 */

:root {
	/* ═══ 1. 颜色 · 中性（暖灰） ═══ */
	--color-neutral-50: #FAF8F5;
	--color-neutral-100: #F4F1EC;
	--color-neutral-200: #E8E3DB;
	--color-neutral-300: #D6CFC4;
	--color-neutral-400: #A8A199;
	--color-neutral-500: #8F887F;
	--color-neutral-600: #6F6860;
	--color-neutral-700: #4A443E;
	--color-neutral-800: #2C2723;
	--color-neutral-900: #1D1916;

	/* ═══ 2. 颜色 · 品牌主色 ═══ */
	--color-primary-50: #EDF1FE;
	--color-primary-100: #DBE2FD;
	--color-primary-200: #B9C6FB;
	--color-primary-500: #4F6DF8;
	--color-primary-600: #3858F6; /* ★ 主色，后台「主色」选项写这里 */
	--color-primary-700: #2B45D4;
	--color-primary-800: #1F33A8;
	--color-primary-900: #17277E;

	/* ═══ 3. 颜色 · 暖金强调（受 §1.4 边界约束） ═══ */
	--color-gold-100: #F6EEE0;
	--color-gold-300: #E0C79A;
	--color-gold-500: #B99B6B; /* 纯装饰 */
	--color-gold-600: #9A7B49; /* 承担信息的边框/图标 */
	--color-gold-700: #86693B; /* 金色文字 */

	/* ═══ 4. 颜色 · 语义 ═══ */
	--color-success-bg: #E7F5EE;
	--color-success-fg: #14704A;
	--color-success-line: #1F8A5B;
	--color-warning-bg: #FFF4DC;
	--color-warning-fg: #8A5A00;
	--color-warning-line: #C98A12;
	--color-danger-bg: #FDECEC;
	--color-danger-fg: #B42222;
	--color-danger-line: #D24545;
	--color-danger-fg-on-white: #C22525;
	--color-info-bg: #EDF1FE;
	--color-info-fg: #2B45D4;
	--color-info-line: #3858F6;

	/* ═══ 5. 颜色 · 语义化用途（组件只准用这一层） ═══ */
	--color-canvas: var(--color-neutral-50);
	--color-surface: #FFFFFF;
	--color-surface-2: var(--color-neutral-100);
	--color-surface-3: var(--color-neutral-300);
	--color-text-1: var(--color-neutral-900);
	--color-text-2: var(--color-neutral-700);
	--color-text-3: var(--color-neutral-600);
	--color-text-disabled: var(--color-neutral-600);
	--color-text-inverse: #F2EFEA;
	--color-text-inverse-2: #C6C1BA;
	--color-text-inverse-3: #928C84;
	--color-border-subtle: var(--color-neutral-200); /* 装饰分隔线 1.28:1，禁止用于控件 */
	--color-border: var(--color-neutral-300);
	--color-border-strong: var(--color-neutral-500); /* ★ 控件边框 3.50:1 */
	--color-border-inverse: rgba(255, 255, 255, .12);
	--color-focus: var(--color-primary-600);
	--color-focus-inverse: #FFFFFF;
	--color-scrim: rgba(26, 23, 20, .48);
	--color-glass: rgba(255, 255, 255, .82);
	--color-glass-solid: #FFFFFF;
	--color-skeleton: #F1EDE7;
	--color-disabled-bg: #F1EDE7;
	--color-footer-bg: #1A1714;
	--color-cta-bg-from: #1F1B17;
	--color-cta-bg-to: #2B2320;

	/* ═══ 6. 字体 ═══ */
	/* 降级链里**必须保留楷体族**（Kaiti SC / STKaiti / KaiTi / 楷体）：设计要的是楷体的手写感，
	   宋体（Songti SC）气质差得远，只排在楷体之后。woff2 没放进来时全靠这一串兜住标题观感。 */
	--font-display: "LXGW WenKai", "霞鹜文楷", "Kaiti SC", "STKaiti", "KaiTi", "楷体", "Songti SC", "Noto Serif SC", "Source Han Serif SC", serif;
	--font-body: -apple-system, "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Source Han Sans SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
	--font-num: "Outfit", "DIN Alternate", "Helvetica Neue", Arial, sans-serif;

	/* ═══ 7. 字号（流体） ═══ */
	--font-size-h1: clamp(32px, 24.6px + 1.9vw, 52px);
	--font-size-h2: clamp(24px, 19.5px + 1.14vw, 36px);
	--font-size-h3: clamp(19px, 16.4px + 0.67vw, 26px);
	--font-size-h4: clamp(17px, 15.9px + 0.29vw, 20px);
	--font-size-body-lg: clamp(17px, 16.3px + 0.19vw, 19px);
	--font-size-body: 16px;
	--font-size-article: clamp(16px, 15.7px + 0.1vw, 17px);
	--font-size-body-sm: 14px;
	--font-size-caption: clamp(12px, 11.6px + 0.1vw, 13px);
	--font-size-label: clamp(12px, 11.6px + 0.1vw, 13px);
	--font-size-button: clamp(15px, 14.6px + 0.1vw, 16px);
	--font-size-num-xl: clamp(34px, 30.3px + 0.95vw, 44px);
	--font-size-num: 16px;

	/* ═══ 8. 行高（段落级 ≥1.6） ═══ */
	--line-height-h1: 1.18;
	--line-height-h2: 1.25;
	--line-height-h3: 1.35;
	--line-height-h4: 1.45;
	--line-height-body: 1.8;
	--line-height-article: 1.9;
	--line-height-body-sm: 1.7;
	--line-height-caption: 1.6;
	--line-height-label: 1.2;
	--line-height-button: 1;

	/* ═══ 9. 字重与字距 ═══ */
	--font-weight-regular: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;
	--letter-spacing-tight: -0.5px;
	--letter-spacing-h2: -0.3px;
	--letter-spacing-normal: 0;
	--letter-spacing-wide: 0.02em;

	/* ═══ 10. 间距（4 基准） ═══ */
	--space-0: 0;
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 24px;
	--space-7: 32px;
	--space-8: 40px;
	--space-9: 48px;
	--space-10: 64px;
	--space-11: 80px;
	--space-12: 96px;
	--space-13: 128px;

	/* ═══ 11. 布局 ═══ */
	/* 全站唯一容器基准 1230px = 3×394（主推款卡）+ 2×24（列间距）反推而来。
	 * **任何页面、任何断点都不得覆盖**：改 1280 会让主推款卡从 394 挤回 296（team-lead 定稿）。 */
	--container-max: 1230px;
	--container-prose: 720px;
	--measure-body: 576px;
	--measure-prose: 660px;
	--grid-columns: 12;
	--grid-gap: 24px;
	--grid-gap-sm: 16px;
	--page-padding: 24px;
	--page-padding-xs: 20px;
	--sidebar-width: 290px;
	--section-space: clamp(48px, 4vw + 32px, 96px);
	/* 断点（仅供文档与 JS 读取；@media 里必须写字面量）：
	   --bp-xs: 576px; --bp-md: 768px; --bp-lg: 992px; --bp-xl: 1200px; --bp-2xl: 1440px; */

	/* ═══ 12. 尺寸 ═══ */
	--header-h: 88px;
	--header-h-scrolled: 72px;
	--header-h-mobile: 60px;
	--btn-h: 48px;
	--btn-h-lg: 52px;
	--btn-h-sm: 44px;
	--input-h: 48px;
	--tap-min: 44px;
	--mobile-bar-h: 56px;
	--booking-bar-h: 56px;
	--thumb-size: 72px;
	--qr-size: 96px;

	/* ═══ 13. 圆角 ═══ */
	--radius-xs: 6px;
	--radius-sm: 10px;
	--radius-md: 12px;
	--radius-lg: 16px;
	--radius-card: 24px;
	--radius-pill: 32px;
	--radius-full: 999px;

	/* ═══ 14. 阴影 ═══ */
	--shadow-1: 0 1px 2px rgba(26, 23, 20, .04), 0 8px 24px -12px rgba(26, 23, 20, .10);
	--shadow-2: 0 2px 4px rgba(26, 23, 20, .05), 0 20px 40px -16px rgba(26, 23, 20, .16);
	--shadow-3: 0 1px 0 rgba(26, 23, 20, .06), 0 12px 32px -12px rgba(26, 23, 20, .14);
	--shadow-inset: inset 0 0 0 1px rgba(26, 23, 20, .06);
	--shadow-focus: 0 0 0 3px rgba(56, 88, 246, .18);

	/* ═══ 15. 层级 ═══ */
	--z-base: 0;
	--z-booking-bar: 100;
	--z-header: 200;
	--z-mobile-bar: 300;
	--z-drawer: 400;
	--z-modal: 500;
	--z-toast: 600;
	--z-skip-link: 700;

	/* ═══ 16. 动效 ═══ */
	--dur-1: 120ms;
	--dur-2: 200ms;
	--dur-3: 300ms;
	--dur-4: 400ms;
	--ease-out: cubic-bezier(.2, .7, .2, 1);
	--ease-in-out: cubic-bezier(.4, 0, .2, 1);
	--ease-drawer: cubic-bezier(.32, .72, 0, 1);
	--carousel-interval: 6000ms;
	/* 首屏 3 帧淡入：交叉 600ms（design-spec §9.2）。只动 opacity，禁止 translate/scale。 */
	--hero-frame-cross: 600ms;

	/* ═══ 17. 媒体比例 ═══ */
	/* hero 固定 4:3（实拍 ≥1600×1200）：16:9 会裁掉额头与发尾（design-spec §1 第 2 条）。 */
	--ratio-hero: 4 / 3;
	--ratio-product: 4 / 5;
	--ratio-product-grid: 1 / 1;
	--ratio-cover: 16 / 9;
	--ratio-cover-row: 4 / 3;
	--ratio-store: 3 / 2;
	--ratio-square: 1 / 1;
	--ratio-og: 1200 / 630;

	/* ═══ 17b. 首屏帧指示条（design-spec §5.5.9）═══ */
	/* 56×3 桌面 / 32×3 移动；命中区靠 padding 撑到 44 高，不用 scaleY 放大条本身。 */
	--hero-bar-width: 56px;
	--hero-bar-width-sm: 32px;
	--hero-bar-height: 3px;
	--hero-bar-gap: 8px;

	/* ═══ 18. 遮罩 ═══ */
	--scrim-bottom: linear-gradient(180deg, rgba(20, 17, 15, 0) 40%, rgba(20, 17, 15, .72) 100%);
	--gradient-placeholder: linear-gradient(160deg, #F4F1EC 0%, #E8E3DB 100%);
	--gradient-cta: linear-gradient(150deg, var(--color-cta-bg-from) 0%, var(--color-cta-bg-to) 100%);
	/* 内容封面缺图时按分类固定渐变（design-spec §7.2），同一分类永远同一色 */
	--gradient-cat-select: linear-gradient(160deg, #EDF1FE 0%, #DBE2FD 100%);
	--gradient-cat-wear: linear-gradient(160deg, #F6EEE0 0%, #EBDFC8 100%);
	--gradient-cat-care: linear-gradient(160deg, #E7F5EE 0%, #D3EBDD 100%);
	--gradient-cat-review: linear-gradient(160deg, #F0EDF6 0%, #E2DDED 100%);
	--gradient-cat-scalp: linear-gradient(160deg, #FDECEC 0%, #F7DEDE 100%);
}

/*
 * ═══ 19. 深色模式（design-spec §11 · 本期不实现，结构就位） ═══
 * L3 占位：二期启用时把下面 6 个关键变量的值填上即可，模板与 JS 调用点已就位
 * （assets/js/theme-toggle.js 只有函数签名）。本期不放切换入口。
 *
 * [data-theme="dark"] {
 *   --color-canvas: ...;
 *   --color-surface: ...;
 *   --color-surface-2: ...;
 *   --color-text-1: ...;
 *   --color-text-2: ...;
 *   --color-border-subtle: ...;
 * }
 */