/*
 * 主题 CSS 变量 —— 对齐 src/theme/tokens.js（单一事实来源）的 CSS 形态。
 *
 * 组件 <style> 一律引用 var(--drama-*)，本文件是允许出现裸色值的唯一处（token 定义本身）。
 * 默认 :root = 亮色；[data-theme="dark"] 整体换肤，组件无需改动。换品牌 = 加一组 [data-theme]。
 *
 * 经 package.json exports "./theme.css" 显式暴露，调用方 `import '@drama/ui/theme.css'`。
 */

:root {
  /* 原生控件(日期选择面板、滚动条、下拉箭头)由浏览器绘制,只认这一个属性 —— 不声明,
     暗色后台里点开一个 datetime-local 就是一块白面板。 */
  color-scheme: light;

  /* color (light) */
  --drama-color-bg: #f5f5f8;
  --drama-color-surface: #ffffff;
  --drama-color-surface-alt: #ececf3;
  --drama-color-border: #d9d9e3;
  --drama-color-border-strong: #b4b4c4;
  --drama-color-text: #16161d;
  --drama-color-text-muted: #5b5b6b;
  --drama-color-primary: #111111;
  --drama-color-primary-hover: #333333;
  --drama-color-on-primary: #ffffff;
  --drama-color-danger: #dc2f3c;
  --drama-color-danger-hover: #c01f2c;
  --drama-color-success: #1f9d55;
  --drama-color-warning: #b7791f;
  --drama-color-info: #2b6cb0;
  --drama-color-overlay: rgba(22, 22, 29, 0.45);

  /* space */
  --drama-space-xs: 4px;
  --drama-space-sm: 8px;
  --drama-space-md: 12px;
  --drama-space-lg: 16px;
  --drama-space-xl: 24px;
  --drama-space-2xl: 32px;

  /*
   * control —— 表单控件的高度刻度。Input / Select / SegmentedControl / Button 共用这一把尺。
   * 各控件按自己的 padding 推高度,横排就是三种高度(实测 28 / 32 / 34),筛选条永远对不齐。
   */
  --drama-control-height-sm: 32px;
  --drama-control-height-md: 40px;
  --drama-control-height-lg: 48px;

  /* radius */
  --drama-radius-sm: 8px;
  --drama-radius-md: 12px;
  --drama-radius-lg: 16px;
  --drama-radius-full: 9999px;

  /* font */
  --drama-font-family-heading: 'Space Grotesk', system-ui, sans-serif;
  --drama-font-family-body: 'Inter', system-ui, sans-serif;
  /* 表格里的数字要能竖着比 —— 比例字体下 1 比 8 窄，列就对不齐。 */
  --drama-font-family-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
  --drama-font-size-xs: 12px;
  --drama-font-size-sm: 14px;
  --drama-font-size-md: 16px;
  --drama-font-size-lg: 20px;
  --drama-font-size-xl: 28px;
  --drama-line-height-tight: 1.25;
  --drama-line-height-normal: 1.5;
  --drama-font-weight-normal: 400;
  --drama-font-weight-medium: 500;
  --drama-font-weight-bold: 700;

  /* shadow */
  --drama-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.12);
  --drama-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.18);
  --drama-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.28);
}

[data-theme='dark'] {
  color-scheme: dark;
  --drama-color-bg: #0d0d12;
  --drama-color-surface: #16161f;
  --drama-color-surface-alt: #20202c;
  --drama-color-border: #2c2c3a;
  --drama-color-border-strong: #45455a;
  --drama-color-text: #f2f2f7;
  --drama-color-text-muted: #9a9ab0;
  --drama-color-primary: #7c5dff;
  --drama-color-primary-hover: #9277ff;
  --drama-color-on-primary: #ffffff;
  --drama-color-danger: #ff5b66;
  --drama-color-danger-hover: #ff7681;
  --drama-color-success: #34d27b;
  --drama-color-warning: #eab24a;
  --drama-color-info: #5aa9ff;
  --drama-color-overlay: rgba(0, 0, 0, 0.6);
}

