/**
 * Unimarketing Design Tokens
 * Format: CSS Custom Properties (CSS Variables)
 * Architecture: Primitive + Semantic
 * No framework dependency — pure CSS
 */

 :root {

  /* ============================================================
     PRIMITIVE LAYER
     基础值层，按物理属性命名。
     修改需谨慎，会影响整个设计系统。
     ============================================================ */

  /* Color */
  --primitive-color-white: #ffffff;
  --primitive-color-black: #000000;
  --primitive-color-gray-50: #f7fafc;
  --primitive-color-gray-100: #f2f6fc;
  --primitive-color-gray-150: #edf2f7;
  --primitive-color-gray-200: #e2e8f0;
  --primitive-color-gray-250: #dcdde0;
  --primitive-color-gray-300: #cbd5e0;
  --primitive-color-gray-400: #a0aec0;
  --primitive-color-gray-500: #9ea7b2;
  --primitive-color-gray-600: #718096;
  --primitive-color-gray-700: #4a5568;
  --primitive-color-gray-800: #1e2d42;
  --primitive-color-gray-900: #0f1a2e;
  --primitive-color-blue-50: #eff6ff;
  --primitive-color-blue-100: #dbeafe;
  --primitive-color-blue-200: #bfdbfe;
  --primitive-color-blue-300: #93c5fd;
  --primitive-color-blue-400: #60a5fa;
  --primitive-color-blue-500: #3b82f6;
  --primitive-color-blue-600: #2563eb;
  --primitive-color-blue-700: #1d4ed8;
  --primitive-color-blue-800: #1e40af;
  --primitive-color-blue-900: #1e3a8a;
  --primitive-color-red-50: #fef2f2;
  --primitive-color-red-100: #fee2e2;
  --primitive-color-red-200: #fecaca;
  --primitive-color-red-300: #fca5a5;
  --primitive-color-red-400: #f87171;
  --primitive-color-red-500: #ef4444;
  --primitive-color-red-600: #dc2626;
  --primitive-color-red-700: #b91c1c;
  --primitive-color-red-800: #991b1b;
  --primitive-color-red-900: #7f1d1d;
  --primitive-color-green-50: #f0fdf4;
  --primitive-color-green-100: #dcfce7;
  --primitive-color-green-200: #bbf7d0;
  --primitive-color-green-300: #86efac;
  --primitive-color-green-400: #4ade80;
  --primitive-color-green-500: #22c55e;
  --primitive-color-green-600: #16a34a;
  --primitive-color-green-700: #15803d;
  --primitive-color-green-800: #166534;
  --primitive-color-green-900: #14532d;
  --primitive-color-yellow-50: #fffbeb;
  --primitive-color-yellow-100: #fef3c7;
  --primitive-color-yellow-200: #fde68a;
  --primitive-color-yellow-300: #fcd34d;
  --primitive-color-yellow-400: #fbbf24;
  --primitive-color-yellow-500: #f59e0b;
  --primitive-color-yellow-600: #d97706;
  --primitive-color-yellow-700: #b45309;
  --primitive-color-yellow-800: #92400e;
  --primitive-color-yellow-900: #78350f;

  /* Font */
  --primitive-font-base: system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, 'PingFang SC', 'Microsoft YaHei', 'Source Han Sans SC', 'WenQuanYi Micro Hei', sans-serif;
  --primitive-font-mono: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, Courier, monospace;

  /* Font Size */
  --primitive-font-size-3: 12px;
  --primitive-font-size-3-5: 13px;
  --primitive-font-size-4: 14px;
  --primitive-font-size-4-5: 15px;
  --primitive-font-size-5: 16px;
  --primitive-font-size-6: 18px;
  --primitive-font-size-7: 20px;
  --primitive-font-size-8: 24px;
  --primitive-font-size-9: 32px;

  /* Font Weight */
  --primitive-font-weight-light: 300;
  --primitive-font-weight-normal: 400;
  --primitive-font-weight-medium: 500;
  --primitive-font-weight-semibold: 600;
  --primitive-font-weight-bold: 700;

  /* Line Height */
  --primitive-line-height-none: 1;
  --primitive-line-height-tight: 1.25;
  --primitive-line-height-snug: 1.375;
  --primitive-line-height-normal: 1.5;
  --primitive-line-height-relaxed: 1.625;
  --primitive-line-height-loose: 2;

  /* Spacing */
  --primitive-spacing-0: 0px;
  --primitive-spacing-0-5: 2px;
  --primitive-spacing-1: 4px;
  --primitive-spacing-1-5: 6px;
  --primitive-spacing-2: 8px;
  --primitive-spacing-2-5: 10px;
  --primitive-spacing-3: 12px;
  --primitive-spacing-3-5: 14px;
  --primitive-spacing-4: 16px;
  --primitive-spacing-5: 20px;
  --primitive-spacing-6: 24px;
  --primitive-spacing-7: 28px;
  --primitive-spacing-8: 32px;
  --primitive-spacing-9: 36px;
  --primitive-spacing-10: 40px;
  --primitive-spacing-11: 44px;
  --primitive-spacing-12: 48px;
  --primitive-spacing-14: 56px;
  --primitive-spacing-16: 64px;
  --primitive-spacing-20: 80px;
  --primitive-spacing-24: 96px;
  --primitive-spacing-28: 112px;
  --primitive-spacing-32: 128px;
  --primitive-spacing-36: 144px;
  --primitive-spacing-40: 160px;
  --primitive-spacing-44: 176px;
  --primitive-spacing-48: 192px;
  --primitive-spacing-52: 208px;
  --primitive-spacing-56: 224px;
  --primitive-spacing-60: 240px;
  --primitive-spacing-64: 256px;
  --primitive-spacing-72: 288px;
  --primitive-spacing-80: 320px;
  --primitive-spacing-96: 384px;

  /* Radius */
  --primitive-radius-none: 0px;
  --primitive-radius-sm: 2px;
  --primitive-radius-base: 3px;
  --primitive-radius-md: 4px;
  --primitive-radius-lg: 6px;
  --primitive-radius-xl: 8px;
  --primitive-radius-2xl: 10px;
  --primitive-radius-3xl: 12px;
  --primitive-radius-4xl: 15px;
  --primitive-radius-5xl: 24px;
  --primitive-radius-full: 9999px;

  /* Shadow */
  --primitive-shadow-none: none;
  --primitive-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --primitive-shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --primitive-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --primitive-shadow-lg: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  --primitive-shadow-xl: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --primitive-shadow-2xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --primitive-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
  --primitive-shadow-focus: 0 0 2px 2px #1472FF;

  /* Border Width */
  --primitive-border-width-0: 0px;
  --primitive-border-width-1: 1px;
  --primitive-border-width-2: 2px;
  --primitive-border-width-3: 3px;
  --primitive-border-width-4: 4px;
  --primitive-border-width-8: 8px;

  /* Opacity */
  --primitive-opacity-0: 0;
  --primitive-opacity-5: 0.05;
  --primitive-opacity-10: 0.1;
  --primitive-opacity-20: 0.2;
  --primitive-opacity-25: 0.25;
  --primitive-opacity-30: 0.3;
  --primitive-opacity-40: 0.4;
  --primitive-opacity-50: 0.5;
  --primitive-opacity-60: 0.6;
  --primitive-opacity-70: 0.7;
  --primitive-opacity-75: 0.75;
  --primitive-opacity-80: 0.8;
  --primitive-opacity-90: 0.9;
  --primitive-opacity-95: 0.95;
  --primitive-opacity-100: 1;

  /* Z Index */
  --primitive-z-index-auto: auto;
  --primitive-z-index-0: 0;
  --primitive-z-index-10: 10;
  --primitive-z-index-20: 20;
  --primitive-z-index-30: 30;
  --primitive-z-index-40: 40;
  --primitive-z-index-50: 50;
  --primitive-z-index-dropdown: 1000;
  --primitive-z-index-sticky: 1020;
  --primitive-z-index-fixed: 1030;
  --primitive-z-index-modal-backdrop: 1040;
  --primitive-z-index-modal: 1050;
  --primitive-z-index-popover: 1060;
  --primitive-z-index-tooltip: 1070;

  /* Transition */
  --primitive-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --primitive-transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --primitive-transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --primitive-transition-slower: 500ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Breakpoint */
  --primitive-breakpoint-sm: 640px;
  --primitive-breakpoint-md: 768px;
  --primitive-breakpoint-lg: 1024px;
  --primitive-breakpoint-xl: 1280px;
  --primitive-breakpoint-2xl: 1536px;

  /* ============================================================
     SEMANTIC LAYER
     语义层，按用途命名。
     日常开发优先使用这一层，便于主题切换和维护。
     ============================================================ */

  /* Color */
  --color-brand: var(--primitive-color-blue-500);
  --color-brand-hover: var(--primitive-color-blue-400);
  --color-brand-active: var(--primitive-color-blue-600);
  --color-brand-light: var(--primitive-color-blue-50);
  --color-brand-dark: var(--primitive-color-blue-700);
  --color-brand-disabled: var(--primitive-color-blue-100);
  --color-text-primary: var(--primitive-color-gray-900);
  --color-text-secondary: var(--primitive-color-gray-600);
  --color-text-regular: var(--primitive-color-gray-700);
  --color-text-placeholder: var(--primitive-color-gray-400);
  --color-text-disabled: var(--primitive-color-gray-300);
  --color-text-inverse: var(--primitive-color-white);
  --color-text-link: var(--primitive-color-blue-500);
  --color-text-link-hover: var(--primitive-color-blue-400);
  --color-bg-page: var(--primitive-color-gray-50);
  --color-bg-card: var(--primitive-color-white);
  --color-bg-hover: var(--primitive-color-gray-100);
  --color-bg-active: var(--primitive-color-gray-150);
  --color-bg-overlay: rgba(0, 0, 0, 0.45);
  --color-bg-mask: rgba(255, 255, 255, 0.85);
  --color-border-default: var(--primitive-color-gray-200);
  --color-border-light: var(--primitive-color-gray-150);
  --color-border-divider: var(--primitive-color-gray-300);
  --color-border-active: var(--primitive-color-blue-500);
  --color-success: var(--primitive-color-green-500);
  --color-success-light: var(--primitive-color-green-50);
  --color-success-hover: var(--primitive-color-green-300);
  --color-danger: var(--primitive-color-red-500);
  --color-danger-light: var(--primitive-color-red-50);
  --color-danger-hover: var(--primitive-color-red-300);
  --color-warning: var(--primitive-color-yellow-500);
  --color-warning-light: var(--primitive-color-yellow-50);
  --color-warning-hover: var(--primitive-color-yellow-300);
  --color-info: var(--primitive-color-gray-600);
  --color-info-light: var(--primitive-color-gray-100);

  /* Font */
  --font-body: var(--primitive-font-base);
  --font-heading: var(--primitive-font-base);
  --font-code: var(--primitive-font-mono);
  --font-icon: var(--primitive-font-icon);

  /* Font Size */
  --font-size-xs: var(--primitive-font-size-3);
  --font-size-sm: var(--primitive-font-size-4);
  --font-size-base: var(--primitive-font-size-5);
  --font-size-lg: var(--primitive-font-size-6);
  --font-size-xl: var(--primitive-font-size-7);
  --font-size-2xl: var(--primitive-font-size-8);
  --font-size-3xl: var(--primitive-font-size-9);

  /* Font Weight */
  --font-weight-light: var(--primitive-font-weight-light);
  --font-weight-normal: var(--primitive-font-weight-normal);
  --font-weight-medium: var(--primitive-font-weight-medium);
  --font-weight-semibold: var(--primitive-font-weight-semibold);
  --font-weight-bold: var(--primitive-font-weight-bold);

  /* Line Height */
  --line-height-none: var(--primitive-line-height-none);
  --line-height-tight: var(--primitive-line-height-tight);
  --line-height-snug: var(--primitive-line-height-snug);
  --line-height-normal: var(--primitive-line-height-normal);
  --line-height-relaxed: var(--primitive-line-height-relaxed);
  --line-height-loose: var(--primitive-line-height-loose);

  /* Spacing */
  --spacing-0: var(--primitive-spacing-0);
  --spacing-0-5: var(--primitive-spacing-0-5);
  --spacing-1: var(--primitive-spacing-1);
  --spacing-1-5: var(--primitive-spacing-1-5);
  --spacing-2: var(--primitive-spacing-2);
  --spacing-2-5: var(--primitive-spacing-2-5);
  --spacing-3: var(--primitive-spacing-3);
  --spacing-3-5: var(--primitive-spacing-3-5);
  --spacing-4: var(--primitive-spacing-4);
  --spacing-5: var(--primitive-spacing-5);
  --spacing-6: var(--primitive-spacing-6);
  --spacing-7: var(--primitive-spacing-7);
  --spacing-8: var(--primitive-spacing-8);
  --spacing-9: var(--primitive-spacing-9);
  --spacing-10: var(--primitive-spacing-10);
  --spacing-11: var(--primitive-spacing-11);
  --spacing-12: var(--primitive-spacing-12);

  /* Radius */
  --radius-none: var(--primitive-radius-none);
  --radius-sm: var(--primitive-radius-sm);
  --radius-base: var(--primitive-radius-base);
  --radius-md: var(--primitive-radius-md);
  --radius-lg: var(--primitive-radius-lg);
  --radius-xl: var(--primitive-radius-xl);
  --radius-2xl: var(--primitive-radius-2xl);
  --radius-3xl: var(--primitive-radius-3xl);
  --radius-4xl: var(--primitive-radius-4xl);
  --radius-5xl: var(--primitive-radius-5xl);
  --radius-full: var(--primitive-radius-full);

  /* Shadow */
  --shadow-none: var(--primitive-shadow-none);
  --shadow-sm: var(--primitive-shadow-sm);
  --shadow-base: var(--primitive-shadow-base);
  --shadow-md: var(--primitive-shadow-md);
  --shadow-lg: var(--primitive-shadow-lg);
  --shadow-xl: var(--primitive-shadow-xl);
  --shadow-2xl: var(--primitive-shadow-2xl);
  --shadow-inner: var(--primitive-shadow-inner);
  --shadow-focus: var(--primitive-shadow-focus);

  /* Border Width */
  --border-width-0: var(--primitive-border-width-0);
  --border-width-1: var(--primitive-border-width-1);
  --border-width-2: var(--primitive-border-width-2);
  --border-width-3: var(--primitive-border-width-3);
  --border-width-4: var(--primitive-border-width-4);
  --border-width-8: var(--primitive-border-width-8);

  /* Opacity */
  --opacity-0: var(--primitive-opacity-0);
  --opacity-5: var(--primitive-opacity-5);
  --opacity-10: var(--primitive-opacity-10);
  --opacity-20: var(--primitive-opacity-20);
  --opacity-25: var(--primitive-opacity-25);
  --opacity-30: var(--primitive-opacity-30);
  --opacity-40: var(--primitive-opacity-40);
  --opacity-50: var(--primitive-opacity-50);
  --opacity-60: var(--primitive-opacity-60);
  --opacity-70: var(--primitive-opacity-70);
  --opacity-75: var(--primitive-opacity-75);
  --opacity-80: var(--primitive-opacity-80);
  --opacity-90: var(--primitive-opacity-90);
  --opacity-95: var(--primitive-opacity-95);
  --opacity-100: var(--primitive-opacity-100);

  /* Z Index */
  --z-index-auto: var(--primitive-z-index-auto);
  --z-index-0: var(--primitive-z-index-0);
  --z-index-10: var(--primitive-z-index-10);
  --z-index-20: var(--primitive-z-index-20);
  --z-index-30: var(--primitive-z-index-30);
  --z-index-40: var(--primitive-z-index-40);
  --z-index-50: var(--primitive-z-index-50);
  --z-index-dropdown: var(--primitive-z-index-dropdown);
  --z-index-sticky: var(--primitive-z-index-sticky);
  --z-index-fixed: var(--primitive-z-index-fixed);
  --z-index-modal-backdrop: var(--primitive-z-index-modal-backdrop);
  --z-index-modal: var(--primitive-z-index-modal);
  --z-index-popover: var(--primitive-z-index-popover);
  --z-index-tooltip: var(--primitive-z-index-tooltip);

  /* Transition */
  --transition-fast: var(--primitive-transition-fast);
  --transition-base: var(--primitive-transition-base);
  --transition-slow: var(--primitive-transition-slow);
  --transition-slower: var(--primitive-transition-slower);

  /* Breakpoint */
  --breakpoint-sm: var(--primitive-breakpoint-sm);
  --breakpoint-md: var(--primitive-breakpoint-md);
  --breakpoint-lg: var(--primitive-breakpoint-lg);
  --breakpoint-xl: var(--primitive-breakpoint-xl);
  --breakpoint-2xl: var(--primitive-breakpoint-2xl);

}

