/* ==========================================================================
   星辉娱乐 XINGHUI LIVE · 场刊设计系统（Program Design System）
   文件 1/4：layer-tokens.css —— 层声明 + 设计令牌 + 基础排版 + 工具类
   结构约定：本站点用 CSS @layer 管理级联（tokens → base → shell → stage →
   pages → utils），并以 :root[data-theme] 提供「昼场 / 夜场」双主题令牌。
   与既有站点的差异：不用单文件 style.css，不用 !important 覆盖，层级靠声明顺序。
   ========================================================================== */

@layer tokens, base, shell, stage, pages, utils;

/* ---------- 1. 令牌：昼场（默认） ---------- */
@layer tokens {
  :root {
    color-scheme: light;

    /* 纸与墨 */
    --xh-bg: #f4f1e8;
    --xh-bg-2: #eae4d5;
    --xh-surface: #fdfbf5;
    --xh-surface-2: #f7f2e6;
    --xh-fg: #17140f;
    --xh-fg-2: #4c4437;
    --xh-fg-3: #8d8271;

    /* 舞台色：提示灯砖红 / 黄铜 / 孔雀蓝幕布 */
    --xh-cue: #b3401b;
    --xh-cue-soft: rgba(179, 64, 27, .12);
    --xh-brass: #b8862c;
    --xh-brass-hi: #dcae4e;
    --xh-band: #0f4f5c;
    --xh-band-fg: #eef6f4;
    --xh-teal: #0b6a78;

    /* 线条与体块 */
    --xh-line: rgba(23, 20, 15, .13);
    --xh-line-2: rgba(23, 20, 15, .26);
    --xh-line-3: rgba(23, 20, 15, .42);
    --xh-on-accent: #fdf7ea;
    --xh-lift: 0 20px 44px -26px rgba(23, 20, 15, .5);
    --xh-lift-hard: 5px 5px 0 rgba(23, 20, 15, .9);
    --xh-halftone: rgba(23, 20, 15, .07);

    /* 度量 */
    --xh-wrap: 1280px;
    --xh-rail: 148px;
    --xh-gap: 26px;
    --xh-pad: clamp(20px, 4vw, 60px);
    --xh-rad: 2px;

    /* 字体（全部系统字体栈，零外链） */
    --xh-display: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", sans-serif;
    --xh-body: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
    --xh-mono: Consolas, "SF Mono", "Cascadia Mono", "Courier New", monospace;

    /* 动效 */
    --xh-ease: cubic-bezier(.22, .61, .36, 1);
    --xh-spin: 14s;
  }

  /* ---------- 2. 令牌：夜场 ---------- */
  :root[data-theme="night"] {
    color-scheme: dark;

    --xh-bg: #100e0b;
    --xh-bg-2: #17140f;
    --xh-surface: #1c1811;
    --xh-surface-2: #221c15;
    --xh-fg: #f2ece0;
    --xh-fg-2: #c1b8a7;
    --xh-fg-3: #8b8375;

    --xh-cue: #e0653a;
    --xh-cue-soft: rgba(224, 101, 58, .16);
    --xh-brass: #dcae4e;
    --xh-brass-hi: #f0cf85;
    --xh-band: #0a1c22;
    --xh-band-fg: #e7f3f2;
    --xh-teal: #6cc3ce;

    --xh-line: rgba(242, 236, 224, .14);
    --xh-line-2: rgba(242, 236, 224, .26);
    --xh-line-3: rgba(242, 236, 224, .42);
    --xh-on-accent: #14100a;
    --xh-lift: 0 22px 46px -26px rgba(0, 0, 0, .8);
    --xh-lift-hard: 5px 5px 0 rgba(242, 236, 224, .82);
    --xh-halftone: rgba(242, 236, 224, .09);
  }
}

/* ---------- 3. 基础 ---------- */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  [hidden] { display: none !important; }

  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

  body {
    margin: 0;
    background: var(--xh-bg);
    color: var(--xh-fg);
    font-family: var(--xh-body);
    font-size: 1rem;
    line-height: 1.75;
    letter-spacing: .01em;
    /* 场刊纸纹：细网点 + 横向轻栅格，纯 CSS，无图片 */
    background-image:
      radial-gradient(var(--xh-halftone) .6px, transparent .6px),
      linear-gradient(transparent 96%, var(--xh-line) 96%);
    background-size: 4px 4px, 100% 92px;
    transition: background-color .3s var(--xh-ease), color .3s var(--xh-ease);
  }

  h1, h2, h3, h4, h5 {
    font-family: var(--xh-display);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -.025em;
    margin: 0 0 .6em;
    text-wrap: balance;
  }
  h1 { font-size: clamp(2.1rem, 5.4vw, 4.1rem); }
  h2 { font-size: clamp(1.55rem, 3vw, 2.5rem); }
  h3 { font-size: clamp(1.18rem, 1.8vw, 1.55rem); letter-spacing: -.015em; }
  h4 { font-size: 1.06rem; }
  p { margin: 0 0 1.05em; }
  a { color: inherit; text-decoration: none; }
  img, svg { max-width: 100%; display: block; }
  ul, ol { margin: 0; padding: 0; list-style: none; }
  button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
  input, select, textarea { font: inherit; color: inherit; }
  :focus-visible { outline: 2px solid var(--xh-cue); outline-offset: 3px; }
  ::selection { background: var(--xh-brass); color: #17140f; }

  table { border-collapse: collapse; width: 100%; }
  th, td { text-align: left; vertical-align: top; }

  /* 屏幕阅读器专用 */
  .xh-sr {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
}

/* ---------- 4. 工具类（最低层，可被任何层覆盖） ---------- */
@layer utils {
  .xh-wrap { width: min(var(--xh-wrap), 100% - (var(--xh-pad) * 2)); margin-inline: auto; }
  .xh-nowrap { white-space: nowrap; }
  .xh-hide-sm { display: none; }
  .xh-mono { font-family: var(--xh-mono); letter-spacing: .1em; text-transform: uppercase; font-size: .72rem; }
  .xh-lead { font-size: 1.06rem; color: var(--xh-fg-2); max-width: 62ch; }
  .xh-num { font-family: var(--xh-mono); font-variant-numeric: tabular-nums; }
  .xh-strike { text-decoration: line-through; color: var(--xh-fg-3); }
  @media (min-width: 900px) { .xh-hide-sm { display: initial; } }
}