/* MapStudio 共享设计 token（EP-UI-1 → 2026-07-12 商业化改版）。
   单一来源：工作台 / 编辑器 / 分享管理页的品牌色、圆角、顶栏、阴影值以本文件为准；
   editor.css 与 manage.css 因无法依赖加载顺序，保留同值 :root 副本并注明「值以 tokens.css 为准」。

   改版口径（对齐 Ant Design v5 语义，品牌橙收敛到 Ant orange 阶梯）：
   - 主色 #fa8c16（orange-6，全矩阵唯一主橙）；hover 取 orange-5、active 取 orange-7，
     浅底 orange-1 / 边框 orange-3——品牌色只出现在「主操作、选中态、品牌标识」三类位置；
   - 文本用中性 alpha 阶梯（.88/.65/.45/.25），不再用带蓝调的灰；
   - 边框双层：--border(#d9d9d9 控件描边) / --line(#f0f0f0 分隔与卡片描边)；
   - 布局底 #f5f5f5 平铺，容器纯白；圆角 6/8；阴影用 Ant 卡片微影。 */

:root {
  /* 品牌色（Ant orange 阶梯） */
  --brand: #fa8c16;            /* orange-6 主色 */
  --brand-hover: #ffa940;      /* orange-5 主按钮 hover */
  --brand-dark: #d46b08;       /* orange-7 active / 链接与强调文字 */
  --brand-rgb: 250, 140, 22;
  --brand-light: #ffc069;      /* orange-4 */
  --brand-soft: #fff7e6;       /* orange-1 选中浅底 */
  --brand-soft-solid: #fff7e6;
  --brand-soft-strong: #ffe7ba; /* orange-2 浅底 hover 加深 */
  --brand-tint: #fffbf5;        /* 极浅橙底（横幅兜底，慎用） */
  --brand-line: #ffd591;        /* orange-3 橙系边框 */
  --brand-heavy: #ad4e00;       /* orange-8 ★ 白底小字橙文本专用（对比度 ≥4.5:1，
                                   视觉系统 v2 §可达性：#fa8c16 不得作文字色） */

  /* ★ 承载白字的实心按钮底（spec 20260803-free-tools-ui-audit，用户裁决 2026-08-03）。
     此前主按钮是 #fff on #fa8c16 = 2.38:1，不到 AA(4.5:1) 的一半。
     这不是本仓独有——Ant 蓝 4.10:1、Bootstrap 5 蓝 4.50:1 都在压线附近——但既然能修就修。
     本组**只用于白字实心按钮**；图标色、选中态浅底仍用 --brand / --brand-soft，别混用。

     hover 反 Ant 惯例地「加深」而非「变浅」：调色板里比 orange-8 更浅的 orange-7(#d46b08)
     白字只有 3.56:1，一 hover 就跌破 AA。深色按钮加深 = 按下感，语义上也自洽。

     回退：把下面三行的值改回 --brand / --brand-hover / --brand-dark 即可整体还原。 */
  --brand-action: #ad4e00;         /* = orange-8，白字 5.43:1  ✓ AA */
  --brand-action-hover: #873800;   /* orange-9，白字 8.09:1   ✓ */
  --brand-action-active: #612500;  /* orange-10，白字 11.84:1 ✓ */

  /* 文本与结构（Ant 中性色） */
  --ink: rgba(0, 0, 0, 0.88);
  --ink-secondary: rgba(0, 0, 0, 0.65);
  --muted: rgba(0, 0, 0, 0.45);
  --ink-disabled: rgba(0, 0, 0, 0.25);
  --border: #d9d9d9;           /* 控件描边 */
  --line: #f0f0f0;             /* 分隔线 / 卡片描边 */
  --surface: #ffffff;
  --surface-soft: #fafafa;     /* 填充底（表头 / 次级块） */
  --layout-bg: #f5f5f5;        /* 页面布局底 */

  /* 功能色（Ant 语义色：6 号主色 / 7 号 dark=文字 / 1 号 bg / 3 号 line） */
  --success: #52c41a;
  --success-dark: #389e0d;
  --success-bg: #f6ffed;
  --success-line: #b7eb8f;
  --danger: #ff4d4f;
  --danger-dark: #cf1322;
  --danger-bg: #fff2f0;
  --danger-line: #ffccc7;
  --warning: #faad14;
  --warning-dark: #d48806;
  --warning-bg: #fffbe6;
  --warning-line: #ffe58f;
  --info: #1677ff;              /* blue-6（v2 §5.5 ★） */
  --info-bg: #e6f4ff;           /* blue-1 */
  --info-line: #91caff;         /* blue-3 */

  /* 可视化分类色（viz 组·扩展按 dataviz 方法论验证后入组） */
  --viz-4: #722ed1;             /* 紫（ml 链 --clr-purple 唯一来源） */
  /* 数据店面分布图（datahub）序列色。2026-07-30 由青绿改品牌橙同色系纵深，
     页面配色收敛为单色橙；唯一消费者是 datahub，本组取代了原先的青绿三项。
     --viz-map 饱和度高，只作填充/图标，白底小字一律用 --viz-map-strong。 */
  --viz-map: #d98412;           /* 序列主色：进度条 / 业态构成条 / 图标 */
  --viz-map-strong: #ad4e00;    /* = --brand-heavy，白底 5.43:1 达 AA */
  --viz-map-soft: #fff7e6;      /* = --brand-soft（orange-1）浅底 */
  --viz-map-line: #ffd591;      /* = --brand-line（orange-3）橙系描边 */
  --viz-map-null: #f0f0f0;      /* = --line，分布图无数据态填充与图例色块 */

  /* 出图 chrome 调色板（spec 20260804-export-studio-ui-remediation E-21）。
     ★ 这一组不是应用界面色，是**出图产物**上标题带 / 页脚 / 图例 / 封面槽位的
     配色，权威定义在服务端 `exporting/layouts.py` 的 `.esx-*` CSS 里。出图工作室
     的预览要做到所见即所得就必须用同一批值，故在此登记为具名令牌——改这里
     必须同步改 layouts.py，`test_export_chrome_palette_matches_server` 会对拍。
     与 --viz-map* 同理：消费者单一、语义独立，不参与常规界面配色。 */
  --export-ink: #1c2634;         /* 标题主文字 */
  --export-ink-2: #3d4656;       /* 封面副标题 */
  --export-muted: #5a6677;       /* 页脚 / 图例分组 / 位置标签 */
  --export-line: #e3e8ef;        /* 标题带下边线 / 位置标签描边 */
  --export-line-soft: #eef2f7;   /* 页脚上边线 */
  --export-cover-line: #d8c39a;  /* 小红书封面标题卡描边 */

  /* 圆角阶梯（Ant：内嵌小件 4 / 控件 6 / 卡片 8 / 弹层 12 / 药丸） */
  --radius-xs: 4px;             /* 内嵌小件圆角（2026 规范 v1.1 §3，02 §7 第 0 步补） */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;         /* v2 §5.5 ★ 药丸（tab 计数、圆形收纳钮） */

  /* 控件高度 */
  --control-h: 32px;
  --control-h-sm: 28px;         /* 紧凑控件（仅侧栏面板/行内微输入，02 §7 第 0 步补） */
  --control-h-lg: 40px;

  /* 字阶：内容页面仍用 20 / 16 / 14 / 13 / 12 五级；
     display 仅用于门户 Hero 等品牌主视觉，并随视口在 28–36px 间响应。 */
  --fs-display: clamp(28px, 2.25vw, 36px);
  --fs-h1: 20px;
  --fs-h2: 16px;
  --fs-h3: 14px;
  --fs-body: 14px;
  --fs-body-sm: 13px;           /* 五档中的 13px：密集面板 / 辅助正文（原缺变量，
                                   工具工作台只能写死 .8rem~.84rem 越阶，故补） */
  --fs-caption: 12px;
  /* 展示型数字与空态大图标：仪表数值、hero 数字这类非正文元素不吃 12–20 五档，
     取 8pt 网格上的整值。与 --fs-display 分工——后者是门户品牌主视觉且随视口伸缩，
     这两档是固定值，用在工作台内部的数值呈现上。 */
  --fs-metric: 24px;
  --fs-metric-lg: 32px;
  /* 门户扩档两枚（spec 20260812-enterprise-landing-navigation-polish PRD §6.2，
     rev2 评审提案，用户确认实施 2026-08-12）：企业门户 Hero 主标题与分区 H2 专用，
     仅 site/landing.css 消费，不影响工作台字阶五档。配套行高 hero 1.22 / H2 1.3，
     CJK 不做负字距；rev1 的 44–68px/1.08 行高方案已被设计评审降级（会切字）。 */
  --fs-display-hero: clamp(32px, 3.4vw, 44px);
  --fs-h2-portal: clamp(24px, 2.2vw, 32px);

  /* 8pt 间距网格（v2 §5.5 ★） */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* 顶栏。★ --topbar 深色仅限页脚等**非导航**深色块（如 landing.css 的
     .landing-footer）——深色顶导已被用户裁决否决（2026-07-26，02-设计规范 §
     「顶导统一为白底轻形态」）。任何导航/工作态顶栏都不得消费它。 */
  --topbar: #171e2b;
  --topbar-height: 56px;        /* 门户顶导（02 §8.1「禁止顶导高度偏离 56px」） */
  --canvas-topbar-h: 48px;      /* 编辑器 / 出图工作室的画布顶栏，是画布内构件不是第二条导航（02 §4、§8.1） */

  /* z-index 七层封顶（2026 规范 v1.1 §4，02 §7 第 0 步补；同层顺序靠 DOM 顺序） */
  --z-map: 100;                 /* 地图控件 */
  --z-dock: 200;                /* 停靠面板（图层） */
  --z-drawer: 300;              /* 右侧抽屉 */
  --z-topbar: 400;              /* 顶栏 + 下拉 */
  --z-modal: 500;               /* 弹窗遮罩/弹窗 */
  --z-toast: 600;               /* toast */
  --z-tour: 700;                /* 新手引导蒙层 */

  /* 弹窗宽度四档（12-弹窗总则 §2：确认 400 / 表单 480 / 复合 640 / 工作区 840） */
  --modal-w-xs: 400px;
  --modal-w-sm: 480px;
  --modal-w-md: 640px;
  --modal-w-lg: 840px;

  /* 阴影与焦点（Ant 卡片微影 + 悬浮影） */
  --shadow-sm:
    0 1px 2px rgba(0, 0, 0, 0.03),
    0 1px 6px -1px rgba(0, 0, 0, 0.02),
    0 2px 4px rgba(0, 0, 0, 0.02);
  --shadow-md:
    0 6px 16px 0 rgba(0, 0, 0, 0.08),
    0 3px 6px -4px rgba(0, 0, 0, 0.12),
    0 9px 28px 8px rgba(0, 0, 0, 0.05);
  /* AntD v5 细分阴影（spec 20260719 数据域收口）：
     btn = 默认钮 2px 按压底影；pop = 浮层三层；card-hover = hoverable 卡片升起 */
  --shadow-btn: 0 2px 0 rgba(0, 0, 0, 0.02);
  --shadow-btn-primary: 0 2px 0 rgba(250, 140, 22, 0.1);
  --shadow-pop:
    0 6px 16px 0 rgba(0, 0, 0, 0.08),
    0 3px 6px -4px rgba(0, 0, 0, 0.12),
    0 9px 28px 8px rgba(0, 0, 0, 0.05);
  --shadow-card-hover:
    0 1px 2px -2px rgba(0, 0, 0, 0.16),
    0 3px 6px 0 rgba(0, 0, 0, 0.12),
    0 5px 12px 4px rgba(0, 0, 0, 0.09);
  --focus-ring: 0 0 0 2px rgba(250, 140, 22, 0.2);

  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Microsoft YaHei", sans-serif;
}

