@charset "UTF-8";
/* ==========================================================================
   tokens.css — 龙之旅 / 凤凰国旅 企业官网 · 全站唯一样式令牌源
   --------------------------------------------------------------------------
   项目    : 凤凰国际旅游股份有限公司（品牌：龙之旅）企业官网
   作者    : 颜一屏（UI 设计师）
   版本    : v1.0  · 冻结 · 2026-10-20
   上游    : docs/site-spec.md v1.1 §7.4（色板约束）· docs/design-spec.md
   --------------------------------------------------------------------------
   【冻结声明】前端不得修改本文件中的任何数值。
   - 需要新颜色 / 新字号 / 新间距 → 先找设计师补令牌，不要在页面里写裸值。
   - 本文件之外，src/ 下任何 CSS 文件不得出现 #hex 色值、font-size: 1Xpx 之类的字面量
     （唯一例外：media query 内的断点像素值，CSS 变量不能用在 @media 条件里）。
   - 每个颜色令牌后面的注释是 WCAG 2.1 实测对比度，不是估算值。
     正文需 ≥4.5:1，大字号(≥24px/19px粗)与非文本图形需 ≥3:1。不达标即为 bug。
   --------------------------------------------------------------------------
   引入顺序（固定，不得调整）：
     tokens.css → base.css → layout.css → components.css → pages.css
   ========================================================================== */

