/* ==========================================================================
   MusicTag Web Portal — Design Tokens
   单一事实来源：所有颜色 / 间距 / 圆角 / 阴影 / 字号 / 动效曲线集中定义。
   业务模板只允许引用 token，不允许出现硬编码色值与魔法数字。
   --------------------------------------------------------------------------
   配色哲学：85% 中性灰 + 单一品牌钴蓝 + 一个黄铜色作为"推荐位"信号色。
   不使用渐变按钮、不使用多色辉光、不使用玻璃拟态卡片。
   ========================================================================== */

:root {
  color-scheme: light;

  /* ── 中性色阶 ────────────────────────────────────────────────────────── */
  --c-canvas:        #F6F6F4;   /* 页面底色，微暖白，避免死白 */
  --c-surface:       #FFFFFF;   /* 卡片 / 表单承载面 */
  --c-surface-2:     #FBFAF8;   /* 次级填充：表头、代码块背景 */
  --c-surface-sunk:  #F2F2EF;   /* 下沉填充：输入框、分段控件 */
  --c-line:          #E5E5E1;   /* 主分隔线 */
  --c-line-strong:   #D5D5D0;   /* 强分隔线 / 边界 */
  --c-ink:           #16181C;   /* 主文本 */
  --c-ink-2:         #555B64;   /* 次级文本 */
  --c-ink-3:         #8E939B;   /* 三级文本 / 占位符 */
  --c-ink-inv:       #F5F5F2;   /* 深色面上的主文本 */

  /* ── 深色面 ──────────────────────────────────────────────────────────── */
  --c-dark:          #0E1014;
  --c-dark-2:        #16191F;
  --c-dark-3:        #1F232B;
  --c-dark-line:     rgba(255, 255, 255, .09);
  --c-dark-line-2:   rgba(255, 255, 255, .18);
  --c-on-dark:       #F3F3F0;
  --c-on-dark-2:     #A4AAB4;
  --c-on-dark-3:     #6E7481;

  /* ── 品牌色（钴蓝，唯一主色）─────────────────────────────────────────── */
  --c-brand:         #2A44D8;
  --c-brand-strong:  #1E33AC;
  --c-brand-soft:    #6C7EEE;
  --c-brand-tint:    #EEF0FD;
  --c-brand-line:    #D6DCFA;

  /* ── 信号色 ──────────────────────────────────────────────────────────── */
  --c-brass:         #96681E;   /* 推荐 / 黄金位 */
  --c-brass-tint:    #FAF2E3;
  --c-brass-line:    #EADFC2;
  --c-green:         #1B7147;   /* 成功 / 生效 */
  --c-green-tint:    #EDF5F0;
  --c-green-line:    #D2E8DA;
  --c-red:           #B0241B;   /* 错误 / 必填 */
  --c-red-tint:      #FCEDEB;
  --c-red-line:      #F3D8D4;
  --c-amber:         #8A5B12;   /* 沙箱 / 测试环境提示 */
  --c-amber-tint:    #FBF1DF;
  --c-amber-line:    #EFDFBE;

  /* ── 字体 ────────────────────────────────────────────────────────────── */
  --f-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
            "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo,
            Consolas, "Liberation Mono", monospace;

  /* ── 字号（中文正文行高偏大，避免拥挤）─────────────────────────────── */
  --t-micro:  11px;   /* 标签 / 角标 */
  --t-caption:12px;   /* 辅助说明 */
  --t-body-s: 13px;   /* 表格 / 密集信息 */
  --t-body:   14px;   /* 正文 */
  --t-lead:   15px;   /* 引导语 */
  --t-sub:    17px;   /* 小节标题 */
  --t-h3:     18px;   /* 卡片标题 */
  --t-h2:     22px;   /* 区块标题 */
  --t-h1:     30px;   /* 页面标题 */
  --t-price:  40px;   /* 价格 */
  --t-display: clamp(34px, 4.6vw, 52px);

  /* ── 字重 ────────────────────────────────────────────────────────────── */
  --w-regular: 400;
  --w-medium:  500;
  --w-semi:    600;
  --w-bold:    700;

  /* ── 间距（4pt 基准网格）────────────────────────────────────────────── */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;

  /* 区块纵向节奏：随视口收敛 */
  --section-y: clamp(56px, 7vw, 96px);

  /* ── 圆角（全站仅四档）──────────────────────────────────────────────── */
  --r-sm:   8px;    /* 控件：按钮 / 输入框 */
  --r-md:   12px;   /* 卡片 / 面板 */
  --r-lg:   16px;   /* 大面板 / 弹窗 */
  --r-xl:   24px;   /* 落地页大块 */
  --r-full: 999px;

  /* ── 阴影（仅三档，低透明度长投影，不带颜色辉光）──────────────────── */
  --sh-1: 0 1px 2px rgba(22, 24, 28, .05);
  --sh-2: 0 1px 2px rgba(22, 24, 28, .04),
          0 8px 20px -8px rgba(22, 24, 28, .10);
  --sh-3: 0 2px 6px rgba(22, 24, 28, .05),
          0 24px 48px -18px rgba(22, 24, 28, .20);

  /* ── 动效 ────────────────────────────────────────────────────────────── */
  --e-out:     cubic-bezier(.2, 0, 0, 1);      /* 标准：进入与结束 */
  --e-in-out:  cubic-bezier(.4, 0, .2, 1);     /* 过渡类 */
  --e-spring:  cubic-bezier(.34, 1.4, .64, 1); /* 弹性：点按反馈 */
  --d-fast: 130ms;
  --d-base: 200ms;
  --d-mid:  300ms;
  --d-slow: 460ms;

  /* ── 层级 ────────────────────────────────────────────────────────────── */
  --z-nav:  60;
  --z-panel:80;
  --z-modal:100;
  --z-toast:120;

  /* ── 布局 ────────────────────────────────────────────────────────────── */
  --w-page:      1160px;   /* 内容主宽 */
  --w-narrow:    780px;    /* 表单 / 结果类页面 */
  --h-nav:       64px;
  --focus-ring:  0 0 0 3px rgba(42, 68, 216, .18);
}

/* 深色区块内的 token 覆写：组件类只需换一个前缀变量即可自适应 */
.on-dark {
  --c-surface:      var(--c-dark-2);
  --c-surface-2:    var(--c-dark-3);
  --c-surface-sunk: rgba(255, 255, 255, .045);
  --c-line:         var(--c-dark-line);
  --c-line-strong:  var(--c-dark-line-2);
  --c-ink:          var(--c-on-dark);
  --c-ink-2:        var(--c-on-dark-2);
  --c-ink-3:        var(--c-on-dark-3);
  color: var(--c-ink);
}