/* ============================================================================
   LumenX Studio · Theme Tokens (可落地)
   Tasty Sam · 五预设主题系统
   ----------------------------------------------------------------------------
   架构：seed (品牌 DNA) → semantic (语义角色) → component (组件级)
   改 seed 一处 → 整主题随之变化。

   命名 100% 对齐现有 frontend/src/app/globals.css，便于直接并入：
     --color-bg-base / -surface / -elevated / -inset / -input / -hover
     --color-border-default / -subtle
     --color-text-primary / -secondary / -muted
     --color-glass / --color-overlay
     --color-status-{pending,processing,completed,failed,starred}-{fg,border,bg}
     --color-status-starred-solid / --color-on-warm

   新增（现有 globals.css 暂无、Line B 氛围所需，落地时以增量并入）：
     --color-primary / -primary-hover / -accent / -accent-hover / -on-accent
     --halation / --bloom / --grain-op / --glow-primary / --glow-accent
     --font-display (Fraunces)

   演示稿用 :root[data-theme="<id>"] 选择器；落地时映射到现有
   html.<class> 机制（README 注明等价关系）。
   ============================================================================ */

/* ---- 字体（落地时并入 globals.css 的 @import） ---- */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..700;1,9..144,400..600&family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ============================================================================
   主题 1 · atelier-dark · Full Atelier （★ 默认）
   暖石墨底 + teal 主色 + amber 选中/halation。Line B 原生皮肤。
   ============================================================================ */
:root,
:root[data-theme="atelier-dark"] {
  color-scheme: dark;

  /* —— seed：品牌 DNA —— */
  --seed-primary:   #34d8c4;   /* teal */
  --seed-primary-2: #5ee9d6;
  --seed-accent:    #ffa94d;   /* amber，仅选中/星标/halation */
  --seed-accent-2:  #ffbf73;
  --seed-ink:       #f2ede4;   /* 暖白文字 */
  --seed-base:      #0c0b0e;   /* 暖石墨底 */

  /* —— semantic：背景层级 —— */
  --color-bg-base:     #0c0b0e;
  --color-bg-surface:  #131116;
  --color-bg-elevated: #181620;
  --color-bg-inset:    #0a090c;
  --color-bg-input:    rgba(0, 0, 0, 0.28);
  --color-bg-hover:    rgba(255, 255, 255, 0.045);
  --color-glass:       rgba(255, 255, 255, 0.045);
  --color-overlay:     rgba(8, 7, 10, 0.8);

  /* —— semantic：边框 —— */
  --color-border-default: rgba(255, 255, 255, 0.06);
  --color-border-subtle:  rgba(255, 255, 255, 0.03);

  /* —— semantic：文字 —— */
  --color-text-primary:   #f2ede4;
  --color-text-secondary: #a8a2b0;
  --color-text-muted:     #8b8597;

  /* —— semantic：品牌主/强调 —— */
  --color-primary:        var(--seed-primary);
  --color-primary-hover:  var(--seed-primary-2);
  --color-accent:         var(--seed-accent);
  --color-accent-hover:   var(--seed-accent-2);
  --color-on-accent:      #0c0b0e;   /* 暖底文字叠在 amber chip 上 */
  --color-on-warm:        oklch(0.18 0.01 280);

  /* —— semantic：状态色（oklch，沿用 globals.css 写法） —— */
  --color-status-pending-fg:     oklch(0.85 0.13 230);
  --color-status-pending-border: oklch(0.75 0.16 230 / 0.45);
  --color-status-pending-bg:     oklch(0.75 0.16 230 / 0.10);
  --color-status-processing-fg:     oklch(0.88 0.16 80);
  --color-status-processing-border: oklch(0.78 0.18 80 / 0.45);
  --color-status-processing-bg:     oklch(0.78 0.18 80 / 0.10);
  --color-status-completed-fg:     oklch(0.85 0.15 175);  /* teal-leaning done */
  --color-status-completed-border: oklch(0.78 0.16 175 / 0.45);
  --color-status-completed-bg:     oklch(0.78 0.16 175 / 0.10);
  --color-status-failed-fg:     oklch(0.78 0.20 25);
  --color-status-failed-border: oklch(0.68 0.21 25 / 0.45);
  --color-status-failed-bg:     oklch(0.68 0.21 25 / 0.10);
  --color-status-starred-fg:     oklch(0.90 0.15 70);   /* amber star */
  --color-status-starred-border: oklch(0.82 0.16 70 / 0.55);
  --color-status-starred-bg:     oklch(0.82 0.16 70 / 0.18);
  --color-status-starred-solid:  oklch(0.82 0.16 70);

  /* —— 氛围 / 光晕（Line B signature） —— */
  --glow-primary: 0 0 0 1px rgba(52, 216, 196, 0.30), 0 0 24px -6px rgba(52, 216, 196, 0.45);
  --glow-accent:  0 0 0 1px rgba(255, 169, 77, 0.35), 0 0 28px -6px rgba(255, 169, 77, 0.50);
  --halation:     inset 0 0 42px -8px rgba(255, 169, 77, 0.27);
  --bloom:        radial-gradient(60% 50% at 18% 0%, rgba(52, 216, 196, 0.10), transparent 70%),
                  radial-gradient(55% 45% at 88% 100%, rgba(255, 169, 77, 0.08), transparent 70%);
  --grain-op: 0.05;

  /* —— 字体 —— */
  --font-inter:          'Inter', sans-serif;
  --font-jetbrains-mono: 'JetBrains Mono', monospace;
  --font-space-grotesk:  'Space Grotesk', sans-serif;
  --font-display:        'Fraunces', Georgia, serif;   /* Line B 衬线 display */

  /* —— component：派生自上方 semantic —— */
  --card-bg:        var(--color-bg-surface);
  --card-border:    var(--color-border-default);
  --card-radius:    14px;
  --btn-pri-bg:     var(--color-primary);
  --btn-pri-fg:     var(--color-on-accent);
  --btn-pri-glow:   var(--glow-primary);
  --input-bg:       var(--color-bg-input);
  --input-border:   var(--color-border-default);
  --sidebar-bg:     var(--color-bg-inset);
  --logo-filter:    hue-rotate(-64deg) saturate(1.35) brightness(1.08); /* 蓝 PNG → teal */
}

