/**
 * Synex AI — Design Tokens (canonical)
 * Product studio tokens. Admin may consume these; the workbench does not inherit console chrome.
 */

:root {
  /* ═══ Admin light surfaces (admin may consume; studio dark is canonical) ═══ */
  --synex-admin-bg: #e9ebf1;
  --synex-admin-bg-elevated: #ffffff;
  --synex-admin-surface: #ffffff;
  --synex-admin-surface-2: #f3f4f8;
  --synex-admin-text: #14141a;
  --synex-admin-text-muted: #6b7280;
  --synex-admin-border: rgba(20, 20, 26, 0.08);
  --synex-admin-divider: rgba(20, 20, 26, 0.06);

  /* ═══ Studio dark surfaces (product default) ═══ */
  --synex-v2-bg: #050507;
  --synex-v2-bg-elevated: #0a0a0d;
  --synex-v2-surface: #101014;
  --synex-v2-surface-hover: #16161c;
  --synex-v2-text-muted: #8b8b98;
  --synex-v2-border: rgba(255, 255, 255, 0.065);
  --synex-v2-border-strong: rgba(255, 255, 255, 0.12);

  /* ═══ 品牌 accent — 与当前生产站保持一致 ═══ */
  --accent: #5b5ef7;
  --accent-hover: #4a4de6;
  --accent-active: #3d40d4;
  --accent-muted: color-mix(in srgb, var(--accent) 14%, transparent);
  --accent-light: color-mix(in srgb, var(--accent) 72%, #fff);
  --accent-lighter: color-mix(in srgb, var(--accent) 48%, #fff);
  --accent-glow: color-mix(in srgb, var(--accent) 10%, transparent);

  /* 深色主题主文字：柔和灰白 + 少量品牌色（替代刺眼纯白 / #f5f5f7） */
  --synex-v2-text-soft: color-mix(in srgb, #ffffff 62%, #8b8b98 38%);
  --synex-v2-text: color-mix(in srgb, var(--synex-v2-text-soft) 90%, var(--accent) 10%);

  /* ═══ Admin inset follows accent ═══ */
  --synex-admin-inset: color-mix(in srgb, var(--accent) 5%, transparent);

  /* ═══ Theme aliases (:root light; dark in [data-theme='dark']) ═══ */
  --bg: var(--synex-admin-bg);
  --bg-elevated: var(--synex-admin-bg-elevated);
  --surface: var(--synex-admin-surface);
  --surface-hover: var(--synex-admin-surface-2);
  --surface-2: var(--synex-admin-surface-2);

  --text-primary: var(--synex-admin-text);
  --text-secondary: var(--synex-admin-text-muted);
  --text: var(--text-primary);
  --text-muted: var(--text-secondary);

  --border: var(--synex-admin-border);
  --border-strong: rgba(20, 20, 26, 0.12);
  --admin-divider: var(--synex-admin-divider);
  --admin-inset: var(--synex-admin-inset);

  /* Legacy brand aliases */
  --synex-ink-950: var(--synex-v2-bg);
  --synex-ink-900: var(--synex-v2-surface);
  --synex-ink-800: var(--synex-v2-surface-hover);
  --synex-ink-700: #141418;
  --synex-ink-muted: var(--synex-v2-text-muted);
  --synex-ink-fg: var(--synex-v2-text);
  --synex-violet-300: var(--accent-lighter);
  --synex-violet-400: var(--accent-light);
  --synex-violet-500: var(--accent);
  --synex-violet-600: var(--accent);
  --synex-violet-700: var(--accent-hover);
  --synex-violet-800: var(--accent-active);

  /* Status */
  --danger: #ef4444;
  --danger-muted: color-mix(in srgb, var(--danger) 14%, transparent);
  --success: #34d399;
  --success-muted: color-mix(in srgb, var(--success) 14%, transparent);
  --warning: #fbbf24;

  /* Brand solid — legacy --gradient-brand* aliases map to single accent (Design DNA) */
  --gradient-brand: var(--accent);
  --gradient-brand-hover: var(--accent-hover);
  --gradient-brand-soft: color-mix(in srgb, var(--accent) 6%, var(--surface));
  --gradient-brand-mixed: var(--accent);
  --gradient-brand-wide: var(--accent);
  --gradient-brand-animated: var(--accent);
  --gradient-brand-vertical: var(--accent);

  /* Shadows — DNA: subtle only, no accent glow */
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.2), 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-subtle: 0 1px 2px rgba(0, 0, 0, 0.16);
  --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.18);
  --shadow-strong: 0 8px 32px rgba(0, 0, 0, 0.22);
  --shadow-accent-sm: var(--shadow-subtle);
  --shadow-accent: var(--shadow-soft);
  --glow-accent-ring: 0 0 0 1px var(--border-strong);
  --glow-accent-focus: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);

  /* Typography — UI + display: Space Grotesk; CN: Noto Sans SC */
  --font-fallback: 'Space Grotesk', 'Noto Sans SC', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
    'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei UI', 'Microsoft YaHei', sans-serif;
  --font: var(--font-fallback);
  --font-display: 'Space Grotesk', 'Noto Sans SC', 'Segoe UI Variable Display', 'Segoe UI', 'PingFang SC',
    'Hiragino Sans GB', 'Microsoft YaHei UI', sans-serif;
  --font-mono: 'Space Mono', 'SF Mono', 'Cascadia Code', Consolas, monospace;
  --tracking-display: -0.035em;
  --tracking-tight: -0.02em;
  --studio-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --studio-duration: 220ms;

  /* Marketing / landing */
  --landing-bg: var(--synex-admin-bg);
  --landing-fg: var(--synex-admin-text);
  --landing-fg-muted: var(--synex-admin-text-muted);
  --landing-surface: var(--synex-admin-surface);
  --landing-border: var(--synex-admin-border);

  --marketing-metric-value-color: var(--accent-light);
  --marketing-metric-label-color: var(--text-secondary);
  --marketing-metrics-border: color-mix(in srgb, var(--accent) 25%, var(--border));
  --marketing-metrics-track-bg: color-mix(in srgb, var(--border) 60%, transparent);
  --marketing-metric-cell-bg: var(--surface);
  --marketing-btn-primary-bg: var(--accent);
  /* 浅色主题主按钮仍用纯白；深色主题在 [data-theme=dark] 覆盖为柔和主文字 */
  --marketing-btn-primary-fg: #ffffff;
  --btn-on-accent-fg: #ffffff;
  --marketing-btn-primary-hover-bg: var(--accent-hover);

  /* Flat layer aliases（synex-ui-flat.css） */
  --synex-canvas: var(--synex-admin-bg);
  --synex-surface: var(--synex-admin-surface);
  --synex-surface-2: var(--synex-admin-surface-2);
  --synex-divider: var(--admin-divider);
  --synex-inset: var(--admin-inset);
  --synex-shadow: none;

  /* 面板 / 边框 — 全站共用 */
  --surface-panel: var(--surface);
  --surface-panel-muted: var(--surface);
  --surface-panel-inset: var(--surface-2);
  /* Transparency contract: page -> module -> card -> control. Popovers and
     dialogs must continue using solid --surface / --bg-elevated surfaces. */
  --synex-surface-page: transparent;
  --synex-surface-module: color-mix(in srgb, var(--surface) 38%, transparent);
  --synex-surface-card: color-mix(in srgb, var(--surface) 68%, transparent);
  --synex-surface-control: color-mix(in srgb, var(--surface) 88%, transparent);
  --synex-surface-active: color-mix(in srgb, var(--accent) 12%, var(--surface));
  /* Input contract: text entry and model selection share the same readable
     control family, while menus remain solid elevated surfaces. */
  --synex-input-surface: var(--surface-2);
  --synex-input-surface-focus: var(--surface-2);
  --synex-picker-surface: var(--surface-2);
  --synex-picker-menu-surface: var(--bg-elevated);
  --synex-placeholder: var(--text-muted);
  --border-accent-subtle: color-mix(in srgb, var(--accent) 18%, var(--border-strong));
  --border-accent: color-mix(in srgb, var(--accent) 28%, var(--border-strong));
  --border-accent-strong: color-mix(in srgb, var(--accent) 38%, var(--border-strong));

  /* App shell */
  --input-bg: var(--synex-admin-surface-2);
  --composer-shell-bg: var(--surface);
  --composer-shell-border: color-mix(in srgb, var(--border) 85%, transparent);
  --composer-shell-shadow: 0 10px 40px color-mix(in srgb, var(--bg) 55%, transparent);
  /* Legacy glass names → solid surfaces (Design DNA) */
  --studio-glass-bg: var(--bg-elevated);
  --studio-glass-border: var(--border);
  --m-blur: none;
  --ma-blur: none;
  --header-popover-backdrop: none;
  --header-popover-bg: var(--surface);
  --header-popover-border: var(--border);
  --header-popover-shadow: var(--shadow-medium);
  --panel-card-bg: var(--surface-2);
  --panel-card-border: color-mix(in srgb, var(--border) 80%, transparent);
  --panel-card-hover-bg: color-mix(in srgb, var(--accent) 10%, var(--surface-2));
  --panel-card-hover-border: color-mix(in srgb, var(--accent) 55%, var(--border));

  /* Semantic aliases */
  --color-bg-primary: var(--bg);
  --color-bg-secondary: var(--surface);
  --color-bg-elevated: var(--surface-hover);
  --color-border-subtle: var(--border);
  --color-text-primary: var(--text-primary);
  --color-text-secondary: var(--text-secondary);
  --color-accent: var(--accent);
  --color-success: var(--success);
  --color-warning: var(--warning);
  --color-error: var(--danger);

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* Design DNA: product UI uses square edges. Semantic circles are scoped
     explicitly on avatars, status dots, and circular icons. */
  --radius: 0;
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --radius-xl: 0;
  --radius-pill: 0;

  /* Motion */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-synex: var(--ease-standard);
  --duration-ui: 220ms;
  --duration-fast: 180ms;
  --duration-normal: 220ms;
  --duration-slow: 320ms;
}

