/* ============================================================
   Meridian Design System — 强调色预设 presets.css v1.2.0
   ------------------------------------------------------------
   用法：
     1. 先引 meridian.css，再引本文件（覆盖顺序不能颠倒）：
          <link rel="stylesheet" href="meridian.css">
          <link rel="stylesheet" href="presets.css">
     2. 在 <html> 上加 data-accent 属性即可整站换品牌色：
          <html lang="zh-CN" data-accent="indigo">
        可选值：terracotta（默认，无需覆盖）| clay | indigo | forest | plum | steel
     3. 可选画布：html 加 data-canvas="cream" 启用「奶油画布」纸感底
        （来源 Project-012 个人品牌网站；与 clay 预设同源最佳拍档，
        也可与任意强调色搭配；深色下自动切换暖黑画布）。
     4. 深色模式照常设 data-theme="dark"，本文件按
        html[data-theme="dark"][data-accent="…"] 叠加深色取阶
        （选择器特异性高于 meridian.css 的 [data-theme="dark"] 段）。

   取阶规则（色板见 colors.json accent_presets / canvas_presets，契约见 contrast_contract）：
     浅色：accent=500 · fill=600(白字≥4.5:1) · fill-hover=700 ·
           text=700(链接) · soft=100 · ink=700 · focus-ring=600
     深色：accent=400（装饰性场合提亮） ·
           fill=600(白字，恒用 600 阶——500 阶配暗字在多数色相 <4.5:1，契约优先) ·
           fill-hover=700 · text=300 · soft=800阶与surface的45%混合 ·
           ink=300 · focus-ring=400
   可选展示字体：奶油画布的原配是 Space Grotesk（OFL，已本地化
   assets/fonts/space-grotesk-*.woff2）；canvas 段已定义 --font-display，
   大标题类（.t-display-*）可自行加 font-family: var(--font-display)。
   ============================================================ */

/* ---------- 可选展示字体（奶油画布原配，Space Grotesk · OFL） ---------- */
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url('assets/fonts/space-grotesk-500.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url('assets/fonts/space-grotesk-700.woff2') format('woff2'); }
html[data-canvas="cream"] { --font-display: 'Space Grotesk', var(--font-sans); }

/* ---------- 浅色：html[data-accent] ---------- */

html[data-accent="clay"] {
  --accent: #D9502A;
  --accent-fill: #B8401E;
  --accent-fill-hover: #963315;
  --accent-text: #963315;
  --accent-soft: #F6DCCE;
  --accent-ink: #963315;
  --focus-ring: #B8401E;
}

html[data-accent="indigo"] {
  --accent: #6366F1;
  --accent-fill: #4F46E5;
  --accent-fill-hover: #4338CA;
  --accent-text: #4338CA;
  --accent-soft: #E0E7FF;
  --accent-ink: #4338CA;
  --focus-ring: #4F46E5;
}

html[data-accent="forest"] {
  --accent: #3B9068;
  --accent-fill: #2F7D5B;
  --accent-fill-hover: #27654A;
  --accent-text: #27654A;
  --accent-soft: #D9EDE3;
  --accent-ink: #27654A;
  --focus-ring: #2F7D5B;
}

html[data-accent="plum"] {
  --accent: #B83E79;
  --accent-fill: #A1295F;
  --accent-fill-hover: #821F4D;
  --accent-text: #821F4D;
  --accent-soft: #F6DCE9;
  --accent-ink: #821F4D;
  --focus-ring: #A1295F;
}

html[data-accent="steel"] {
  --accent: #64748B;
  --accent-fill: #475569;
  --accent-fill-hover: #334155;
  --accent-text: #334155;
  --accent-soft: #F1F5F9;
  --accent-ink: #334155;
  --focus-ring: #475569;
}

/* ---------- 深色叠加：html[data-theme="dark"][data-accent] ---------- */

html[data-theme="dark"][data-accent="clay"] {
  --accent: #E06A42;
  --accent-fill: #B8401E;
  --accent-fill-hover: #963315;
  --accent-text: #E98F6E;
  --accent-soft: color-mix(in srgb, #782911 45%, var(--surface));
  --accent-ink: #E98F6E;
  --focus-ring: #E06A42;
}

html[data-theme="dark"][data-accent="indigo"] {
  --accent: #818CF8;
  --accent-fill: #4F46E5;
  --accent-fill-hover: #4338CA;
  --accent-text: #A5B4FC;
  --accent-soft: color-mix(in srgb, #3730A3 45%, var(--surface));
  --accent-ink: #A5B4FC;
  --focus-ring: #818CF8;
}

html[data-theme="dark"][data-accent="forest"] {
  --accent: #57A883;
  --accent-fill: #2F7D5B;
  --accent-fill-hover: #27654A;
  --accent-text: #85C4A6;
  --accent-soft: color-mix(in srgb, #1F4F3A 45%, var(--surface));
  --accent-ink: #85C4A6;
  --focus-ring: #57A883;
}

html[data-theme="dark"][data-accent="plum"] {
  --accent: #CC5C93;
  --accent-fill: #A1295F;
  --accent-fill-hover: #821F4D;
  --accent-text: #DE8AB4;
  --accent-soft: color-mix(in srgb, #67193D 45%, var(--surface));
  --accent-ink: #DE8AB4;
  --focus-ring: #CC5C93;
}

html[data-theme="dark"][data-accent="steel"] {
  --accent: #94A3B8;
  --accent-fill: #475569;
  --accent-fill-hover: #334155;
  --accent-text: #CBD5E1;
  --accent-soft: color-mix(in srgb, #1E293B 45%, var(--surface));
  --accent-ink: #CBD5E1;
  --focus-ring: #94A3B8;
}

/* ---------- 可选画布：html[data-canvas="cream"]（奶油画布 · 来源 Project-012） ---------- */
html[data-canvas="cream"]:not([data-theme="dark"]) {
  --bg: #F6F1E7;
  --bg-subtle: #EFE8D8;
  --surface: #FBF8F1;
  --surface-raised: #FBF8F1;
  --surface-hover: #EFE8D8;
  --ink: #17140F;
  --ink-2: #4C463B;
  --ink-3: #857D6E;
  --inverse-ink: #F6F1E7;
  --line: #E2DAC8;
  --line-strong: #D2C7B0;
}
html[data-theme="dark"][data-canvas="cream"] {
  --bg: #171310;
  --bg-subtle: #1C1813;
  --surface: #221E18;
  --surface-raised: #2A251E;
  --surface-hover: #2F2A22;
  --line: #3A342A;
  --line-strong: #4E463A;
}