/* ── 出图主题 token（spec 20260804-export-templates-content-ops-upgrade FR-4）──
   ★ 本组是服务端 `exporting/layouts.py::EXPORT_THEMES` 的**同值副本**：出图
   工作室预览（.es-page[data-theme=…]）与右栏主题选择器的缩略色卡
   （.es-theme-option[data-theme-key=…]）共用。逐键命名规则：Python 键
   snake_case → `--esx-` + kebab-case。改任何一边必须同步另一边，
   `test_export_theme_tokens_match_preview_css` 逐键对拍锁死。
   与上面 --export-* 一样属出图产物配色，不参与常规界面配色。 */

/* theme: clean（缺省，与主题维度引入前逐值一致） */
.es-page,
.es-theme-option[data-theme-key="clean"] {
  --esx-page-bg: #ffffff;
  --esx-ink: #1c2634;
  --esx-ink-2: #3d4656;
  --esx-muted: #5a6677;
  --esx-line: #e3e8ef;
  --esx-band-bg: rgba(255,255,255,.94);
  --esx-band-border: 1px solid #e3e8ef;
  --esx-overlay-bg: rgba(255,255,255,.92);
  --esx-overlay-border: 1px solid #d8c39a;
  --esx-card-bg: rgba(255,255,255,.94);
  --esx-card-solid: #ffffff;
  --esx-panel-bg: #f7f9fc;
  --esx-footer-bg: rgba(255,255,255,.92);
  --esx-footer-border: 1px solid #eef2f7;
  --esx-accent: #fa8c16;
  --esx-accent-ink: #ffffff;
  --esx-title-outline: #1c2634;
}

