/* ==========================================================================
   TOKENS.CSS — 设计令牌层
   酒店工装装修公司官网 · 时尚美学排版系统
   --------------------------------------------------------------------------
   本文件是全站唯一的「视觉真相来源」（Single Source of Truth）。
   所有颜色、字号、间距、字距、行高、圆角、时长、缓动都必须从令牌取值，
   禁止在组件中硬编码任何数值。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 色彩系统 Color System
   原则：低饱和主色 + 中性色阶。整体降饱和，靠明度对比建立层次，
        不用高饱和色块争夺注意力——酒店实景图才是视觉主角。
   -------------------------------------------------------------------------- */

:root {
  /* --- 1.1 中性色阶（暖灰基调，非冷灰，带极轻微暖度以显质感） --- */
  --color-neutral-0:   #FFFFFF;   /* 纯白 · 卡片底 */
  --color-neutral-25:  #FCFBF9;   /* 米白 · 浅色模式页底 */
  --color-neutral-50:  #F7F5F1;   /* 暖白 · 次级区块底 */
  --color-neutral-100: #EFEBE5;   /* 浅暖灰 · 分隔/填充 */
  --color-neutral-200: #DCD7CF;   /* 暖灰 · 细线（浅色模式） */
  --color-neutral-300: #BFB9AF;   /* 中暖灰 · 占位/禁用 */
  --color-neutral-400: #99938A;   /* 灰 · 辅助文字 */
  --color-neutral-500: #6E6A63;   /* 深灰 · 次要文字 */
  --color-neutral-600: #4A4741;   /* 更深深灰 */
  --color-neutral-700: #33302C;   /* 炭灰 · 深色模式卡片 */
  --color-neutral-800: #22201D;   /* 深炭 · 深色模式区块 */
  --color-neutral-900: #141311;   /* 近黑 · 深色模式页底 */
  --color-neutral-950: #0C0B0A;   /* 墨黑 · 沉浸区 */

  /* --- 1.2 主色（低饱和墨绿，酒店行业审美调性；克制、沉静、有质感） --- */
  --color-primary-50:  #EEF2EF;
  --color-primary-100: #D6E0D9;
  --color-primary-200: #AFC2B4;
  --color-primary-400: #6E8A76;
  --color-primary-600: #46604E;   /* 主色 · 用于链接/悬停/强调 */
  --color-primary-700: #34483B;   /* 主色深 · 按钮底 */
  --color-primary-800: #24332A;   /* 主色极深 · 文字于浅底 */

  /* --- 1.3 辅色（哑光黄铜，仅用于极少量点睛：序号、奖项、金线） --- */
  --color-accent-100: #F2EADB;
  --color-accent-300: #D9C79E;
  --color-accent-500: #B49B6B;   /* 黄铜 · 点睛用，全站用量 < 2% */
  --color-accent-700: #7D6940;

  /* --- 1.4 功能色（同样降饱和，避免破坏整体调性） --- */
  --color-success: #4A6B52;
  --color-warning: #9A7B3F;
  --color-danger:  #8C4A42;

  /* --- 1.5 语义映射 · 深色模式（本站默认模式） --- */
  --bg-page:        var(--color-neutral-900);   /* 页面底 */
  --bg-surface:     var(--color-neutral-800);   /* 卡片/区块底 */
  --bg-surface-alt: var(--color-neutral-700);   /* 次级填充 */
  --bg-immersive:   var(--color-neutral-950);   /* 沉浸区（hero/页脚） */
  --bg-inverse:     var(--color-neutral-25);    /* 反色区块（浅底） */

  --text-primary:   #F2EFEA;                    /* 主文字 · 暖白，非纯白，更耐看 */
  --text-secondary: #A5A099;                    /* 次要文字 · 正文说明 */
  --text-tertiary:  #75706A;                    /* 辅助/元信息 */
  --text-on-light:  var(--color-neutral-800);   /* 浅底上的文字 */
  --text-accent:    var(--color-accent-500);    /* 点睛文字 */

  --border-hairline: rgba(242, 239, 234, 0.10);  /* 发丝线 · 默认 */
  --border-strong:   rgba(242, 239, 234, 0.20);  /* 强调线 · 悬停/分组 */
  --border-accent:   rgba(180, 155, 107, 0.45);  /* 黄铜线 · 点睛 */

  --link-idle:    var(--text-primary);
  --link-hover:   var(--color-accent-300);
  --focus-ring:   rgba(180, 155, 107, 0.55);
}

/* --- 1.6 浅色模式覆盖（整站可切换；用于需高可读性的长文页） --- */
[data-theme="light"] {
  --bg-page:        var(--color-neutral-25);
  --bg-surface:     var(--color-neutral-0);
  --bg-surface-alt: var(--color-neutral-50);
  --bg-immersive:   var(--color-neutral-900);
  --bg-inverse:     var(--color-neutral-900);

  --text-primary:   var(--color-neutral-800);
  --text-secondary: var(--color-neutral-500);
  --text-tertiary:  var(--color-neutral-400);
  --text-on-light:  var(--color-neutral-800);
  --text-accent:    var(--color-accent-700);

  --border-hairline: rgba(34, 32, 29, 0.10);
  --border-strong:   rgba(34, 32, 29, 0.20);
  --border-accent:   rgba(125, 105, 64, 0.40);

  --link-hover: var(--color-primary-600);
}

