/* ==========================================================================
   欧展通 EuroExpo Desk · 设计 token（唯一 :root）
   依据：research-design.md 第 6.1–6.4 节。数值已定稿，改动请同步报告。
   加载顺序：tokens.css → base.css → components.css → pages/*.css
   层顺序在此与 base.css 中各声明一次（重复声明是幂等的）。
   ========================================================================== */
@layer reset, tokens, base, layout, components, pages, utilities;

/* 西文字体 Inter（自托管，拉丁子集）。由 /assets/fonts/inter.css 声明两个 @font-face：
   - "Inter"：unicode-range 为拉丁、拉丁补充、拉丁扩展 A（含 ä ö ü ß ë ï é）。
   - "Inter zh"：同一个 woff2 文件，但 unicode-range 去掉 U+2018–201D（弯引号）、
     U+2026（省略号）、U+2014（破折号），让这些中西文共用码位落到中文字体，
     避免中文页里的引号变窄、破折号与省略号位置偏移。
   该文件由 <head> 的 <link rel="stylesheet"> 直接加载（head.site 的 fontsCss），这里不再 @import，避免二次请求与串行阻塞渲染（P6 Lighthouse）。 */

@layer tokens {
  :root {
    color-scheme: light;

    /* ---- 主蓝阶（600 = 品牌色 #2454c6，OKLCH 色相约 263°） ---- */
    --blue-50: #f2f7ff;   /* 蓝调底、选中行、日期块底 */
    --blue-100: #e4efff;  /* 悬停底、信息提示底 */
    --blue-200: #cbdfff;  /* 蓝调边线 */
    --blue-300: #a6c7fe;  /* 深蓝面板上的链接 */
    --blue-400: #70a1fd;  /* 深蓝面板上的图标与焦点环 */
    --blue-500: #3f75e9;  /* 只用于图标和 ≥24px 大字 */
    --blue-600: #2454c6;  /* 主按钮底、链接、焦点环（白字 6.65:1） */
    --blue-700: #1a44a8;  /* 主按钮悬停；蓝调底上的文字 */
    --blue-800: #143787;  /* 主按钮按下；日期大数字 */
    --blue-900: #102b67;  /* 阴影与边线的色源 */
    --blue-950: #081c44;  /* 横幅遮罩色源 */

    /* ---- 深蓝面板（低饱和） ---- */
    --navy-800: #253c60;
    --navy-900: #1b2f4f;  /* 收尾行动带 */
    --navy-950: #0f1f39;
    --navy-text-secondary: #cdd1d8; /* 深蓝面板上的次要文字（8.75:1） */

    /* ---- 中性灰阶（色相 258°） ---- */
    --gray-0: #ffffff;
    --gray-25: #fbfcfd;
    --gray-50: #f6f7f9;   /* 区块色带、页脚 */
    --gray-100: #eef0f3;  /* 悬停底、中性徽标底 */
    --gray-200: #dee1e7;  /* 分隔线 */
    --gray-300: #cdd1d8;  /* 次按钮边线 */
    --gray-400: #9ea5af;  /* 禁用文字、面包屑分隔符 */
    --gray-450: #868d97;  /* 表单控件边线（3.35:1） */
    --gray-500: #6a727e;  /* 三级文字、占位符 */
    --gray-600: #515963;  /* 次要文字 */
    --gray-700: #3c434d;  /* 导航文字、图标 */
    --gray-800: #292e36;  /* 强调正文 */
    --gray-900: #171c23;  /* 主文字、标题 */
    --gray-950: #0c1015;

    /* ---- 语义色：底 / 边线 / 实底（白字） / 文字（在自身底上） ---- */
    --success-bg: #eaf8ec;
    --success-border: #bce3c3;
    --success-solid: #0a7e3a;
    --success-text: #045d28;
    --warning-bg: #fff1e2;
    --warning-border: #f2d1ad;
    --warning-solid: #8a5600;
    --warning-text: #734803;
    --danger-bg: #ffefee;
    --danger-border: #fdc9c4;
    --danger-solid: #ba2b2e;
    --danger-text: #910e19;
    --info-bg: #f2f7ff;
    --info-border: #cbdfff;
    --info-solid: #2454c6;
    --info-text: #1a44a8;

    /* ---- 五类类别色（只用于服务分类面板、服务卡、展会卡日期块） ---- */
    --cat-stand-bg: #eff5ff;
    --cat-stand-hover: #e4edff;
    --cat-stand-border: #cdddfb;
    --cat-stand-icon: #2f54a0;
    --cat-translation-bg: #f5f2ff;
    --cat-translation-hover: #eee9ff;
    --cat-translation-border: #ded7f8;
    --cat-translation-icon: #5f4598;
    --cat-freight-bg: #eaf7ff;
    --cat-freight-hover: #daf1fe;
    --cat-freight-border: #c1e2f6;
    --cat-freight-icon: #055f86;
    --cat-catering-bg: #fdf3e8;
    --cat-catering-hover: #faead8;
    --cat-catering-border: #f0d8bd;
    --cat-catering-icon: #7a4d04;
    --cat-host-bg: #fff0f2;
    --cat-host-hover: #ffe6e8;
    --cat-host-border: #f9d1d4;
    --cat-host-icon: #923144;

    /* ---- 边线（半透明，色源蓝 900） ---- */
    --border-subtle: rgb(16 43 103 / 0.08);
    --border-default: rgb(16 43 103 / 0.14);
    --border-strong: rgb(16 43 103 / 0.22);
    --border-control: var(--gray-450);

    /* ---- 白色透明层（图上控件、深色底上的按钮） ---- */
    --white-a10: rgb(255 255 255 / 0.1);
    --white-a12: rgb(255 255 255 / 0.12);
    --white-a16: rgb(255 255 255 / 0.16);
    --white-a18: rgb(255 255 255 / 0.18);
    --white-a20: rgb(255 255 255 / 0.2);
    --white-a22: rgb(255 255 255 / 0.22);
    --white-a32: rgb(255 255 255 / 0.32);
    --white-a86: rgb(255 255 255 / 0.86);
    --white-a90: rgb(255 255 255 / 0.9);

    /* ---- 横幅图片遮罩（色源蓝 950） ---- */
    --hero-shade-side: linear-gradient(90deg, rgb(8 28 68 / 0.72) 0%, rgb(8 28 68 / 0.36) 45%, rgb(8 28 68 / 0) 75%);
    --hero-shade-bottom: linear-gradient(180deg, rgb(8 28 68 / 0) 0%, rgb(8 28 68 / 0.4) 100%);

    /* ---- 阴影（色源蓝 900，两到三层，负扩散收窄） ---- */
    --shadow-ring: 0 0 0 1px rgb(16 43 103 / 0.08);
    --shadow-ring-hover: 0 0 0 1px rgb(16 43 103 / 0.14);
    --shadow-xs: 0 1px 2px rgb(16 43 103 / 0.06);
    --shadow-sm: 0 1px 2px rgb(16 43 103 / 0.06), 0 2px 4px rgb(16 43 103 / 0.04);
    --shadow-md: 0 2px 4px rgb(16 43 103 / 0.04), 0 8px 16px -4px rgb(16 43 103 / 0.08);
    --shadow-lg: 0 4px 8px -2px rgb(16 43 103 / 0.05), 0 16px 32px -8px rgb(16 43 103 / 0.12);
    --shadow-xl: 0 1px 1px rgb(16 43 103 / 0.03), 0 8px 16px -4px rgb(16 43 103 / 0.06), 0 24px 48px -12px rgb(16 43 103 / 0.16);
    --shadow-btn-primary: inset 0 1px 0 rgb(255 255 255 / 0.16), 0 1px 2px rgb(16 43 103 / 0.24);
    --focus-ring-soft: 0 0 0 3px rgb(36 84 198 / 0.2);

    /* ---- 字体栈 ---- */
    --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-sans-zh: "Inter zh", "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", sans-serif;
    --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --font-body: var(--font-sans);

    /* ---- 字号阶梯（西文；clamp 区间 375–1280px，rem+vw 混合保证缩放可用） ---- */
    --text-display: clamp(2.5rem, 1.671rem + 3.536vw, 4.5rem);   /* 40–72 */
    --text-h1: clamp(2rem, 1.482rem + 2.21vw, 3.25rem);           /* 32–52 */
    --text-h2: clamp(1.625rem, 1.366rem + 1.105vw, 2.25rem);      /* 26–36 */
    --text-h3: clamp(1.25rem, 1.146rem + 0.442vw, 1.5rem);        /* 20–24 */
    --text-h4: 1.125rem;    /* 18 卡片标题 */
    --text-lead: 1.125rem;  /* 18 */
    --text-body: 1rem;      /* 16 */
    --text-sm: 0.875rem;    /* 14 */
    --text-xs: 0.8125rem;   /* 13 */
    --text-badge: 0.75rem;  /* 12 */
    --text-btn: 0.9375rem;  /* 15 */
    --text-nav: 0.9375rem;  /* 15 */

    /* ---- 行高 ---- */
    --leading-display: 1.05;
    --leading-h1: 1.1;
    --leading-h2: 1.15;
    --leading-h3: 1.25;
    --leading-h4: 1.35;
    --leading-lead: 1.6;
    --leading-body: 1.6;
    --leading-sm: 1.5;
    --leading-xs: 1.45;
    --leading-badge: 1.3;

    /* ---- 字距 ---- */
    --tracking-display: -0.035em;
    --tracking-h1: -0.03em;
    --tracking-h2: -0.025em;
    --tracking-h3: -0.015em;
    --tracking-h4: -0.01em;
    --tracking-body: 0;
    --tracking-badge: 0.01em;

    /* ---- 字重（中文页只用 400 / 600，见 :lang(zh)） ---- */
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-heading: 600;
    --weight-label: 500;   /* 表单标签、方块名称 */
    --weight-btn: 500;
    --weight-nav: 500;
    --weight-badge: 500;

    /* ---- 行长 ---- */
    --measure: 42.5rem;    /* 西文正文栏 680px；中文页 36em */

    /* ---- 间距（4px 基数） ---- */
    --space-0: 0;
    --space-px: 1px;
    --space-0-5: 2px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;
    --space-32: 128px;
    --section-y: clamp(4rem, 2.757rem + 5.304vw, 7rem);   /* 区块纵向内边距 64–112 */
    --gutter: clamp(1rem, 0.586rem + 1.768vw, 2rem);      /* 页面左右留白 16–32 */
    --container-max: 1200px;
    --grid-gap: 24px;
    --card-pad: 24px;
    --card-pad-compact: 20px;
    --card-pad-large: 32px;
    --card-gap: 24px;
    --header-h: 64px;
    --filter-bar-h: 64px;

    /* ---- 圆角（只用这六个） ---- */
    --radius-xs: 4px;     /* 行内代码、小色块 */
    --radius-sm: 6px;     /* 标签、类别徽标、国家代码方块 */
    --radius-md: 8px;     /* 按钮、输入框、导航按钮、日期块 */
    --radius-lg: 12px;    /* 卡片、面板里的方块 */
    --radius-xl: 16px;    /* 下拉面板、配图外框、深蓝行动带 */
    --radius-pill: 999px; /* 状态徽标、轮播控件、筛选胶囊 */

    /* ---- 层级 ---- */
    --z-content: 0;
    --z-sticky: 20;
    --z-header: 40;
    --z-panel: 50;
    --z-mobile-menu: 60;
    --z-dialog: 80;
    --z-toast: 90;
    --z-skip: 100;

    /* ---- 动效 ---- */
    --dur-instant: 80ms;   /* 按下 */
    --dur-fast: 120ms;     /* 颜色、边线悬停；面板关闭 */
    --dur-base: 180ms;     /* 面板打开、卡片悬停阴影 */
    --dur-slow: 260ms;     /* 横幅文字进入、手风琴、移动端菜单 */
    --dur-reveal: 500ms;   /* 区块进场 */
    --dur-slide: 600ms;    /* 横幅交叉淡入 */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    /* 位移与缩放量：减少动效时归零（见 base.css） */
    --motion-y-4: 4px;
    --motion-y-8: 8px;
    --motion-y-12: 12px;
    --motion-press: 0.98;

    /* ---- 语义别名层（组件只用这一层和上面的灰阶/蓝阶） ---- */
    --color-bg: var(--gray-0);
    --color-bg-band: var(--gray-50);
    --color-surface: var(--gray-0);
    --color-surface-raised: var(--gray-100);
    --color-surface-hover: var(--gray-50);
    --color-text: var(--gray-900);
    --color-text-strong: var(--gray-800);
    --color-text-secondary: var(--gray-600);
    --color-text-tertiary: var(--gray-500);
    --color-text-disabled: var(--gray-400);
    --color-text-nav: var(--gray-700);
    --color-text-on-brand: var(--gray-0);
    --color-text-on-dark: var(--gray-0);
    --color-text-on-dark-secondary: var(--navy-text-secondary);
    --color-brand: var(--blue-600);
    --color-brand-hover: var(--blue-700);
    --color-brand-active: var(--blue-800);
    --color-brand-soft: var(--blue-50);
    --color-brand-soft-hover: var(--blue-100);
    --color-brand-text: var(--blue-700);
    --color-link: var(--blue-600);
    --color-link-hover: var(--blue-700);
    --color-focus: var(--blue-600);
    --color-divider: var(--border-subtle);
    --color-dark-band: var(--navy-900);
    --color-dark-band-hover: var(--navy-800);

    /* ---- 旧名别名（兼容旧页面 theme.css 契约） ---- */
    --accent: var(--color-brand);
    --text: var(--color-text);
    --muted: var(--color-text-secondary);
    --line: var(--gray-200);
    --bg: var(--gray-50);
    --surface: var(--gray-0);
    --surface-raised: var(--gray-100);
    --error: var(--danger-text);
    --success: var(--success-text);
  }

  /* ---- 中文覆盖：系统字体栈、字号取西文 0.85–0.9、标题字距 0、行高放宽、字重只用 400/600 ---- */
  :lang(zh) {
    --font-body: var(--font-sans-zh);
    --text-display: clamp(2.125rem, 1.452rem + 2.873vw, 3.75rem);  /* 34–60 */
    --text-h1: clamp(1.75rem, 1.336rem + 1.768vw, 2.75rem);        /* 28–44 */
    --text-h2: clamp(1.5rem, 1.293rem + 0.884vw, 2rem);            /* 24–32 */
    --text-h3: clamp(1.25rem, 1.198rem + 0.221vw, 1.375rem);       /* 20–22 */
    --text-lead: 1.0625rem;  /* 17 */
    --leading-display: 1.2;
    --leading-h1: 1.25;
    --leading-h2: 1.3;
    --leading-h3: 1.4;
    --leading-h4: 1.45;
    --leading-lead: 1.75;
    --leading-body: 1.75;
    --leading-sm: 1.7;
    --leading-xs: 1.6;
    --leading-badge: 1.4;
    --tracking-display: 0;
    --tracking-h1: 0;
    --tracking-h2: 0;
    --tracking-h3: 0;
    --tracking-h4: 0;
    --tracking-badge: 0;
    --weight-medium: 600;   /* 微软雅黑无 500，归并到 600 */
    --weight-label: 600;
    --weight-btn: 600;
    --weight-nav: 400;
    --weight-badge: 600;
    --measure: 36em;
  }

  /* 中文页内嵌的西文片段（展会名、场馆名）切回西文栈 */
  :lang(zh) :is(:lang(en), :lang(de), :lang(nl), :lang(fr), :lang(it), :lang(es)) {
    --font-body: var(--font-sans);
  }
}