/* theme: kraft（暖纸手账：牛皮纸底 + 虚线描边 + 棕色系） */
.es-page[data-theme="kraft"],
.es-theme-option[data-theme-key="kraft"] {
  --esx-page-bg: #f6edd9;
  --esx-ink: #4a3a26;
  --esx-ink-2: #5c4a33;
  --esx-muted: #8a5a2b;
  --esx-line: #d8c39a;
  --esx-band-bg: rgba(255,253,246,.95);
  --esx-band-border: 2px dashed #c9a86a;
  --esx-overlay-bg: #fffdf6;
  --esx-overlay-border: 2px dashed #c9a86a;
  --esx-card-bg: rgba(255,253,246,.95);
  --esx-card-solid: #fffdf6;
  --esx-panel-bg: #f1e6cf;
  --esx-footer-bg: rgba(255,253,246,.94);
  --esx-footer-border: 2px dashed #e0cfa6;
  --esx-accent: #8a5a2b;
  --esx-accent-ink: #ffffff;
  --esx-title-outline: #4a3a26;
}

/* theme: dark_editorial（深色杂志：墨蓝底 + 金线点缀 + 高饱和橙） */
.es-page[data-theme="dark_editorial"],
.es-theme-option[data-theme-key="dark_editorial"] {
  --esx-page-bg: #10161f;
  --esx-ink: #f2f0ea;
  --esx-ink-2: #c9d2df;
  --esx-muted: #8a94a3;
  --esx-line: #2a3648;
  --esx-band-bg: rgba(16,22,31,.94);
  --esx-band-border: 1px solid #c9a86a;
  --esx-overlay-bg: rgba(16,22,31,.88);
  --esx-overlay-border: 1px solid #c9a86a;
  --esx-card-bg: rgba(16,22,31,.9);
  --esx-card-solid: #141c28;
  --esx-panel-bg: #1a2230;
  --esx-footer-bg: rgba(16,22,31,.92);
  --esx-footer-border: 1px solid #2a3648;
  --esx-accent: #ff9a3d;
  --esx-accent-ink: #10161f;
  --esx-title-outline: #000000;
}

