/* ==========================================================================
   承启非遗文化网站 · 设计令牌 (Design Tokens)
   视觉基准：影视飓风 ysjf.com —— 极简黑白、编辑式大字、媒体优先的卡片体系
   非遗化延展：在黑白骨架中仅保留一个朱砂强调色，克制使用
   ========================================================================== */

:root {
  /* ---------- 中性色（对齐 ysjf.com 设计令牌） ---------- */
  --c-ink-900: #0f0f12;          /* 最深，用于页脚/全屏遮罩 */
  --c-ink-800: #16161a;
  --c-ink-700: #24252c;          /* ysjf --color-base-content-100 / --color-primary */
  --c-ink-600: #3a3b44;
  --c-ink-500: #646464;          /* ysjf --color-base-content-200 */
  --c-ink-400: #8a8a8a;
  --c-ink-300: #adadad;          /* ysjf --color-base-content-300 */
  --c-ink-200: #d8d8d8;          /* ysjf --color-placeholder */
  --c-ink-100: #e8eaec;

  --c-paper-000: #ffffff;        /* ysjf --color-base-100 */
  --c-paper-050: #fafbfb;
  --c-paper-100: #f4f6f7;        /* ysjf --color-base-200 / --color-neutral */
  --c-paper-200: #eceef0;

  --c-line: #eeeeee;             /* ysjf --color-separator */
  --c-line-strong: #e2e4e6;
  --c-line-dark: rgba(255, 255, 255, .14);

  /* ---------- 非遗强调色 ---------- */
  --c-accent: #c1443a;           /* 朱砂 */
  --c-accent-deep: #96322a;
  --c-accent-soft: rgba(193, 68, 58, .08);
  --c-accent-line: rgba(193, 68, 58, .24);
  --c-gold: #b08d57;             /* 缃色，用于非遗证书/传承人标识 */
  --c-jade: #2f6b5e;             /* 青绿，用于分类标签 */
  --c-indigo: #2a4a6b;           /* 石青 */

  /* ---------- 语义色 ---------- */
  --c-success: #2f7d4f;
  --c-warning: #c98a1e;
  --c-error: #ff4b40;            /* ysjf --color-error */
  --c-info: #2a4a6b;

  /* ---------- 语义别名 ---------- */
  --bg-body: var(--c-paper-000);
  --bg-subtle: var(--c-paper-100);
  --bg-inverse: var(--c-ink-800);
  --text-primary: var(--c-ink-700);
  --text-secondary: var(--c-ink-500);
  --text-muted: var(--c-ink-300);
  --text-inverse: #ffffff;
  --border-color: var(--c-line);

  /* ---------- 字体 ---------- */
  --font-sans: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei UI", "Microsoft YaHei",
               system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Source Han Serif SC", "Noto Serif SC", "Songti SC", "STSong", "SimSun",
                Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono", Consolas,
               "Courier New", monospace;

  /* 字号阶梯（对标影视飓风的编辑式大字） */
  --fs-display: clamp(2.75rem, 7vw, 6.5rem);   /* Hero 主标题 */
  --fs-h1: clamp(2rem, 4vw, 3.25rem);
  --fs-h2: clamp(1.5rem, 2.6vw, 2.25rem);
  --fs-h3: clamp(1.125rem, 1.6vw, 1.5rem);
  --fs-h4: 1.125rem;
  --fs-body: 1rem;
  --fs-sm: .875rem;
  --fs-xs: .8125rem;
  --fs-2xs: .75rem;
  --fs-micro: .6875rem;

  --lh-tight: 1.08;
  --lh-snug: 1.3;
  --lh-normal: 1.6;
  --lh-relaxed: 1.85;

  --ls-tight: -.02em;
  --ls-normal: 0;
  --ls-wide: .08em;
  --ls-wider: .16em;
  --ls-widest: .28em;

  /* ---------- 间距 ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* 版心 */
  --w-page: 1440px;
  --w-content: 1200px;
  --w-narrow: 880px;
  --w-wide: 1680px;
  --gutter: 24px;
  --header-h: 64px;
  --header-h-mobile: 56px;

  /* ---------- 圆角（ysjf 使用 4–8px 的小圆角） ---------- */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-xl: 12px;
  --r-2xl: 16px;
  --r-pill: 9999px;

  /* ---------- 阴影 ---------- */
  --sh-xs: 0 1px 2px rgba(15, 15, 18, .04);
  --sh-sm: 0 2px 8px rgba(15, 15, 18, .06);
  --sh-md: 0 8px 24px rgba(15, 15, 18, .08);
  --sh-lg: 0 16px 48px rgba(15, 15, 18, .12);
  --sh-xl: 0 32px 80px rgba(15, 15, 18, .18);
  --sh-inset-line: inset 0 -1px 0 var(--c-line);

  /* ---------- 层级 ---------- */
  --z-base: 1;
  --z-sticky: 100;
  --z-header: 200;
  --z-drawer: 300;
  --z-overlay: 400;
  --z-modal: 500;
  --z-toast: 600;

  /* ---------- 动效 ---------- */
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --ease-in-out: cubic-bezier(.65, .05, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-fast: .16s;
  --dur: .28s;
  --dur-slow: .5s;
  --dur-slower: .8s;
}

/* 深色区块内使用的局部令牌 */
.is-dark {
  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, .72);
  --text-muted: rgba(255, 255, 255, .45);
  --border-color: var(--c-line-dark);
  --bg-body: var(--c-ink-800);
  color: var(--text-primary);
  background: var(--bg-body);
}