/* ============================================================================
   主题 2 · bridge-dark · Warm Bridge
   暖中性底 + brand 蓝主色 + amber 仅用于选中/星标。原蓝 Logo。
   ============================================================================ */
:root[data-theme="bridge-dark"] {
  color-scheme: dark;

  --seed-primary:   #646cff;   /* brand 蓝 */
  --seed-primary-2: #7d84ff;
  --seed-accent:    #ffa94d;   /* amber 仅选中 */
  --seed-accent-2:  #ffbf73;
  --seed-ink:       #ece9e6;
  --seed-base:      #0a0a0d;

  --color-bg-base:     #0a0a0d;
  --color-bg-surface:  #141318;
  --color-bg-elevated: #1a1820;
  --color-bg-inset:    #060608;
  --color-bg-input:    rgba(0, 0, 0, 0.28);
  --color-bg-hover:    rgba(255, 255, 255, 0.045);
  --color-glass:       rgba(255, 255, 255, 0.045);
  --color-overlay:     rgba(6, 6, 8, 0.8);

  --color-border-default: rgba(255, 255, 255, 0.07);
  --color-border-subtle:  rgba(255, 255, 255, 0.035);

  --color-text-primary:   #ece9e6;
  --color-text-secondary: #a4a0a8;
  --color-text-muted:     #6f6b74;

  --color-primary:       var(--seed-primary);
  --color-primary-hover: var(--seed-primary-2);
  --color-accent:        var(--seed-accent);
  --color-accent-hover:  var(--seed-accent-2);
  --color-on-accent:     #0a0a0d;
  --color-on-warm:       oklch(0.18 0.01 280);

  --color-status-pending-fg:     oklch(0.85 0.13 230);
  --color-status-pending-border: oklch(0.75 0.16 230 / 0.45);
  --color-status-pending-bg:     oklch(0.75 0.16 230 / 0.10);
  --color-status-processing-fg:     oklch(0.88 0.16 80);
  --color-status-processing-border: oklch(0.78 0.18 80 / 0.45);
  --color-status-processing-bg:     oklch(0.78 0.18 80 / 0.10);
  --color-status-completed-fg:     oklch(0.82 0.14 250);  /* blue-leaning done */
  --color-status-completed-border: oklch(0.75 0.16 250 / 0.45);
  --color-status-completed-bg:     oklch(0.75 0.16 250 / 0.10);
  --color-status-failed-fg:     oklch(0.78 0.20 25);
  --color-status-failed-border: oklch(0.68 0.21 25 / 0.45);
  --color-status-failed-bg:     oklch(0.68 0.21 25 / 0.10);
  --color-status-starred-fg:     oklch(0.88 0.15 75);
  --color-status-starred-border: oklch(0.82 0.16 75 / 0.55);
  --color-status-starred-bg:     oklch(0.82 0.16 75 / 0.18);
  --color-status-starred-solid:  oklch(0.82 0.16 75);

  --glow-primary: 0 0 0 1px rgba(100, 108, 255, 0.30), 0 0 24px -6px rgba(100, 108, 255, 0.50);
  --glow-accent:  0 0 0 1px rgba(255, 169, 77, 0.35), 0 0 28px -6px rgba(255, 169, 77, 0.50);
  --halation:     inset 0 0 42px -8px rgba(255, 169, 77, 0.27);
  --bloom:        radial-gradient(60% 50% at 18% 0%, rgba(100, 108, 255, 0.09), transparent 70%),
                  radial-gradient(55% 45% at 88% 100%, rgba(255, 169, 77, 0.08), transparent 70%);
  --grain-op: 0.045;

  --font-inter:          'Inter', sans-serif;
  --font-jetbrains-mono: 'JetBrains Mono', monospace;
  --font-space-grotesk:  'Space Grotesk', sans-serif;
  --font-display:        'Space Grotesk', sans-serif;   /* Warm Bridge 用几何 display */

  --card-bg:      var(--color-bg-surface);
  --card-border:  var(--color-border-default);
  --card-radius:  14px;
  --btn-pri-bg:   var(--color-primary);
  --btn-pri-fg:   #ffffff;
  --btn-pri-glow: var(--glow-primary);
  --input-bg:     var(--color-bg-input);
  --input-border: var(--color-border-default);
  --sidebar-bg:   var(--color-bg-inset);
  --logo-filter:  none;   /* 原蓝 Logo */
}