/* EP-UI-13：主按钮 / 次按钮统一类名（工作台 .button-* 与编辑器 .primary-button 同源）。
   Ant 口径：默认钮白底灰描边，hover 转主色描边+文字；主钮平面无投影。 */
.button,
.ms-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--control-h);
  padding: 0 15px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font: inherit;
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink);
  background: var(--surface);
  text-decoration: none;
  cursor: pointer;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

/* 2026 规范 v1.1 §5 裁决（02 §7 第 0 步）：次级控件 hover 只做中性变化——
   品牌色只出现在主按钮与选中态，终结「全场 hover 发橙」（诊断 12） */
.button:hover,
.ms-button:hover {
  color: var(--ink);
  border-color: var(--border);
  background: var(--surface-soft);
}

.button-primary,
.primary-button,
.ms-button-primary {
  color: #fff;
  background: var(--brand);
  border-color: var(--brand);
}

.button-primary:hover,
.primary-button:hover,
.ms-button-primary:hover {
  color: #fff;
  background: var(--brand-hover);
  border-color: var(--brand-hover);
}

.button-primary:active,
.primary-button:active,
.ms-button-primary:active {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
}

.button-secondary,
.secondary-button,
.ms-button-secondary {
  color: var(--ink);
  background: var(--surface);
  border-color: var(--border);
}

.button-secondary:hover,
.secondary-button:hover,
.ms-button-secondary:hover {
  color: var(--ink);
  border-color: var(--border);
  background: var(--surface-soft);
}

.button-accent,
.ms-button-accent {
  color: var(--brand-dark);
  background: var(--brand-soft);
  border-color: var(--brand-line);
}

/* EP-UI-13：.eyebrow 语义统一（小标签 / 分区眉题）——去营销化：普通小字，不再全大写加宽 */
.eyebrow {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}

/* T-M2-03（spec 20260724-mapstudio-ui-interaction-optimization，PRD D7）：
   开关组件参考实现——「设置开/关」语义统一用 .ms-switch（药丸开关）；
   「多选列表」语义保留原生 checkbox。底层仍是 <input type="checkbox">，
   只换皮不改语义/序列化；与 ml 侧 .dtb-switch（dtb-settings-tabs.css）同形态，
   本类是 tokens 体系下的正式单源。 */
.ms-switch {
  position: relative;
  width: 28px;
  height: 16px;
  flex: none;
  margin: 0;
  border: 0;
  border-radius: 999px;
  outline: 0;
  appearance: none;
  background: rgba(0, 0, 0, 0.16);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.ms-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
  transition: transform 0.2s ease;
}

.ms-switch:checked {
  background: var(--brand);
}

.ms-switch:checked::after {
  transform: translateX(12px);
}

.ms-switch:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.ms-switch:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}