/* --------------------------------------------------------------------------
   2. 字体系统 Typography
   原则：中文用「思源宋体」承载标题质感，避免默认黑体的廉价感；
        正文切换为无衬线保证长文可读性；数字用等宽衬线体现考究。
        标题走「大字距 + 大字号 + 紧行高」，正文走「正常字距 + 宽松行高」。
   -------------------------------------------------------------------------- */

:root {
  /* --- 2.1 字体族 --- */
  /* 标题：衬线。优先思源宋体 / 宋体类，营造高端克制感 */
  --font-display: "Source Han Serif SC", "Noto Serif SC", "Songti SC",
                  "STSong", "SimSun", Georgia, "Times New Roman", serif;

  /* 正文：无衬线。中文优先苹方/思源黑体，英文配 Inter */
  --font-sans:    "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC",
                  "Source Han Sans SC", "Noto Sans SC", "Microsoft YaHei",
                  "Helvetica Neue", Arial, sans-serif;

  /* 数字/元信息：等宽，用于项目数据、年份、面积等，体现精密感 */
  --font-mono:    "IBM Plex Mono", "SF Mono", "JetBrains Mono", Menlo,
                  Consolas, monospace;

  /* --- 2.2 字号层级 Modular Scale ---
     基准 16px，比例 1.25（大三级）+ 排版小级微调，形成 9 级层次。
     命名语义化，禁止直接使用 font-size 数值。                            */
  --fs-display:   clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem);   /* 40–72px 首屏主标题 */
  --fs-h1:        clamp(2rem, 1.5rem + 2.2vw, 3rem);       /* 32–48px 页面主标题 */
  --fs-h2:        clamp(1.5rem, 1.25rem + 1.1vw, 2rem);    /* 24–32px 区块标题 */
  --fs-h3:        clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);  /* 20–24px 卡片标题 */
  --fs-h4:        1.125rem;                                 /* 18px 小标题 */
  --fs-body-lg:   1.0625rem;                                /* 17px 引导段落 */
  --fs-body:      1rem;                                     /* 16px 正文 */
  --fs-body-sm:   0.9375rem;                                /* 15px 密集正文 */
  --fs-caption:   0.8125rem;                                /* 13px 辅助信息 */
  --fs-label:     0.75rem;                                  /* 12px 标签/元信息 */

  /* --- 2.3 字重（仅两档，保持克制；标题靠字号与字距拉层次，不靠字重堆叠） --- */
  --fw-regular: 400;
  --fw-medium:  500;

  /* --- 2.4 行高 Line Height ---
     规律：字号越大行高越紧，字号越小行高越松。                            */
  --lh-display: 1.04;
  --lh-heading: 1.18;
  --lh-subhead: 1.35;
  --lh-body:    1.75;   /* 长文放松，保证呼吸感 */
  --lh-dense:   1.55;
  --lh-label:   1.4;

  /* --- 2.5 字距 Letter Spacing ---
     规律：中文标题正字距或微开；英文大标题收紧；小标签大幅拉开。
     这是本套系统「高级感」最关键的参数之一。                              */
  --ls-display: -0.02em;   /* 大标题收紧，避免松散 */
  --ls-heading: -0.01em;
  --ls-body:     0.01em;   /* 中文正文微开，提升可读性 */
  --ls-label:    0.12em;   /* 标签/导航/按钮：大幅拉开，显精致 */
  --ls-caps:     0.16em;   /* 全大写英文/小字装饰 */

  /* --- 2.6 字距补充：中文标题专属（中文不宜负字距过大） --- */
  --ls-heading-cn: 0.02em;
}

/* --------------------------------------------------------------------------
   3. 间距系统 Spacing
   原则：8px 基准栅格，全部间距为 8 的倍数；建立 4 级呼吸节奏。
        留白是本设计的核心手法——宁可少放内容，不可压缩间距。
   -------------------------------------------------------------------------- */

:root {
  --space-1:  0.25rem;   /*  4px  图标与文字间隙 */
  --space-2:  0.5rem;    /*  8px  行内元素间隙 */
  --space-3:  0.75rem;   /* 12px  紧凑组件内边距 */
  --space-4:  1rem;      /* 16px  基础间距 */
  --space-5:  1.5rem;    /* 24px  组件内边距 */
  --space-6:  2rem;      /* 32px  卡片间距 */
  --space-7:  2.5rem;    /* 40px  小段落间距 */
  --space-8:  3rem;      /* 48px  区块内分隔 */
  --space-9:  4rem;      /* 64px  段落间距 */
  --space-10: 5rem;      /* 80px  区块间距（移动端） */
  --space-11: 6.5rem;    /* 104px 区块间距（桌面端） */
  --space-12: 8rem;      /* 128px 大区块间距 */

  /* 语义化区块间距：响应式，移动端收紧、桌面端舒展 */
  --section-y:       clamp(4rem, 3rem + 5vw, 8rem);   /* 区块上下留白 */
  --section-y-tight: clamp(2.5rem, 2rem + 3vw, 5rem); /* 紧凑区块间距 */
  --header-h:        4.5rem;                           /* 吸顶导航高度 */
  --header-h-md:     5.5rem;
}