/* ============================================================================
   主题 3 · brand-dark · Brand-True
   冷黑底 + brand 蓝主色 + hot pink 强调。现有产品基线配色。原蓝 Logo。
   ============================================================================ */
:root[data-theme="brand-dark"] {
  color-scheme: dark;

  --seed-primary:   #646cff;
  --seed-primary-2: #7d84ff;
  --seed-accent:    #ff0080;   /* hot pink */
  --seed-accent-2:  #ff3399;
  --seed-ink:       #ededed;
  --seed-base:      #050508;

  --color-bg-base:     #050508;
  --color-bg-surface:  #101015;
  --color-bg-elevated: #16161c;
  --color-bg-inset:    #000003;
  --color-bg-input:    rgba(0, 0, 0, 0.3);
  --color-bg-hover:    rgba(255, 255, 255, 0.05);
  --color-glass:       rgba(255, 255, 255, 0.05);
  --color-overlay:     rgba(0, 0, 0, 0.8);

  --color-border-default: rgba(255, 255, 255, 0.08);
  --color-border-subtle:  rgba(255, 255, 255, 0.04);

  --color-text-primary:   #ededed;
  --color-text-secondary: #9ca3af;
  --color-text-muted:     #6b7280;

  --color-primary:       var(--seed-primary);
  --color-primary-hover: var(--seed-primary-2);
  --color-accent:        var(--seed-accent);
  --color-accent-hover:  var(--seed-accent-2);
  --color-on-accent:     #0a0a0f;
  --color-on-warm:       oklch(0.18 0.01 280);

  --color-status-pending-fg:     oklch(0.85 0.13 230);
  --color-status-pending-border: oklch(0.75 0.16 230 / 0.45);
  --color-status-pending-bg:     oklch(0.75 0.16 230 / 0.10);
  --color-status-processing-fg:     oklch(0.88 0.16 80);
  --color-status-processing-border: oklch(0.78 0.18 80 / 0.45);
  --color-status-processing-bg:     oklch(0.78 0.18 80 / 0.10);
  --color-status-completed-fg:     oklch(0.88 0.16 155);
  --color-status-completed-border: oklch(0.78 0.18 155 / 0.45);
  --color-status-completed-bg:     oklch(0.78 0.18 155 / 0.10);
  --color-status-failed-fg:     oklch(0.78 0.20 25);
  --color-status-failed-border: oklch(0.68 0.21 25 / 0.45);
  --color-status-failed-bg:     oklch(0.68 0.21 25 / 0.10);
  --color-status-starred-fg:     oklch(0.72 0.21 350);  /* pink star */
  --color-status-starred-border: oklch(0.65 0.22 350 / 0.55);
  --color-status-starred-bg:     oklch(0.65 0.22 350 / 0.18);
  --color-status-starred-solid:  oklch(0.65 0.22 350);

  --glow-primary: 0 0 0 1px rgba(100, 108, 255, 0.30), 0 0 24px -6px rgba(100, 108, 255, 0.50);
  --glow-accent:  0 0 0 1px rgba(255, 0, 128, 0.35), 0 0 26px -6px rgba(255, 0, 128, 0.50);
  --halation:     inset 0 0 42px -8px rgba(255, 0, 128, 0.28);
  --bloom:        radial-gradient(60% 50% at 18% 0%, rgba(100, 108, 255, 0.10), transparent 70%),
                  radial-gradient(55% 45% at 88% 100%, rgba(255, 0, 128, 0.07), transparent 70%);
  --grain-op: 0.04;

  --font-inter:          'Inter', sans-serif;
  --font-jetbrains-mono: 'JetBrains Mono', monospace;
  --font-space-grotesk:  'Space Grotesk', sans-serif;
  --font-display:        'Space Grotesk', sans-serif;

  --card-bg:      var(--color-bg-surface);
  --card-border:  var(--color-border-default);
  --card-radius:  12px;
  --btn-pri-bg:   var(--color-primary);
  --btn-pri-fg:   #ffffff;
  --btn-pri-glow: var(--glow-primary);
  --input-bg:     var(--color-bg-input);
  --input-border: var(--color-border-default);
  --sidebar-bg:   var(--color-bg-inset);
  --logo-filter:  none;
}