/* ============================================================
   CSS RESET
   现代浏览器重置，消除默认样式差异。
   仅对引入 main.css 的页面生效。
   ============================================================ */

/* 盒模型：所有元素及伪元素统一 border-box */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 清除外边距与内边距，由组件自行设置 */
* {
  margin: 0;
  padding: 0;
}

/* 防止 iOS 横屏时字号自动缩放 */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* body 基础排版 */
body {
  min-height: 100vh;
  background: var(--color-bg-page);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* 媒体元素：块级显示，防止溢出容器 */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/* 表单元素：继承页面字体与颜色 */
input, button, textarea, select {
  font: inherit;
  color: inherit;
}

/* 标题：重置为继承值，由组件控制字号字重 */
h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
}

/* 链接：继承颜色，去掉默认下划线（hover 由组件控制） */
a {
  color: inherit;
  text-decoration: none;
}

/* 列表：去掉默认项目符号 */
ul, ol {
  list-style: none;
}

/* 表格：合并边框，清除间距 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* 按钮：去掉默认背景与边框 */
button {
  background: none;
  border: none;
  cursor: pointer;
}

/* 文本域：仅允许垂直缩放 */
textarea {
  resize: vertical;
}

/* [hidden] 属性：确保隐藏生效（覆盖其他 display 声明） */
[hidden] {
  display: none !important;
}

/* 选中文本高亮 */
::selection {
  background: var(--color-brand-light);
  color: var(--color-text-primary);
}