:root {
  color-scheme: light;

  /* ==========================================================================
     1. 色彩 · 品牌主色（清华紫）
     用途：主按钮底、深色区块底、链接、强调。配白字 11.34:1，是本方案唯一承载
     白字的品牌色。数值由 site-spec.md §7.4 冻结，不得改动。
     ========================================================================== */
  --color-primary: #660874;         /* 主紫 · 配白 11.34:1 ✅ 主按钮底 / 深色区块底 / 链接文字 */
  --color-primary-50: #f7edf8;      /* 最浅紫底 · 配中性800 12.88:1 ✅ 标签底 / 提示条底 */
  --color-primary-100: #efdcf2;     /* 浅紫底 · 配中性800 11.32:1 ✅ 选中态底 / 表头底 */
  --color-primary-200: #dbb6e3;     /* 紫描边 · 配中性800 8.26:1 ✅ 卡片选中边框 / 图表第二色 */
  --color-primary-300: #c68fd4;     /* 装饰紫 · 配白仅 2.54:1 ❌ 仅限图形与渐变，禁止承载任何文字 */
  --color-primary-500: #660874;     /* = --color-primary，供需要完整阶梯的地方引用 */
  --color-primary-600: #5a0670;     /* hover 加深 · 配白 12.39:1 ✅ 主按钮 hover 底 */
  --color-primary-700: #4e0560;     /* active 加深 · 配白 13.87:1 ✅ 主按钮 active 底 / 链接 hover */
  --color-primary-800: #3d0449;     /* 深紫区块 · 配白 16.01:1 ✅ 深色大区块底（首页 S8 / 页脚） */
  --color-primary-900: #2b0333;     /* 最深紫 · 配白 18.05:1 ✅ 渐变末端 / 叠加蒙版底 */

  /* ==========================================================================
     2. 色彩 · 点缀橙
     ★ 硬规则：accent-500 (#F5821F) 是唯一「不能承载文字」的颜色。
       配白仅 2.59:1、配中性800 也只有 5.66:1（勉强过大字），因此它的合法用途只有：
       图标、下划线、数字强调、小面积色块、边框、hover 指示、进度条、focus ring(深底上)。
       需要橙色文字时一律用 accent-600 (#A03D00)。
     ========================================================================== */
  --color-accent: #f5821f;          /* 点缀橙 · 配白 2.59:1 ❌ 禁止承载白字/正文；仅图形与小面积色块 */
  --color-accent-50: #fdf3e8;       /* 极浅橙底 · 配中性800 13.39:1 ✅ 橙色图标底 / 高亮块底 */
  --color-accent-100: #fbe4cc;      /* 浅橙底 · 配中性800 11.93:1 ✅ 徽章底 / 图表底色 */
  --color-accent-500: #f5821f;      /* = --color-accent */
  --color-accent-600: #a03d00;      /* 深橙 · 配白 6.64:1 ✅ 橙色文字的唯一合法色值；亦可用于橙色按钮底 */
  --color-accent-700: #7a2e00;      /* 最深橙 · 配白 9.47:1 ✅ 深橙文字 hover / active */
  --color-accent-text: #a03d00;     /* 语义别名 = accent-600，表示「这是可以当文字用的橙」 */

  /* ==========================================================================
     3. 色彩 · 中性色阶（全站 90% 的面积由它构成）
     正文一律用 800；次要文字用 600；400 及更浅只能做描边/图标，不能做文字。
     ========================================================================== */
  --color-neutral-0: #ffffff;       /* 纯白 · 页面底 / 卡片底 */
  --color-neutral-50: #f7f7f9;      /* 次白 · 交替区块底 / 卡片 hover 底 · 配中性800 13.72:1 */
  --color-neutral-100: #f1f1f3;     /* 浅灰底 · 表头 / 输入框禁用底 / 占位符底 · 配中性800 13.01:1 */
  --color-neutral-200: #e3e4e8;     /* 分割线 / 卡片描边 · 配中性800 11.55:1 */
  --color-neutral-300: #cbcdd4;     /* 装饰描边 · 配白 1.59:1 ❌ 不可做文字；亦不可做输入框边框 */
  --color-neutral-400: #9ca0ac;     /* 图标弱化 / 禁用文字 · 配白 2.61:1 ❌ 禁止用于正文 */
  --color-neutral-500: #6b7280;     /* 输入框边框（下限）· 配白 4.83:1 ✅ 满足 WCAG 1.4.11 非文本 3:1 */
  --color-neutral-600: #4b5563;     /* 次要文字 / 图注 / 眉标 · 配白 7.56:1 ✅ 正文合格 */
  --color-neutral-700: #374151;     /* 强次要文字 · 配白 10.31:1 ✅ */
  --color-neutral-800: #1f2937;     /* 正文色 · 配白 14.68:1 ✅ 全站默认文字色 */
  --color-neutral-900: #111827;     /* 大标题 / 深底反白文字底 · 配白 17.74:1 ✅ */

  /* ==========================================================================
     4. 色彩 · 语义色（每个都配 -bg 浅底变体；文字色在浅底上均 ≥4.5:1）
     ========================================================================== */
  --color-success: #15803d;         /* 成功 · 配白 5.02:1 ✅ / 配 success-bg 4.76:1 ✅ */
  --color-success-bg: #ecfdf3;      /* 成功浅底 · 配中性800 13.92:1 ✅ */
  --color-success-border: #a7e3be;  /* 成功描边 · 仅装饰，配白 1.46:1 ❌ 禁止做文字/图标 */
  --color-warning: #b45309;         /* 警告 · 配白 5.02:1 ✅ / 配 warning-bg 4.67:1 ✅ */
  --color-warning-bg: #fef6e7;      /* 警告浅底 · 配中性800 13.67:1 ✅ */
  --color-warning-border: #f3d19e;  /* 警告描边 · 仅装饰，配白 1.46:1 ❌ */
  --color-danger: #b91c1c;          /* 危险 / 表单错误 · 配白 6.47:1 ✅ / 配 danger-bg 5.91:1 ✅ */
  --color-danger-bg: #fef2f2;       /* 危险浅底 · 配中性800 13.42:1 ✅ */
  --color-danger-border: #f0b4b4;   /* 危险描边 · 仅装饰，配白 1.77:1 ❌ */
  --color-info: #0e7490;            /* 信息 · 配白 5.36:1 ✅ / 配 info-bg 5.00:1 ✅ */
  --color-info-bg: #eff9fb;         /* 信息浅底 · 配中性800 13.71:1 ✅ */
  --color-info-border: #a8d9e3;     /* 信息描边 · 仅装饰，配白 1.53:1 ❌ */

  /* ==========================================================================
     5. 色彩 · 语义别名（组件只引用这一层，不直接引用色阶）
     好处：以后要换色只改这一层，组件不用动。
     ========================================================================== */
  --color-bg: var(--color-neutral-0);              /* 页面底色 */
  --color-bg-alt: var(--color-neutral-50);         /* 交替区块底色 */
  --color-surface: var(--color-neutral-0);         /* 卡片底 */
  --color-surface-raised: var(--color-neutral-0);  /* 浮层底（抽屉 / 下拉） */
  --color-surface-sunken: var(--color-neutral-100);/* 凹陷底（表头 / 代码块） */

  --color-text: var(--color-neutral-800);          /* 正文 14.68:1 ✅ */
  --color-text-strong: var(--color-neutral-900);   /* 大标题 */
  --color-text-muted: var(--color-neutral-600);    /* 次要 7.56:1 ✅ */
  --color-text-subtle: var(--color-neutral-500);   /* 图注 / 辅助 4.83:1 ✅ 仅 ≥14px 且非长段落 */
  --color-text-disabled: var(--color-neutral-400); /* 禁用 2.61:1 —— 表单禁用态允许，需配 aria-disabled */
  --color-text-inverse: var(--color-neutral-0);    /* 深底上的字 */
  --color-text-inverse-muted: var(--color-neutral-200); /* 深底上次要字 配 primary-800 12.60:1 ✅ */

  --color-link: var(--color-primary);              /* 链接 配白 11.34:1 ✅ */
  --color-link-hover: var(--color-primary-700);    /* 链接 hover 13.87:1 ✅ */
  --color-link-on-dark: var(--color-accent-100);   /* 深底上的链接 配 primary-800 13.01:1 ✅ */

  --color-border: var(--color-neutral-200);        /* 默认描边（装饰级） */
  --color-border-strong: var(--color-neutral-300); /* 强描边（表格竖线） */
  --color-border-input: var(--color-neutral-500);  /* 输入框边框 4.83:1 ✅ 不可用更浅的 300/400 */
  --color-border-input-hover: var(--color-neutral-600);
  --color-border-focus: var(--color-primary);      /* 焦点环 配白 11.34:1 ✅ */
  --color-border-focus-on-dark: var(--color-accent);/* 深底焦点环 配 primary 4.37:1 ✅ (>3:1) */

  --color-overlay: rgba(43, 3, 51, 0.56);          /* 抽屉 / 弹层蒙版，紫调黑而非纯黑 */
  --color-hero-scrim: rgba(43, 3, 51, 0.72);       /* 首屏图上蒙版：保证其上白字 ≥7:1 */

  /* 占位符（开发期可见 / 上线期清零，见 site-spec §9.0） */
  --color-todo-bg: var(--color-neutral-100);
  --color-todo-border: #b0b2ba;

  /* ==========================================================================
     6. 字体 · 字体族（零外部依赖：不引 Google Fonts / 不引任何字体 CDN）
     中文字体只走系统栈，首屏不产生额外字体请求，也不会有 FOUT/CLS。
     ========================================================================== */
  --font-sans: -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-display: -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  /* display 与 sans 同栈，靠「字重 700 + 负字距」制造层级，不靠换字体 */
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;
  /* mono 只用于证照编号 / 备案号 / 统一社会信用代码（L-GX-CJ00083、0450100712500143） */

  /* ==========================================================================
     7. 字体 · 字号阶梯（流体排版，clamp 下限=移动 上限=桌面）
     移动端正文最小 16px —— 低于 16px 会触发 iOS 输入框自动放大。
     ========================================================================== */
  --fs-xs: clamp(0.75rem, 0.73rem + 0.1vw, 0.8125rem);   /* 12 → 13px  徽章 / 备案小字 / 表格注释 */
  --fs-sm: clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem); /* 14 → 15px  图注 / 辅助文字 / 眉标 */
  --fs-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);   /* 16 → 17px  正文 */
  --fs-lg: clamp(1.0625rem, 1rem + 0.28vw, 1.1875rem);   /* 17 → 19px  导语 / 卡片标题(小) */
  --fs-xl: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);     /* 20 → 24px  H4 / 卡片标题 */
  --fs-2xl: clamp(1.5rem, 1.31rem + 0.9vw, 1.875rem);    /* 24 → 30px  H3 */
  --fs-3xl: clamp(1.75rem, 1.45rem + 1.45vw, 2.375rem);  /* 28 → 38px  H2（区块标题） */
  --fs-4xl: clamp(2rem, 1.5rem + 2.4vw, 3rem);           /* 32 → 48px  H1（页面标题） */
  --fs-5xl: clamp(2.375rem, 1.55rem + 3.9vw, 4rem);      /* 38 → 64px  数字大字 / 首屏 H1（仅首页） */

  /* ==========================================================================
     8. 字体 · 行高 / 字距 / 字重
     中文行高要比英文宽：正文 1.75 是长段落可读性的下限，别再压到 1.6。
     ========================================================================== */
  --lh-none: 1;
  --lh-tight: 1.2;      /* 数字大字、H1 */
  --lh-snug: 1.35;      /* H2 / H3 / 卡片标题 */
  --lh-normal: 1.5;     /* 表单标签、按钮、表格 */
  --lh-relaxed: 1.75;   /* 正文（默认） */
  --lh-loose: 1.9;      /* 长文正文（news-detail、legal） */

  --ls-tight: -0.02em;  /* ≥32px 大标题，收紧让中文标题更整 */
  --ls-snug: -0.01em;   /* 20–30px 标题 */
  --ls-normal: 0;       /* 正文 */
  --ls-wide: 0.04em;    /* 14–15px 辅助文字，略微放开提升小字可读性 */
  --ls-widest: 0.12em;  /* 眉标 / 编号 / 全大写英文缩写 */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ==========================================================================
     9. 间距刻度（4px 基准，命名 = 该值 ÷ 4；与 Tailwind 默认刻度完全一致）
     只允许使用下列刻度，不要写 padding: 13px 这种裸值。
     ========================================================================== */
  --space-0: 0;
  --space-1: 0.25rem;   /*  4 */
  --space-2: 0.5rem;    /*  8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.25rem;   /* 20 */
  --space-6: 1.5rem;    /* 24 */
  --space-7: 1.75rem;   /* 28 */
  --space-8: 2rem;      /* 32 */
  --space-9: 2.25rem;   /* 36 */
  --space-10: 2.5rem;   /* 40 */
  --space-11: 2.75rem;  /* 44 */
  --space-12: 3rem;     /* 48 */
  --space-14: 3.5rem;   /* 56 */
  --space-16: 4rem;     /* 64 */
  --space-18: 4.5rem;   /* 72 */
  --space-20: 5rem;     /* 80 */
  --space-24: 6rem;     /* 96 */

  /* 区块纵向节奏（section 上下内距）—— 全站只用这三档 */
  --section-y-sm: clamp(3rem, 5vw, 4rem);              /*  48 → 64px  相邻同族区块 */
  --section-y: clamp(4rem, 7vw, 6rem);                 /*  64 → 96px  标准区块 */
  --section-y-lg: clamp(5rem, 9vw, 8rem);              /*  80 → 128px 首屏 / CTA 大区块 */

  /* 标题与正文之间的固定间距 */
  --stack-h-to-body: var(--space-4);    /* H2 到正文 16px */
  --stack-body-to-body: var(--space-4); /* 段间距 16px */
  --stack-label: var(--space-2);        /* 表单标签到输入框 8px */
  --stack-error: var(--space-2);        /* 输入框到错误提示 8px */

  /* ==========================================================================
     10. 容器与栅格
     ========================================================================== */
  --container: 1200px;         /* 标准内容最大宽度（12 栏 × 76px + 11 × 24px 沟） */
  --container-wide: 1360px;    /* 全宽区块 / 门店卡片网格 */
  --container-narrow: 760px;   /* 长文正文（news-detail / legal），720–780 为可读上限 */
  --container-pad: clamp(1.25rem, 4vw, 2.5rem); /* 页面左右安全边距 20 → 40px */

  --grid-columns: 12;
  --grid-gutter: var(--space-6);   /* 24px 桌面 */
  --grid-gutter-sm: var(--space-4);/* 16px 移动端 */
  --grid-gap-y: var(--space-6);    /* 卡片行间距 */

  /* 断点（登记值，供 JS matchMedia / 文档 / 容器查询使用）
     ★ CSS 变量不能出现在 @media 条件里，写 @media 时必须用同样的字面量：
       mobile <640px · tablet 640–1023.98px · desktop ≥1024px · wide ≥1280px
     这四个数值是本文件允许出现字面量的唯一例外，不得改动。 */
  --bp-mobile: 640px;
  --bp-tablet: 1024px;
  --bp-desktop: 1280px;

  /* ==========================================================================
     11. 圆角
     企业站克制：卡片 14px 已是上限，不做胶囊化的圆润感。
     ========================================================================== */
  --radius-xs: 4px;    /* 标签 / 徽章 / 小色块 */
  --radius-sm: 6px;    /* 输入框 / 小按钮 */
  --radius-md: 10px;   /* 按钮 / 提示条 */
  --radius-lg: 14px;   /* 卡片 */
  --radius-xl: 20px;   /* 大面板 / hero 内嵌图 */
  --radius-pill: 999px;/* 状态点 / 计数气泡 */
  --radius-circle: 50%;

  /* ==========================================================================
     12. 边框宽度
     ========================================================================== */
  --border-1: 1px;
  --border-2: 2px;
  --border-3: 3px;

  /* ==========================================================================
     13. 阴影（全部紫调，不用纯黑 —— 纯黑阴影压在紫底上会发脏）
     ========================================================================== */
  --shadow-xs: 0 1px 2px rgba(61, 4, 73, 0.06);
  --shadow-sm: 0 2px 8px rgba(61, 4, 73, 0.08);
  --shadow-md: 0 6px 20px rgba(61, 4, 73, 0.10);
  --shadow-lg: 0 16px 40px rgba(61, 4, 73, 0.14);
  --shadow-header: 0 2px 12px rgba(61, 4, 73, 0.10); /* 滚动后头部 */
  --shadow-btn-primary: 0 2px 6px rgba(61, 4, 73, 0.20);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.08); /* 深色块内的顶部微光 */

  /* ==========================================================================
     14. 动效（时长 + 缓动；reduced-motion 时统一归零，见文件末尾）
     ========================================================================== */
  --dur-instant: 80ms;   /* 按下反馈 */
  --dur-fast: 140ms;     /* 颜色 / 阴影变化 */
  --dur-base: 220ms;     /* 抽屉 / 展开 */
  --dur-slow: 380ms;     /* 入场位移动效 */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);   /* 默认：进入 */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);     /* 位移 / 展开 */
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);       /* 退出 */

  /* ==========================================================================
     15. 层级（z-index 只允许用这 6 个值，不许临时写 9999）
     ========================================================================== */
  --z-base: 0;
  --z-sticky: 10;        /* 粘性信任栏 / 表格首列 */
  --z-to-top: 40;        /* 回到顶部 */
  --z-bottom-bar: 50;    /* 移动端常驻底栏 */
  --z-header: 60;        /* 站点头部 */
  --z-drawer: 70;        /* 移动端抽屉 + 蒙版 */
  --z-skip-link: 80;     /* 跳转链接（必须盖住一切） */

  /* ==========================================================================
     16. 组件尺寸常量（前端直接引用这些，别自己量）
     ========================================================================== */
  --tap-min: 44px;            /* 触控最小点击区，任何可点元素不得小于这个 */
  --header-height: 64px;      /* 移动端头部高度 */
  --header-height-lg: 80px;   /* 桌面头部高度 */
  --header-height-scrolled: 64px;
  --bottom-bar-height: 60px;  /* 移动端常驻底栏总高（含 1px 上边框） */
  --anchor-offset: 88px;      /* scroll-margin-top：抵消 sticky 头 + 8px 呼吸 */

  --btn-h-sm: 40px;           /* 桌面 40px；触屏由 §17 覆盖为 44px */
  --btn-h-md: 48px;
  --btn-h-lg: 56px;
  --btn-px-sm: var(--space-4);
  --btn-px-md: var(--space-6);
  --btn-px-lg: var(--space-8);

  --input-h-sm: 40px;
  --input-h-md: 48px;
  --input-h-lg: 52px;
  --input-px: var(--space-4);

  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;   /* 标准图标尺寸 = 24×24 网格 */
  --icon-xl: 32px;   /* 业务卡片图标 */
  --icon-2xl: 40px;  /* 空态 / 大图标 */

  --card-pad: var(--space-6);      /* 卡片内距 24 */
  --card-pad-sm: var(--space-5);   /* 紧凑卡片内距 20 */
  --card-gap: var(--space-6);

  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;
}