/* ============================================================================
   主题 4 · atelier-light · 暖亮 Atelier
   暖陶白底 + teal deep 主色 + amber deep 选中。Logo 深描边 teal 变体。
   对比度目标 ≥ 4.5:1。
   ============================================================================ */
:root[data-theme="atelier-light"] {
  color-scheme: light;

  --seed-primary:   #1d9c8d;   /* teal deep */
  --seed-primary-2: #148376;
  --seed-accent:    #e8852b;   /* amber deep */
  --seed-accent-2:  #cf7320;
  --seed-ink:       #241f1a;
  --seed-base:      #f6f1e9;   /* 暖陶白 */

  --color-bg-base:     #f6f1e9;
  --color-bg-surface:  #fffdf9;
  --color-bg-elevated: #ffffff;
  --color-bg-inset:    #efe8dc;
  --color-bg-input:    #f1ebe1;
  --color-bg-hover:    rgba(36, 31, 26, 0.04);
  --color-glass:       rgba(255, 255, 255, 0.55);
  --color-overlay:     rgba(36, 31, 26, 0.25);

  --color-border-default: rgba(36, 31, 26, 0.12);
  --color-border-subtle:  rgba(36, 31, 26, 0.07);

  --color-text-primary:   #241f1a;
  --color-text-secondary: #5d564d;
  --color-text-muted:     #8b8377;

  --color-primary:       var(--seed-primary);
  --color-primary-hover: var(--seed-primary-2);
  --color-accent:        var(--seed-accent);
  --color-accent-hover:  var(--seed-accent-2);
  --color-on-accent:     #fffdf9;
  --color-on-warm:       oklch(0.99 0 0);   /* 白字叠在 deep amber 上 */

  /* 亮色：同色相，更低 lightness + 更高 chroma，确保白底上有足够重量 */
  --color-status-pending-fg:     oklch(0.45 0.18 230);
  --color-status-pending-border: oklch(0.62 0.17 230 / 0.50);
  --color-status-pending-bg:     oklch(0.85 0.10 230 / 0.40);
  --color-status-processing-fg:     oklch(0.48 0.18 70);
  --color-status-processing-border: oklch(0.62 0.18 70 / 0.50);
  --color-status-processing-bg:     oklch(0.88 0.10 70 / 0.45);
  --color-status-completed-fg:     oklch(0.45 0.13 175);
  --color-status-completed-border: oklch(0.58 0.15 175 / 0.50);
  --color-status-completed-bg:     oklch(0.86 0.09 175 / 0.45);
  --color-status-failed-fg:     oklch(0.48 0.21 25);
  --color-status-failed-border: oklch(0.60 0.21 25 / 0.55);
  --color-status-failed-bg:     oklch(0.88 0.10 25 / 0.40);
  --color-status-starred-fg:     oklch(0.50 0.15 60);
  --color-status-starred-border: oklch(0.62 0.16 60 / 0.60);
  --color-status-starred-bg:     oklch(0.86 0.12 65 / 0.55);
  --color-status-starred-solid:  oklch(0.62 0.16 60);

  --glow-primary: 0 0 0 1px rgba(29, 156, 141, 0.28), 0 6px 20px -8px rgba(29, 156, 141, 0.35);
  --glow-accent:  0 0 0 1px rgba(232, 133, 43, 0.30), 0 6px 22px -8px rgba(232, 133, 43, 0.35);
  --halation:     inset 0 0 36px -10px rgba(232, 133, 43, 0.18);
  --bloom:        radial-gradient(60% 50% at 18% 0%, rgba(29, 156, 141, 0.06), transparent 70%),
                  radial-gradient(55% 45% at 88% 100%, rgba(232, 133, 43, 0.05), transparent 70%);
  --grain-op: 0.025;

  --font-inter:          'Inter', sans-serif;
  --font-jetbrains-mono: 'JetBrains Mono', monospace;
  --font-space-grotesk:  'Space Grotesk', sans-serif;
  --font-display:        'Fraunces', Georgia, serif;

  --card-bg:      var(--color-bg-surface);
  --card-border:  var(--color-border-default);
  --card-radius:  14px;
  --btn-pri-bg:   var(--color-primary);
  --btn-pri-fg:   #fffdf9;
  --btn-pri-glow: var(--glow-primary);
  --input-bg:     var(--color-bg-input);
  --input-border: var(--color-border-default);
  --sidebar-bg:   var(--color-bg-inset);
  /* 亮色用深描边 teal logo PNG（filter 在白底失真），故 filter 置 none，src 切换 */
  --logo-filter:  none;
}