[data-theme='dark'] {
  --synex-canvas: var(--synex-v2-bg);
  --synex-surface: var(--synex-v2-surface);
  --synex-surface-2: var(--synex-v2-surface-hover);
  --synex-divider: var(--admin-divider);
  --synex-inset: var(--admin-inset);

  --bg: var(--synex-v2-bg);
  --bg-elevated: var(--synex-v2-bg-elevated);
  --surface: var(--synex-v2-surface);
  --surface-hover: var(--synex-v2-surface-hover);
  --surface-2: var(--synex-v2-surface-hover);
  --text-primary: var(--synex-v2-text);
  --text-secondary: var(--synex-v2-text-muted);
  --text: var(--synex-v2-text);
  --text-muted: var(--synex-v2-text-muted);
  --btn-on-accent-fg: #f4f4f7;
  --marketing-btn-primary-fg: #f4f4f7;
  --border: var(--synex-v2-border);
  --border-strong: var(--synex-v2-border-strong);
  --input-bg: var(--synex-v2-surface-hover);
  --landing-bg: var(--synex-v2-bg);
  --landing-fg: var(--synex-v2-text);
  --landing-fg-muted: var(--synex-v2-text-muted);
  --landing-surface: var(--synex-v2-surface);
  --landing-border: var(--synex-v2-border);
  --surface-panel-inset: var(--surface-2);

  /* 输入框 — 与顶栏 pill 导航一致（半透明底 + 细描边，无发光） */
  --border-accent-subtle: color-mix(in srgb, var(--border) 85%, var(--accent) 15%);
  --border-accent: color-mix(in srgb, var(--accent) 45%, var(--border));
  --border-accent-strong: color-mix(in srgb, var(--accent) 45%, var(--border));
  --composer-shell-border: color-mix(in srgb, var(--border) 85%, var(--accent) 15%);
  --composer-shell-bg: color-mix(in srgb, var(--surface) 92%, var(--text-primary) 4%);
  --composer-shell-shadow: none;
  --composer-shell-border-focus: color-mix(in srgb, var(--accent) 45%, var(--border));
  --composer-shell-bg-focus: var(--composer-shell-bg);
  --composer-shell-shadow-focus: var(--glow-accent-focus);
}

