/**
 * OrderEZ Design Tokens — 唯一色彩来源
 * @see OrderEZ-UI风格标准.md
 */

:root {
  /* === 品牌 & Accent === */
  --clay: #d97757;
  --clay-dark: #c46849;
  --clay-hover: #c6613f;
  --oat: #e3dacc;
  --olive: #788c5d;
  --sky: #6a9bcc;
  --focus-blue: #2c84db;
  --error: #bf4d43;
  --peach: #ebc9b7;

  /* === 灰阶 === */
  --gray-000: #ffffff;
  --gray-050: #faf9f5;
  --gray-100: #f5f4ed;
  --gray-150: #f0eee6;
  --gray-200: #e8e6dc;
  --gray-250: #dedcd1;
  --gray-300: #d1cfc5;
  --gray-350: #c2c0b6;
  --gray-400: #b0aea5;
  --gray-450: #9c9a92;
  --gray-500: #87867f;
  --gray-550: #73726c;
  --gray-600: #5e5d59;
  --gray-650: #4d4c48;
  --gray-700: #3d3d3a;
  --gray-750: #30302e;
  --gray-800: #262624;
  --gray-850: #1f1e1d;
  --gray-900: #1a1918;
  --gray-950: #141413;
  --gray-1000: #000000;

  /* === OrderEZ 语义映射 === */
  --oe-clay: var(--clay);
  --oe-primary: var(--clay-hover);
  --oe-primary-hover: var(--clay-dark);
  --oe-primary-active: var(--clay-dark);
  --oe-primary-light: var(--gray-150);
  --oe-primary-border: var(--gray-300);

  --oe-bg: var(--gray-050);
  --oe-bg-secondary: var(--gray-100);
  --oe-text: var(--gray-950);
  --oe-text-secondary: var(--gray-700);
  --oe-text-muted: var(--gray-500);
  --oe-text-placeholder: var(--gray-550);
  --oe-border: var(--gray-300);
  --oe-border-light: var(--gray-200);
  /* 输入聚焦：浅蓝描边 + 外环（对齐 Claude Search；规范 §2.4 用 focus-blue 非 clay） */
  --oe-focus-border: var(--focus-blue);
  --oe-focus-ring: rgba(44, 132, 219, 0.2);

  --oe-sidebar-bg: var(--gray-950);
  --oe-sidebar-text: var(--gray-050);
  --oe-sidebar-icon: var(--gray-400);
  --oe-sidebar-active: var(--clay);

  --oe-success: var(--olive);
  --oe-info: var(--sky);
  --oe-danger: var(--error);
  --oe-action: var(--focus-blue);

  --oe-cta-bg: var(--gray-050);
  --oe-cta-fg: var(--gray-950);

  --oe-surface: var(--gray-000);
  --oe-surface-hover: var(--gray-150);
  --oe-text-subtle: var(--gray-550);
  --oe-brand-accent: var(--oat);
  --oe-chrome-surface: var(--gray-850);
  --oe-chrome-control: var(--gray-750);
  --oe-chrome-border: color-mix(in srgb, var(--oe-sidebar-text) 16%, transparent);
  --oe-secondary-bg: var(--gray-200);
  --oe-ghost-fg: var(--gray-600);
  --oe-brand-soft: color-mix(in srgb, var(--oe-clay) 13%, var(--oe-surface));
  --oe-brand-line: color-mix(in srgb, var(--oe-clay) 32%, var(--oe-surface));
  --oe-info-soft: color-mix(in srgb, var(--oe-info) 14%, var(--oe-surface));
  --oe-info-text: color-mix(in srgb, var(--oe-info) 44%, var(--oe-text));
  --oe-success-soft: color-mix(in srgb, var(--oe-success) 14%, var(--oe-surface));
  --oe-success-text: color-mix(in srgb, var(--oe-success) 48%, var(--oe-text));
  --oe-danger-on-dark: color-mix(in srgb, var(--oe-danger) 48%, var(--oe-surface));
  --oe-scrim: color-mix(in srgb, var(--oe-text) 48%, transparent);
  --oe-shadow-soft: 0 3px 16px color-mix(in srgb, var(--oe-text) 6%, transparent);
  --oe-shadow-dialog: 0 16px 48px color-mix(in srgb, var(--oe-text) 22%, transparent);
  --oe-shadow-pin: color-mix(in srgb, var(--gray-1000) 12%, transparent);


  --oe-radius-sm: 4px;
  --oe-radius-md: 8px;
  --oe-radius-lg: 12px;
  --oe-radius-xl: 16px;

  /* === 字体 === */
  --oe-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB',
    'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif;
  --oe-font-display: 'Source Serif 4', 'Noto Serif SC', 'Songti SC', Georgia, 'Times New Roman', serif;
  --oe-font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, 'PingFang SC', monospace;

  --oe-font-size-xs: 13px;
  --oe-font-size-sm: 14px;
  --oe-font-size-base: 14px;
  --oe-font-size-md: 15px;
  --oe-font-size-lg: 17px;
  --oe-font-size-xl: 20px;
  --oe-line-height: 1.5;
  --oe-control-height: 32px;

  /* Ant Design 兼容 */
  --ant-color-primary: var(--clay-hover);
  --ant-color-primary-hover: var(--clay-dark);
  --ant-color-primary-active: var(--clay-dark);
  --ant-primary-color: var(--clay-hover);
  --ant-primary-color-hover: var(--clay-dark);
  --ant-primary-1: var(--gray-150);
  --ant-primary-2: var(--gray-200);
  --ant-primary-3: var(--gray-250);
  --ant-primary-4: var(--gray-350);
  --ant-primary-5: var(--clay);
  --ant-primary-6: var(--clay-dark);
  --ant-primary-7: var(--clay-dark);
}