/* ============================================================
   为民说 · 设计令牌
   ------------------------------------------------------------
   组件样式只允许引用语义令牌，不出现写死色值 —— 这是双主题
   一次切换成功的前提。改配色后请跑：python scripts/check-contrast.py
   ============================================================ */

/* ---------- 自托管字体：Noto Sans SC SemiBold ----------
 *
 * 授权：SIL Open Font License 1.1 —— 允许免费商用、嵌入、再分发，
 *   无商用侵权风险。授权全文见 fonts/LICENSE-OFL.txt。
 *   字体来源：Google Fonts 的 Noto Sans SC（Adobe 主导设计）。
 *
 * 体积：TTF 原始 10.1 MB → 转成 WOFF2 后 4.1 MB（容器/压缩，未删字形）。
 *   自托管而不是走 Google Fonts CDN：内网 / 离线环境也能正常显示。
 *
 * ⚠ `font-weight: 100 900` 是**故意写成一个范围**的：
 *   我们只有一个字重（SemiBold 600）。若只声明 600，浏览器在遇到
 *   700 时会在这份字体上再叠一层「伪粗体」，笔画会糊；声明成范围则
 *   所有字重都直接用这一份，不做合成，渲染最干净。
 */
@font-face {
  font-family: 'Noto Sans SC';
  src: url('fonts/NotoSansSC-SemiBold.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  /* swap：先用手系统字体把字显示出来，字体到位后替换，避免白屏 */
  font-display: swap;
}

:root {
  /* ---------- 中性色：界面骨架 ---------- */
  --bg-base:        #F7F6F3;
  --bg-surface:     #FFFFFF;
  --bg-subtle:      #F0EEE9;
  --bg-inset:       #E9E6E0;

  --border-subtle:  #E5E1DA;
  --border-strong:  #8F877C;

  --text-primary:   #1C1A17;
  --text-secondary: #57534B;
  --text-tertiary:  #6F6960;
  --text-disabled:  #A8A196;

  /* ---------- 主色：民政蓝 ---------- */
  --primary:        #12558C;
  --primary-hover:  #0D4573;
  --primary-active: #093757;
  --primary-soft:   #E7F0F9;
  --on-primary:     #FFFFFF;

  /* ---------- 强调：暖橙 ---------- */
  --accent:         #A94F09;
  --accent-soft:    #FBF0E3;

  /* ---------- 语义色 ---------- */
  --success:        #176B45;
  --success-soft:   #E6F3EC;
  --warning:        #8A5A00;
  --warning-soft:   #FBF2DC;
  --danger:         #B02429;
  --danger-soft:    #FBEAEA;

  /* 「全行业（beta测试版）」类别的标识色（用户 2026-09-22 指定用紫色）。
     不参与语义（不是 success/warning 那种含义），纯粹是类别配色 ——
     让它在剧本库里一眼能和「预设 / AI生成 / 草稿」区分开。
     对比度：#6D42C7 on #EFE8FB ≈ 5.9:1，达到 WCAG AA。 */
  --beta:           #6D42C7;
  --beta-soft:      #EFE8FB;

  /* 「自制」类别（工作室定稿的剧本）—— 青色。
     五个类别各占一个色相，扫一眼就能分开：
       预设=绿 · AI生成=橙 · 草稿=灰 · 自制=青 · 全行业beta=紫
     对比度：#0F766E on #DFF3F0 ≈ 4.6:1，过 WCAG AA。 */
  --custom:         #0F766E;
  --custom-soft:    #DFF3F0;

  --focus-ring:     #12558C;

  /* ---------- 难度色：与难度徽章同源 ----------
     简单 → 一般 → 困难 → 现实 是风险递进，
     用「绿 → 蓝 → 橙 → 红」四色编码，徽章与选择器共用同一组值。
     这里写成 var() 引用，深色主题下会自动跟随语义色一起切换。 */
  --diff-easy:       var(--success);
  --diff-easy-soft:  var(--success-soft);
  --diff-normal:     var(--primary);
  --diff-normal-soft: var(--primary-soft);
  --diff-hard:       var(--warning);
  --diff-hard-soft:  var(--warning-soft);
  --diff-real:       var(--danger);
  --diff-real-soft:  var(--danger-soft);

  /* ---------- 阴影 ---------- */
  --shadow-xs: 0 1px 2px rgba(28, 26, 23, .06);
  --shadow-sm: 0 1px 3px rgba(28, 26, 23, .08), 0 1px 2px rgba(28, 26, 23, .04);
  --shadow-md: 0 4px 12px rgba(28, 26, 23, .08), 0 2px 4px rgba(28, 26, 23, .04);
  --shadow-lg: 0 12px 32px rgba(28, 26, 23, .12), 0 4px 8px rgba(28, 26, 23, .05);

  --overlay: rgba(28, 26, 23, .45);

  /* ---------- 字体 ---------- */
  /* 首选自托管的 Noto Sans SC；后面是各平台的中文后备字体 ——
     字体加载失败（或还没 swap 完成）时不至于掉到衬线/宋体上 */
  --font-sans: "Noto Sans SC", system-ui, -apple-system, "Segoe UI", "PingFang SC",
               "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --text-2xs:  0.6875rem;
  --text-xs:   0.75rem;
  --text-sm:   0.8125rem;
  --text-base: 0.9375rem;
  --text-md:   1rem;
  --text-lg:   1.0625rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  2rem;

  --leading-tight: 1.3;
  --leading-snug:  1.45;
  --leading-base:  1.6;
  --leading-loose: 1.75;

  --weight-normal: 400;
  --weight-medium: 500;

  /* ---------- 间距 ---------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* ---------- 圆角 ---------- */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-full: 999px;

  /* ---------- 动效 ---------- */
  --dur-fast: 150ms;
  --dur-base: 200ms;
  --dur-slow: 300ms;
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* ---------- 层级 ---------- */
  --z-sticky:   10;
  --z-dropdown: 100;
  --z-overlay:  200;
  --z-modal:    300;
  --z-toast:    400;

  /* ---------- 布局 ---------- */
  --page-max:    1280px;
  --aside-width: 320px;
  --tap-min:     44px;
}

/* ============================================================
   深色主题
   两点关键：主色必须提亮；层级改用「表面提亮 + 边框」，不用阴影。
   ============================================================ */
[data-theme="dark"] {
  --bg-base:        #12151A;
  --bg-surface:     #1A1F27;
  --bg-subtle:      #222832;
  --bg-inset:       #2A313C;

  --border-subtle:  #2E3644;
  --border-strong:  #5E6B7E;

  --text-primary:   #ECEEF2;
  --text-secondary: #ADB6C2;
  --text-tertiary:  #8E98A6;
  --text-disabled:  #5E6875;

  --primary:        #6FB3F5;
  --primary-hover:  #8CC5FF;
  --primary-active: #A8D4FF;
  --primary-soft:   #16283A;
  --on-primary:     #0B1A28;

  --accent:         #F0B25E;
  --accent-soft:    #2E2415;

  --success:        #5FD39A;
  --success-soft:   #12291F;
  --warning:        #F5C45E;
  --warning-soft:   #2C2413;
  --danger:         #F58F92;
  --danger-soft:    #2E1719;

  /* 「全行业（beta测试版）」标识色（深色主题版）——
     浅色底上的 #6D42C7 在深色背景里几乎看不见，所以这里提亮成 #B79BEF，
     底衬也跟着换成深紫。对比度 ≈ 7.4:1，同样过 WCAG AA。 */
  --beta:           #B79BEF;
  --beta-soft:      #241A38;

  /* 「自制」深色版（对比度 ≈9.6:1） */
  --custom:         #5EEAD4;
  --custom-soft:    #11302C;

  --focus-ring:     #8CC5FF;

  --shadow-xs: none;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .30);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, .35);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, .45);

  --overlay: rgba(6, 9, 13, .68);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-base: 1ms;
    --dur-slow: 1ms;
  }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}