/* ═══════════════════════════════════════════
   Design OS Theme Bridge — Converge Brand
   版本: v2.0 | 2026-08-10
   策略: --ds-* 变量通过 var() 引用 design-tokens.css (v5, 唯一令牌源)
         不再重复定义色值。仅保留 DS 组件需要的 50-900 色阶。
   暗黑: html.dark 双重触发
   ═══════════════════════════════════════════ */

/* ═══ Light Theme (default) ═══ */
:root {
  /* ── Primary 色阶: 从 --accent (#059669) 派生 ── */
  --ds-color-primary-50: #ecfdf5;
  --ds-color-primary-100: #d1fae5;
  --ds-color-primary-200: #a7f3d0;
  --ds-color-primary-300: #6ee7b7;
  --ds-color-primary-400: #34d399;
  --ds-color-primary-500: var(--accent);          /* ← design-tokens.css */
  --ds-color-primary-600: var(--accent-hover);     /* ← design-tokens.css */
  --ds-color-primary-700: #065f46;
  --ds-color-primary-800: #064e3b;
  --ds-color-primary-900: #022c22;

  /* ── Neutral 色阶: 从 --text-* / --bg-* 映射 ── */
  --ds-color-neutral-50: var(--bg-base);           /* #f8fafc */
  --ds-color-neutral-100: var(--bg-overlay);       /* #f1f5f9 */
  --ds-color-neutral-200: #e2e8f0;
  --ds-color-neutral-300: var(--border-default);   /* #cbd5e1 */
  --ds-color-neutral-400: var(--text-tertiary); /* #475569 */
  --ds-color-neutral-500: var(--text-tertiary);    /* #64748b */
  --ds-color-neutral-600: #475569;
  --ds-color-neutral-700: var(--text-secondary);   /* #334155 */
  --ds-color-neutral-800: #1e293b;
  --ds-color-neutral-900: var(--text-primary);     /* #0f172a */

  /* ── Semantic: 直接引用 design-tokens.css ── */
  --ds-color-semantic-success: var(--success);
  --ds-color-semantic-warning: var(--warning);
  --ds-color-semantic-danger: var(--danger);
  --ds-color-semantic-info: var(--info);

  /* Semantic text+bg pairs */
  --ds-color-semantic-success-text: #047857;
  --ds-color-semantic-success-bg: var(--success-soft);
  --ds-color-semantic-warning-text: #92400e;
  --ds-color-semantic-warning-bg: var(--warning-soft);
  --ds-color-semantic-danger-text: #be123c;
  --ds-color-semantic-danger-bg: var(--danger-soft);
  --ds-color-semantic-info-text: var(--text-secondary);
  --ds-color-semantic-info-bg: var(--info-soft);

  /* Semantic action states */
  --ds-color-semantic-danger-hover: #be123c;
  --ds-color-semantic-danger-active: #9f1239;

  /* ── Background: 映射到 design-tokens.css 背景层 ── */
  --ds-color-bg-surface: var(--bg-raised);     /* #ffffff */
  --ds-color-bg-base: var(--bg-base);          /* #f8fafc */
  --ds-color-bg-elevated: var(--bg-overlay);   /* #f1f5f9 */
  --ds-color-bg-overlay: rgba(15, 23, 42, 0.45);

  /* ── Spacing: 与 Converge 4px 基数对齐 ── */
  --ds-spacing-xs: var(--space-1);    /* 4px */
  --ds-spacing-sm: var(--space-2);    /* 8px */
  --ds-spacing-md: var(--space-4);    /* 16px */
  --ds-spacing-lg: var(--space-6);    /* 24px */
  --ds-spacing-xl: var(--space-8);    /* 32px */
  --ds-spacing-2xl: var(--space-12);  /* 48px */
  --ds-spacing-3xl: 64px;

  /* ── Radius: 映射到 design-tokens.css ── */
  --ds-radius-none: 0;
  --ds-radius-sm: var(--radius-sm);   /* 6px */
  --ds-radius-md: var(--radius-md);   /* 8px */
  --ds-radius-lg: var(--radius-lg);   /* 12px */
  --ds-radius-full: var(--radius-full);

  /* ── Typography ── */
  --ds-typography-fontFamily-sans: var(--font-sans);
  --ds-typography-fontFamily-mono: var(--font-mono);

  --ds-typography-fontSize-xs: var(--text-xs);
  --ds-typography-fontSize-sm: var(--text-sm);
  --ds-typography-fontSize-base: var(--text-base);
  --ds-typography-fontSize-lg: var(--text-lg);
  --ds-typography-fontSize-xl: var(--text-xl);
  --ds-typography-fontSize-2xl: var(--text-2xl);
  --ds-typography-fontSize-3xl: var(--text-3xl);
  --ds-typography-fontSize-4xl: var(--text-4xl);

  --ds-typography-fontWeight-normal: var(--font-normal);
  --ds-typography-fontWeight-medium: var(--font-medium);
  --ds-typography-fontWeight-semibold: var(--font-semibold);
  --ds-typography-fontWeight-bold: var(--font-bold);

  /* ── Shadow ── */
  --ds-shadow-sm: var(--shadow-sm);
  --ds-shadow-md: var(--shadow-md);
  --ds-shadow-lg: var(--shadow-lg);

  /* ── Motion ── */
  --ds-motion-duration-instant: 0ms;
  --ds-motion-duration-fast: 150ms;
  --ds-motion-duration-normal: 250ms;
  --ds-motion-duration-slow: 350ms;
  --ds-motion-easing-easeOut: cubic-bezier(0, 0, 0.2, 1);
  --ds-motion-easing-easeInOut: cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Breakpoint ── */
  --ds-breakpoint-sm: var(--bp-sm);
  --ds-breakpoint-md: var(--bp-md);
  --ds-breakpoint-lg: var(--bp-lg);
  --ds-breakpoint-xl: var(--bp-xl);
  --ds-breakpoint-2xl: var(--bp-2xl);

  /* ── Sidebar: 引用 design-tokens.css 侧栏令牌 ── */
  --ds-sidebar-width: 240px;
  --ds-sidebar-collapsed-width: 64px;
  --ds-sidebar-bg: var(--sidebar-bg);
  --ds-sidebar-border-color: #334155;
}