/* --------------------------------------------------------------------------
   4. 栅格与容器 Grid & Container
   原则：12 列栅格，桌面端最大内容宽 1280px；正文段最大宽 68ch 保证阅读舒适。
        左右安全边距随屏宽递增，避免大屏内容贴边。
   -------------------------------------------------------------------------- */

:root {
  --container-max:      80rem;    /* 1280px 最大内容宽 */
  --container-wide:     90rem;    /* 1440px 通栏内容宽 */
  --container-narrow:   46rem;    /* 736px  正文阅读宽 */
  --container-text:     42rem;    /* 672px  单栏文章宽 */

  --gutter:     1.25rem;  /* 20px 移动端安全边距 */
  --gutter-md:  2rem;     /* 32px 平板 */
  --gutter-lg:  3rem;     /* 48px 桌面 */
  --gutter-xl:  4rem;     /* 64px 大屏 */

  --grid-cols:  12;
  --grid-gap:   var(--space-5);   /* 24px 列间距 */
  --grid-gap-lg: var(--space-6);  /* 32px 桌面列间距 */
}

/* --------------------------------------------------------------------------
   5. 圆角 / 阴影 / 描边 Radius, Elevation, Border
   原则：圆角极小（0–4px），近乎直角更显高级；拒绝大圆角与卡通感。
        本设计靠「细线」而非「阴影」分隔——阴影仅用于浮层。
   -------------------------------------------------------------------------- */

:root {
  --radius-none: 0;
  --radius-xs:   2px;    /* 按钮/标签 */
  --radius-sm:   4px;    /* 卡片 */
  --radius-md:   6px;    /* 大卡片 */
  --radius-full: 999px;  /* 胶囊（仅用于极少数场景） */

  /* 阴影：极度克制，仅浮层/吸顶导航使用，均为柔和低透明度 */
  --shadow-none: none;
  --shadow-nav:  0 1px 0 rgba(0, 0, 0, 0.24);
  --shadow-overlay: 0 24px 64px rgba(0, 0, 0, 0.45);
  --shadow-lift:    0 12px 32px rgba(0, 0, 0, 0.30);

  /* 描边：全站统一 1px 发丝线（高 DPI 下 0.5px 视觉等效） */
  --stroke-hairline: 1px;
  --stroke-emphasis: 2px;

  --z-base:     1;
  --z-sticky:   100;
  --z-nav:      200;
  --z-overlay:  400;
  --z-modal:    500;
  --z-float:    600;
}

/* --------------------------------------------------------------------------
   6. 动效 Motion
   原则：克制。时长统一 200–480ms，缓动统一为柔和出线（ease-out 类）。
        只做位移与透明度变化，禁止缩放弹跳、旋转、闪烁。
   -------------------------------------------------------------------------- */

:root {
  --dur-instant: 120ms;
  --dur-fast:    200ms;   /* 悬停反馈 */
  --dur-base:    320ms;   /* 常规过渡 */
  --dur-slow:    480ms;   /* 入场动画/图片缩放 */
  --dur-reveal:  720ms;   /* 滚动揭示 */

  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);   /* 主缓动 */
  --ease-inout:  cubic-bezier(0.65, 0.05, 0.36, 1);
  --ease-soft:   cubic-bezier(0.33, 1, 0.68, 1);      /* 柔和收尾 */

  --reveal-shift: 20px;   /* 滚动揭示位移距离 */
}

/* --------------------------------------------------------------------------
   7. 图片与媒体 Media
   原则：统一宽高比，防止布局抖动；图片一律轻微降饱和，与整体调性融合。
   -------------------------------------------------------------------------- */

:root {
  --ratio-portrait:  3 / 4;
  --ratio-square:    1 / 1;
  --ratio-landscape: 4 / 3;
  --ratio-wide:      16 / 9;
  --ratio-cinema:    21 / 9;
  --ratio-hero:      16 / 10;

  --img-filter: saturate(0.92) contrast(1.02);  /* 轻度降饱和，避免色彩过艳 */
  --img-zoom:   1.04;                            /* 悬停缩放比例，极克制 */
  --overlay-scrim: linear-gradient(
    to top,
    rgba(12, 11, 10, 0.82) 0%,
    rgba(12, 11, 10, 0.35) 45%,
    rgba(12, 11, 10, 0) 100%
  );
}

/* --------------------------------------------------------------------------
   8. 响应式断点参考（供注释用，CSS 变量无法用于媒体查询）
   --------------------------------------------------------------------------
   xs  ≤ 479px    手机竖屏
   sm  480–767px  手机横屏 / 小折叠
   md  768–1023px 平板
   lg  1024–1279px 小桌面 / 横屏平板
   xl  1280–1535px 标准桌面
   2xl ≥ 1536px   大屏 / 宽屏
   -------------------------------------------------------------------------- */