/*
 * chenci-shared / tokens.css
 * 统一设计 token（Claude 风格）— chenci.de 系列所有项目共享。
 * 用自定义属性定义全系观感；项目直接 `@import` 或内联即可获得统一样式。
 */

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

  /* ── 颜色（暖中性底 + 单强调色）────────────────────────── */
  --cc-bg: #FAF9F6;         /* 暖纸色（唯一卡片/面板表面） */
  --cc-bg-subtle: #F4F2ED;  /* 暖次级表面：页面底 / 交替面板 */
  --cc-bg-muted: #ECEAE3;   /* 暖 hover / 分段控件轨道底 */
  --cc-border: #E4E1D9;     /* 静息边框 — 暖、柔和，绝不偏蓝灰 */
  --cc-border-strong: #D3CFC4; /* hover / 输入边框，更暖更深 */

  --cc-text: #1B1B19;       /* 暖近黑墨色（非蓝黑） */
  --cc-text-secondary: #57534B; /* 次级文字 / 描述（对 bg 约 6.6:1，AA） */
  --cc-text-tertiary: #6D675D;  /* 弱文字 / 注释（仅低强调） */

  --cc-accent: #B8542F;     /* 唯一强调色 — 陶土/黏土（Claude 签名色） */
  --cc-accent-hover: #9E4126;   /* 更深的黏土，供 hover/pressed */
  --cc-accent-soft: #F7E9E0;    /* 很浅的暖调 — 焦点环 / 选中填充 / 图标井 */
  --cc-on-accent: #FFFFFF;

  --cc-success: #2E7A5A;    /* 柔和森林绿，贴合暖色系（浅绿底上 ≈4.61:1，达 AA） */
  --cc-danger: #B7392C;     /* 柔和砖红，仍是清晰错误 */

  /* ── 圆角 ─────────────────────────────────────────────── */
  --cc-radius-sm: 8px;
  --cc-radius-md: 12px;
  --cc-radius-lg: 20px;
  --cc-radius-full: 999px;  /* 分段控件 / 小徽章胶囊 */

  /* ── 间距（8 基准，保持不变）────────────────────────────── */
  --cc-space-1: 4px;
  --cc-space-2: 8px;
  --cc-space-3: 12px;
  --cc-space-4: 16px;
  --cc-space-5: 24px;
  --cc-space-6: 32px;
  --cc-space-7: 48px;
  --cc-space-8: 64px;

  /* ── 字号层级 ─────────────────────────────────────────── */
  --cc-fs-xs: 12px;
  --cc-fs-sm: 14px;
  --cc-fs-base: 16px;
  --cc-fs-md: 18px;
  --cc-fs-lg: 24px;
  --cc-fs-xl: 32px;
  --cc-fs-2xl: 44px;
  --cc-fs-display: 56px;    /* 宽屏 hero 标题 */

  --cc-fw-regular: 400;
  --cc-fw-medium: 500;
  --cc-fw-semibold: 600;
  --cc-fw-bold: 700;

  --cc-lh-tight: 1.2;
  --cc-lh-heading: 1.3;
  --cc-lh-base: 1.6;
  --cc-lh-lead: 1.5;

  --cc-ls-tight: -0.025em;
  --cc-ls-wide: 0.04em;

  /* ── 阴影（暖、柔和、极轻）────────────────────────────── */
  --cc-shadow-sm: 0 1px 3px rgba(46, 35, 27, 0.06);
  --cc-shadow-md: 0 6px 16px -4px rgba(46, 35, 27, 0.10);
  --cc-shadow-lg: 0 16px 32px -8px rgba(46, 35, 27, 0.12);

  /* ── 焦点环 ───────────────────────────────────────────── */
  --cc-ring: 3px;
  --cc-ring-offset: 2px;
}