[data-theme='vg-studio'] {
  color-scheme: dark;
  --drama-color-bg: #0b0a08;
  --drama-color-surface: #141210;
  --drama-color-surface-alt: #1b1815;
  --drama-color-border: rgba(235, 211, 166, 0.14);
  --drama-color-border-strong: rgba(235, 211, 166, 0.3);
  --drama-color-text: #f4ecdd;
  --drama-color-text-muted: #c2b295;
  --drama-color-primary: #d3ac63;
  --drama-color-primary-hover: #e6c583;
  --drama-color-on-primary: #1a1409;
  --drama-color-danger: #b95543;
  --drama-color-danger-hover: #d06a56;
  --drama-color-success: #5f9e6a;
  --drama-color-warning: #c9973f;
  --drama-color-info: #5b8aa6;
  --drama-color-overlay: rgba(6, 5, 4, 0.72);
  --drama-font-family-heading: 'Space Grotesk', 'PingFang SC', 'Noto Sans SC', system-ui, sans-serif;
  --drama-font-family-body: 'Inter', 'PingFang SC', 'Noto Sans SC', system-ui, sans-serif;
  --vgs-surface-3: #242019;
  --vgs-line-strong: rgba(235, 211, 166, 0.28);
  --vgs-line-gold: rgba(211, 172, 99, 0.55);
  --vgs-gold-dim: rgba(211, 172, 99, 0.16);
  --vgs-text-faint: #8a7d68;
  --vgs-warning: #c9973f;
  --vgs-danger-dim: rgba(185, 85, 67, 0.14);
  --vgs-space-3xl: 48px;
  --vgs-font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
  --vgs-font-serif: 'Songti SC', 'Noto Serif SC', serif;
  --vgs-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/*
 * vg-studio 的亮色态。**它不是「切到默认的紫色亮色主题」** —— 那是换品牌,不是开灯:同一个后台,
 * 上午是金色暗色、下午变成紫色,人会以为进错了系统。这里换的只有明暗:底色从近黑翻成暖纸白,金色
 * 主色相应压深(#d3ac63 那个亮金放到白底上,当文字和描边都糊得看不清)。
 *
 * `--vgs-*` 这一组必须逐条重给:它们只在 vg-studio 下定义,`:root` 里没有兜底值,漏一条就是
 * 一处 `var(--vgs-…)` 解析成空、边框直接消失。
 */
[data-theme='vg-studio-light'] {
  color-scheme: light;
  --drama-color-bg: #f6f1e7;
  --drama-color-surface: #fffdf8;
  --drama-color-surface-alt: #f0e8d9;
  --drama-color-border: rgba(90, 66, 24, 0.16);
  --drama-color-border-strong: rgba(90, 66, 24, 0.34);
  --drama-color-text: #1f1a12;
  --drama-color-text-muted: #6b6050;
  --drama-color-primary: #8a6520;
  --drama-color-primary-hover: #6f5019;
  --drama-color-on-primary: #fff9ec;
  --drama-color-danger: #a3372a;
  --drama-color-danger-hover: #8a2c21;
  --drama-color-success: #2f7a45;
  --drama-color-warning: #8a6112;
  --drama-color-info: #2b6382;
  --drama-color-overlay: rgba(31, 26, 18, 0.35);
  --drama-font-family-heading: 'Space Grotesk', 'PingFang SC', 'Noto Sans SC', system-ui, sans-serif;
  --drama-font-family-body: 'Inter', 'PingFang SC', 'Noto Sans SC', system-ui, sans-serif;
  --vgs-surface-3: #e8dfcd;
  --vgs-line-strong: rgba(90, 66, 24, 0.3);
  --vgs-line-gold: rgba(138, 101, 32, 0.45);
  --vgs-gold-dim: rgba(138, 101, 32, 0.12);
  --vgs-text-faint: #8a8073;
  --vgs-warning: #8a6112;
  --vgs-danger-dim: rgba(163, 55, 42, 0.1);
  --vgs-space-3xl: 48px;
  --vgs-font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
  --vgs-font-serif: 'Songti SC', 'Noto Serif SC', serif;
  --vgs-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

[data-theme='voko-cinema-light'] {
  color-scheme: light;
  --drama-color-bg: #ffffff;
  --drama-color-surface: #ffffff;
  --drama-color-surface-alt: #f5f5f5;
  --drama-color-border: #e5e5e5;
  --drama-color-border-strong: #b8b8b8;
  --drama-color-text: #111111;
  --drama-color-text-muted: #666666;
  --drama-color-primary: #111111;
  --drama-color-primary-hover: #333333;
  --drama-color-on-primary: #ffffff;
  --drama-color-danger: #b42318;
  --drama-color-danger-hover: #8f1c13;
  --drama-color-success: #257942;
  --drama-color-warning: #8a6112;
  --drama-color-info: #245e86;
  --drama-color-overlay: rgba(17, 17, 17, 0.42);
  --drama-font-family-heading: 'Space Grotesk', 'PingFang SC', 'Noto Sans SC', system-ui, sans-serif;
  --drama-font-family-body: 'Inter', 'PingFang SC', 'Noto Sans SC', system-ui, sans-serif;
  --vgs-surface-3: #eeeeee;
  --vgs-line-strong: #c7c7c7;
  --vgs-line-gold: #777777;
  --vgs-gold-dim: rgba(17, 17, 17, 0.08);
  --vgs-text-faint: #8a8a8a;
  --vgs-warning: #8a6112;
  --vgs-danger-dim: rgba(180, 35, 24, 0.08);
  --vgs-space-3xl: 48px;
  --vgs-font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
  --vgs-font-serif: 'Songti SC', 'Noto Serif SC', serif;
  --vgs-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}