/* ==========================================================================
   17. 深色区块作用域（首页 S8 / 页脚 / hero 蒙版上）
   用途：把「深底上的文字色」也收进令牌，避免前端在深色块里手工挑 #ccc。
   用法：<section class="section section--dark"> 或 .footer
   ========================================================================== */
.section--dark,
.on-dark {
  --color-text: var(--color-text-inverse);
  --color-text-strong: var(--color-text-inverse);
  --color-text-muted: var(--color-text-inverse-muted);
  --color-text-subtle: var(--color-neutral-300);
  --color-border: rgba(255, 255, 255, 0.16);
  --color-border-strong: rgba(255, 255, 255, 0.28);
  --color-link: var(--color-accent-100);
  --color-link-hover: var(--color-neutral-0);
  --color-border-focus: var(--color-border-focus-on-dark);
  color: var(--color-text);
}

/* 触控设备：所有小尺寸控件抬到 44px 最小点击区 */
@media (hover: none) and (pointer: coarse) {
  :root {
    --btn-h-sm: 44px;
    --input-h-sm: 44px;
  }
}

/* ==========================================================================
   18. 减少动效（系统级偏好）
   把时长令牌归零，使 CSS transition 与依赖令牌的 JS 动画同时失效。
   ★ 内容可见性不依赖动画：所有入场动画元素的默认状态必须是「可见」。
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 1ms;
    --dur-fast: 1ms;
    --dur-base: 1ms;
    --dur-slow: 1ms;
  }
}

/* ==========================================================================
   19. 打印（家长/加盟商会打印费用表与流程页）
   ========================================================================== */
@media print {
  :root {
    --color-text: #000000;
    --color-bg: #ffffff;
    --shadow-xs: none;
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
  }
}