::selection { background: var(--cc-accent-soft); }
/* ── 分类主题色（低饱和，贴合暖色系）────────────────────────── */
:root {
  --cat-identity: #7D5E30; --cat-identity-soft: rgba(125,94,48,.14);
  --cat-text:     #3F6B4B; --cat-text-soft:     rgba(63,107,75,.14);
  --cat-dev:      #3F5C89; --cat-dev-soft:      rgba(63,92,137,.14);
  --cat-finance:  #276B4E; --cat-finance-soft:  rgba(39,107,78,.14);
  --cat-date:     #934A5E; --cat-date-soft:     rgba(147,74,94,.14);
  --cat-image:    #6E4E87; --cat-image-soft:    rgba(110,78,135,.14);
}

/* ── 暗色模式（手动 data-theme 或系统跟随）──────────────────── */
:root[data-theme="dark"] {
  --cc-bg: #14120F;
  --cc-bg-subtle: #1C1915;
  --cc-bg-muted: #26221C;
  --cc-border: #2E2A24;
  --cc-border-strong: #3E382F;
  --cc-text: #EDE9E1;
  --cc-text-secondary: #A9A196;   /* AA on #14120F ≈ 7.2:1 */
  --cc-text-tertiary: #8A8378;    /* AA ≈ 5.1:1 */
  --cc-accent: #D97745;           /* text on #14120F ≈ 6.7:1 */
  --cc-accent-hover: #E89464;
  --cc-accent-soft: rgba(217,119,69,.16);
  --cc-on-accent: #1B130D;        /* dark text on brighter accent button */
  --cc-success: #4FA57C;
  --cc-danger: #E06B5A;
  --cc-shadow-sm: 0 1px 3px rgba(0,0,0,.5);
  --cc-shadow-md: 0 6px 16px -4px rgba(0,0,0,.5);
  --cc-shadow-lg: 0 16px 32px -8px rgba(0,0,0,.55);
  --cat-identity: #C9A45E; --cat-identity-soft: rgba(201,164,94,.16);
  --cat-text:     #8FBF9E; --cat-text-soft:     rgba(143,191,158,.16);
  --cat-dev:      #89A8D6; --cat-dev-soft:      rgba(137,168,214,.16);
  --cat-finance:  #5FA98A; --cat-finance-soft:  rgba(95,169,138,.16);
  --cat-date:     #D0A0B4; --cat-date-soft:     rgba(208,160,180,.16);
  --cat-image:    #B79AD6; --cat-image-soft:    rgba(183,154,214,.16);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cc-bg: #14120F;
    --cc-bg-subtle: #1C1915;
    --cc-bg-muted: #26221C;
    --cc-border: #2E2A24;
    --cc-border-strong: #3E382F;
    --cc-text: #EDE9E1;
    --cc-text-secondary: #A9A196;
    --cc-text-tertiary: #8A8378;
    --cc-accent: #D97745;
    --cc-accent-hover: #E89464;
    --cc-accent-soft: rgba(217,119,69,.16);
    --cc-on-accent: #1B130D;
    --cc-success: #4FA57C;
    --cc-danger: #E06B5A;
    --cc-shadow-sm: 0 1px 3px rgba(0,0,0,.5);
    --cc-shadow-md: 0 6px 16px -4px rgba(0,0,0,.5);
    --cc-shadow-lg: 0 16px 32px -8px rgba(0,0,0,.55);
    --cat-identity: #C9A45E; --cat-identity-soft: rgba(201,164,94,.16);
    --cat-text:     #8FBF9E; --cat-text-soft:     rgba(143,191,158,.16);
    --cat-dev:      #89A8D6; --cat-dev-soft:      rgba(137,168,214,.16);
    --cat-finance:  #5FA98A; --cat-finance-soft:  rgba(95,169,138,.16);
    --cat-date:     #D0A0B4; --cat-date-soft:     rgba(208,160,180,.16);
    --cat-image:    #B79AD6; --cat-image-soft:    rgba(183,154,214,.16);
  }
}