[data-theme='light'] {
  --synex-canvas: var(--synex-admin-bg);
  --synex-surface: var(--synex-admin-surface);
  --synex-surface-2: var(--synex-admin-surface-2);
  --synex-divider: var(--synex-admin-divider);
  --synex-inset: var(--synex-admin-inset);

  --bg: var(--synex-admin-bg);
  --bg-elevated: var(--synex-admin-bg-elevated);
  --surface: var(--synex-admin-surface);
  --surface-hover: var(--synex-admin-surface-2);
  --surface-2: var(--synex-admin-surface-2);
  --text-primary: var(--synex-admin-text);
  --text-secondary: var(--synex-admin-text-muted);
  --text: var(--synex-admin-text);
  --text-muted: var(--synex-admin-text-muted);
  --border: var(--synex-admin-border);
  --border-strong: rgba(20, 20, 26, 0.12);
  --admin-divider: var(--synex-admin-divider);
  --admin-inset: var(--synex-admin-inset);
  --input-bg: var(--synex-admin-surface-2);
  --landing-bg: var(--synex-admin-bg);
  --landing-fg: var(--synex-admin-text);
  --landing-fg-muted: var(--synex-admin-text-muted);
  --landing-surface: var(--synex-admin-surface);
  --landing-border: var(--synex-admin-border);
}