/* ═══ Dark Theme ═══ */
html.dark {
  /* Primary — lighter green for dark bg (色阶反转) */
  --ds-color-primary-50: #022c22;
  --ds-color-primary-100: #064e3b;
  --ds-color-primary-200: #065f46;
  --ds-color-primary-300: #047857;
  --ds-color-primary-400: #059669;
  --ds-color-primary-500: var(--accent);          /* ← design-tokens.css dark: #34d399 */
  --ds-color-primary-600: var(--accent-hover);     /* ← design-tokens.css dark: #10b981 */
  --ds-color-primary-700: #a7f3d0;
  --ds-color-primary-800: #d1fae5;
  --ds-color-primary-900: #ecfdf5;

  /* Neutral — inverted for dark */
  --ds-color-neutral-50: #0b1121;
  --ds-color-neutral-100: #151d30;
  --ds-color-neutral-200: #1e2744;
  --ds-color-neutral-300: #232d42;
  --ds-color-neutral-400: #364158;
  --ds-color-neutral-500: #7a8a9e;
  --ds-color-neutral-600: #8fa0b8;
  --ds-color-neutral-700: #94a3b8;
  --ds-color-neutral-800: #cbd5e1;
  --ds-color-neutral-900: #e8edf5;

  /* Semantic — lighter for dark readability */
  --ds-color-semantic-success: #34d399;
  --ds-color-semantic-warning: #fbbf24;
  --ds-color-semantic-danger: #f87171;
  --ds-color-semantic-info: #38bdf8;

  --ds-color-semantic-success-text: #a7f3d0;
  --ds-color-semantic-success-bg: rgba(5, 150, 105, 0.15);
  --ds-color-semantic-warning-text: #fde68a;
  --ds-color-semantic-warning-bg: rgba(217, 119, 6, 0.12);
  --ds-color-semantic-danger-text: #fecaca;
  --ds-color-semantic-danger-bg: rgba(220, 38, 38, 0.12);
  --ds-color-semantic-info-text: #a5f3fc;
  --ds-color-semantic-info-bg: rgba(2, 132, 199, 0.15);

  --ds-color-semantic-danger-hover: #ef4444;
  --ds-color-semantic-danger-active: #dc2626;

  /* Background — dark surfaces, 引用 design-tokens.css dark */
  --ds-color-bg-surface: var(--bg-raised);     /* #111820 */
  --ds-color-bg-base: var(--bg-base);          /* #080b12 */
  --ds-color-bg-elevated: var(--bg-overlay);   /* #1a2536 */
  --ds-color-bg-overlay: rgba(0, 0, 0, 0.65);

  /* Shadow — darker for dark bg */
  --ds-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
  --ds-shadow-md: 0 6px 28px rgba(0, 0, 0, 0.35);
  --ds-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.40);

  /* Sidebar */
  --ds-sidebar-bg: #0f172a;
  --ds-sidebar-border-color: #1e293b;
}

/* ═══ FOUC Prevention — hide DS components until defined ═══ */
ds-button:not(:defined),
ds-input:not(:defined),
ds-select:not(:defined),
ds-modal:not(:defined),
ds-sidebar:not(:defined),
ds-table:not(:defined),
ds-card:not(:defined),
ds-badge:not(:defined),
ds-avatar:not(:defined),
ds-dropdown:not(:defined),
ds-tabs:not(:defined),
ds-pagination:not(:defined),
ds-spin:not(:defined),
ds-skeleton:not(:defined),
ds-empty:not(:defined),
ds-menu:not(:defined),
ds-menu-item:not(:defined),
ds-breadcrumb:not(:defined),
ds-tag:not(:defined),
ds-statistic:not(:defined),
ds-steps:not(:defined),
ds-form:not(:defined),
ds-drawer:not(:defined),
ds-popconfirm:not(:defined),
ds-timeline:not(:defined),
ds-switch:not(:defined),
ds-checkbox:not(:defined),
ds-radio:not(:defined),
ds-progress:not(:defined),
ds-result:not(:defined),
ds-descriptions:not(:defined),
ds-upload:not(:defined),
ds-datepicker:not(:defined),
ds-inputnumber:not(:defined),
ds-divider:not(:defined),
ds-title:not(:defined),
ds-text:not(:defined),
ds-toast:not(:defined),
ds-alert:not(:defined),
ds-tooltip:not(:defined),
ds-collapse:not(:defined),
ds-space:not(:defined),
ds-row:not(:defined),
ds-col:not(:defined) {
  visibility: hidden;
}