assetx/landingpage/styles/design-system.css

/**
 * Design System - CSS Variables
 *
 * 定义 Light 和 Dark 模式的 CSS 变量
 * 使用 [data-theme] 属性选择器来切换主题
 */

/* ========================================
   Light Mode (Default)
   ======================================== */

:root {
  /* Text Colors */
  --text-primary: #111827;
  --text-secondary: #4b5563;
  --text-tertiary: #9ca1af;
  --text-inverse: #ffffff;
  --text-disabled: #d1d5db;

  /* Background Colors */
  --bg-base: #ffffff;
  --bg-subtle: #f9fafb;
  --bg-surface: #ffffff;
  --bg-elevated: #f3f4f6;
  --bg-overlay: rgba(0, 0, 0, 0.5);

  /* Border Colors */
  --border-normal: #e5e7eb;
  --border-subtle: #f3f4f6;
  --border-strong: #d1d5db;

  /* Accent Colors */
  --accent-green: #10b981;
  --accent-green-bg: #e1f8ec;
  --accent-blue: #1447e6;
  --accent-blue-bg: #ebf2ff;
  --accent-red: #ef4444;
  --accent-yellow: #f59e0b;

  /* Special Colors */
  --special-black: #000000;
  --special-white: #ffffff;
}

/* ========================================
   Dark Mode
   ======================================== */

[data-theme="dark"] {
  /* Text Colors */
  --text-primary: #fafafa;
  --text-secondary: #a1a1aa;
  --text-tertiary: #71717a;
  --text-inverse: #111827;
  --text-disabled: #71717a;

  /* Background Colors */
  --bg-base: #0a0a0a;
  --bg-subtle: #0a0a0a;
  --bg-surface: #18181b;
  --bg-elevated: #27272a;
  --bg-overlay: rgba(0, 0, 0, 0.7);

  /* Border Colors */
  --border-normal: #27272a;
  --border-subtle: #18181b;
  --border-strong: #3f3f46;

  /* Accent Colors */
  --accent-green: #10b981;
  --accent-green-bg: rgba(16, 185, 129, 0.15);
  --accent-blue: #1447e6;
  --accent-blue-bg: rgba(20, 71, 230, 0.15);
  --accent-red: #ef4444;
  --accent-yellow: #f59e0b;

  /* Special Colors */
  --special-black: #000000;
  --special-white: #ffffff;
}

/* ========================================
   Typography - Font Sizes
   ======================================== */

:root {
  /* Serif Display */
  --serif--display--giant--bold: 100px;
  --serif--display--giant--regular: 100px;
  --serif--display--hero--bold: 64px;
  --serif--display--hero--regular: 64px;
  --serif--display--title-1--bold: 48px;
  --serif--display--title-1--regular: 48px;
  --serif--display--title-2--bold: 32px;
  --serif--display--title-2--regular: 32px;
  --serif--display--quote--bold: 24px;
  --serif--display--quote--regular: 24px;
  --serif--display--text--bold: 16px;
  --serif--display--text--regular: 16px;

  /* Sans Heading */
  --sans--heading--h1--bold: 48px;
  --sans--heading--h1--medium: 48px;
  --sans--heading--h1--regular: 48px;
  --sans--heading--h2--bold: 32px;
  --sans--heading--h2--medium: 32px;
  --sans--heading--h2--regular: 32px;
  --sans--heading--h3--bold: 24px;
  --sans--heading--h3--medium: 24px;
  --sans--heading--h3--regular: 24px;
  --sans--heading--h4--bold: 20px;
  --sans--heading--h4--medium: 20px;
  --sans--heading--h4--regular: 20px;

  /* Sans Body */
  --sans--body--large--bold: 18px;
  --sans--body--large--medium: 18px;
  --sans--body--large--regular: 18px;
  --sans--body--default--bold: 16px;
  --sans--body--default--medium: 16px;
  --sans--body--default--regular: 16px;
  --sans--body--small--bold: 14px;
  --sans--body--small--medium: 14px;
  --sans--body--small--regular: 14px;

  /* Sans Caption */
  --sans--caption--tiny--bold: 12px;
  --sans--caption--tiny--medium: 12px;
  --sans--caption--tiny--regular: 12px;
  --sans--caption--minuscule--bold: 10px;
  --sans--caption--minuscule--medium: 10px;
  --sans--caption--minuscule--regular: 10px;

  /* Mono Numeric */
  --mono--numeric--giant--extra-bold: 48px;
  --mono--numeric--giant--bold: 48px;
  --mono--numeric--giant--medium: 48px;
  --mono--numeric--giant--regular: 48px;
  --mono--numeric--huge--extra-bold: 32px;
  --mono--numeric--huge--bold: 32px;
  --mono--numeric--huge--medium: 32px;
  --mono--numeric--huge--regular: 32px;
  --mono--numeric--large--extra-bold: 24px;
  --mono--numeric--large--bold: 24px;
  --mono--numeric--large--medium: 24px;
  --mono--numeric--large--regular: 24px;
  --mono--numeric--default--extra-bold: 16px;
  --mono--numeric--default--bold: 16px;
  --mono--numeric--default--medium: 16px;
  --mono--numeric--default--regular: 16px;

  /* Mono Code */
  --mono--code--small--extra-bold: 14px;
  --mono--code--small--bold: 14px;
  --mono--code--small--medium: 14px;
  --mono--code--small--regular: 14px;
  --mono--code--tiny--extra-bold: 12px;
  --mono--code--tiny--bold: 12px;
  --mono--code--tiny--medium: 12px;
  --mono--code--tiny--regular: 12px;
  --mono--code--minuscule--extra-bold: 10px;
  --mono--code--minuscule--bold: 10px;
  --mono--code--minuscule--medium: 10px;
  --mono--code--minuscule--regular: 10px;
}

/* ========================================
   Utility Classes (Optional)
   ======================================== */

/*
 * 如果需要，可以定义一些通用的 utility classes
 * 但主要还是通过 Tailwind 的扩展配置来使用这些变量
 */