/* ============================================================================
   主题 5 · brand-light · 品牌亮色
   复用现有 html.light 基线 + brand 蓝主色。LumenX_亮色.png。
   ============================================================================ */
:root[data-theme="brand-light"] {
  color-scheme: light;

  --seed-primary:   #646cff;
  --seed-primary-2: #535bf2;
  --seed-accent:    #ff0080;
  --seed-accent-2:  #e60073;
  --seed-ink:       #1a1a1a;
  --seed-base:      #f8f9fa;

  /* 与现有 globals.css html.light 完全一致 */
  --color-bg-base:     #f8f9fa;
  --color-bg-surface:  #ffffff;
  --color-bg-elevated: #ffffff;
  --color-bg-inset:    rgba(0, 0, 0, 0.02);
  --color-bg-input:    #f1f3f5;
  --color-bg-hover:    rgba(0, 0, 0, 0.04);
  --color-glass:       rgba(0, 0, 0, 0.03);
  --color-overlay:     rgba(0, 0, 0, 0.2);

  --color-border-default: rgba(0, 0, 0, 0.1);
  --color-border-subtle:  rgba(0, 0, 0, 0.06);

  --color-text-primary:   #1a1a1a;
  --color-text-secondary: #6b7280;
  --color-text-muted:     #9ca3af;

  --color-primary:       var(--seed-primary);
  --color-primary-hover: var(--seed-primary-2);
  --color-accent:        var(--seed-accent);
  --color-accent-hover:  var(--seed-accent-2);
  --color-on-accent:     #ffffff;
  --color-on-warm:       oklch(0.20 0.02 280);

  /* 与现有 globals.css html.light 状态色一致 */
  --color-status-pending-fg:     oklch(0.45 0.18 230);
  --color-status-pending-border: oklch(0.65 0.17 230 / 0.50);
  --color-status-pending-bg:     oklch(0.85 0.10 230 / 0.40);
  --color-status-processing-fg:     oklch(0.50 0.18 80);
  --color-status-processing-border: oklch(0.65 0.18 80 / 0.50);
  --color-status-processing-bg:     oklch(0.88 0.10 80 / 0.45);
  --color-status-completed-fg:     oklch(0.45 0.18 155);
  --color-status-completed-border: oklch(0.62 0.18 155 / 0.50);
  --color-status-completed-bg:     oklch(0.88 0.10 155 / 0.45);
  --color-status-failed-fg:     oklch(0.45 0.21 25);
  --color-status-failed-border: oklch(0.60 0.21 25 / 0.55);
  --color-status-failed-bg:     oklch(0.88 0.10 25 / 0.40);
  --color-status-starred-fg:     oklch(0.45 0.16 80);
  --color-status-starred-border: oklch(0.65 0.17 85 / 0.60);
  --color-status-starred-bg:     oklch(0.88 0.12 88 / 0.55);
  --color-status-starred-solid:  oklch(0.75 0.16 88);

  --glow-primary: 0 0 0 1px rgba(100, 108, 255, 0.25), 0 6px 20px -8px rgba(100, 108, 255, 0.30);
  --glow-accent:  0 0 0 1px rgba(255, 0, 128, 0.28), 0 6px 22px -8px rgba(255, 0, 128, 0.30);
  --halation:     inset 0 0 36px -10px rgba(255, 0, 128, 0.12);
  --bloom:        radial-gradient(60% 50% at 18% 0%, rgba(100, 108, 255, 0.05), transparent 70%),
                  radial-gradient(55% 45% at 88% 100%, rgba(255, 0, 128, 0.04), transparent 70%);
  --grain-op: 0.02;

  --font-inter:          'Inter', sans-serif;
  --font-jetbrains-mono: 'JetBrains Mono', monospace;
  --font-space-grotesk:  'Space Grotesk', sans-serif;
  --font-display:        'Space Grotesk', sans-serif;

  --card-bg:      var(--color-bg-surface);
  --card-border:  var(--color-border-default);
  --card-radius:  12px;
  --btn-pri-bg:   var(--color-primary);
  --btn-pri-fg:   #ffffff;
  --btn-pri-glow: var(--glow-primary);
  --input-bg:     var(--color-bg-input);
  --input-border: var(--color-border-default);
  --sidebar-bg:   var(--color-bg-inset);
  --logo-filter:  none;   /* LumenX_亮色.png 原图 */
}

/* ============================================================================
   reduced-motion：沿用 globals.css 既定策略
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}
