:root {
  /** 弹出层的基础层级 **/
  --popup-z-index: 2000;
  --font-family:
    -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, 'Helvetica Neue',
    arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol', 'Noto Color Emoji';

  /* Default background color of <body />...etc */
  --background: 0 0% 100%;

  /* 主体区域背景色 */
  --background-deep: 216 20.11% 95.47%;
  --foreground: 210 6% 21%;

  /* Background color for <Card /> */
  --card: 0 0% 100%;
  --card-foreground: 222.2 84% 4.9%;

  /* Background color for popovers such as <DropdownMenu />, <HoverCard />, <Popover /> */
  --popover: 0 0% 100%;
  --popover-foreground: 222.2 84% 4.9%;

  /* Muted backgrounds such as <TabsList />, <Skeleton /> and <Switch /> */

  /* --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%; */

  --muted: 240 4.8% 95.9%;
  --muted-foreground: 240 3.8% 46.1%;

  /* 主题颜色 */

  --primary: 212 100% 45%;
  --primary-foreground: 0 0% 98%;

  /* Used for destructive actions such as <Button variant="destructive"> */

  --destructive: 359.33 100% 65.1%;
  --destructive-foreground: 0 0% 98%;

  /* Used for success actions such as <message> */

  --info: 240, 5%, 96%;
  --info-foreground: 220, 4%, 58%;

  /* Used for success actions such as <message> */

  --success: 144 57% 58%;
  --success-foreground: 0 0% 98%;

  /* Used for warning actions such as <message> */

  --warning: 42 84% 61%;
  --warning-foreground: 0 0% 98%;

  /* Secondary colors for <Button /> */

  --secondary: 240 5% 96%;
  --secondary-foreground: 240 6% 10%;

  /* Used for accents such as hover effects on <DropdownMenuItem>, <SelectItem>...etc */
  --accent: 240 5% 96%;
  --accent-dark: 216 14% 93%;
  --accent-darker: 216 11% 91%;
  --accent-lighter: 240 0% 98%;
  --accent-hover: 200deg 10% 90%;
  --accent-foreground: 240 6% 10%;

  /* Darker color */
  --heavy: 192deg 9.43% 89.61%;
  --heavy-foreground: var(--accent-foreground);

  /* Default border color */
  --border: 240 5.9% 90%;

  /* Border color for inputs such as <Input />, <Select />, <Textarea /> */
  --input: 240deg 5.88% 90%;
  --input-placeholder: 217 10.6% 65%;
  --input-background: 0 0% 100%;

  /* Used for focus ring */
  --ring: 222.2 84% 4.9%;

  /* Border radius for card, input and buttons */
  --radius: 0.5rem;

  /* ============= custom ============= */

  /* 遮罩颜色 */
  --overlay: 0 0% 0% / 45%;
  --overlay-content: 0 0% 95% / 45%;

  /* 基本文字大小 */
  --font-size-base: 14px;
  --menu-font-size: var(--font-size-base);

  /* 后台紧凑密度 */
  --density-button-height: 30px;
  --density-button-sm-height: 24px;
  --density-menu-font-size: 14px;
  --density-menu-icon-size: 16px;
  --density-menu-indent: 12px;
  --density-menu-item-height: 40px;
  --density-sub-menu-item-height: 36px;
  --density-pagination-height: 28px;
  --density-resource-image-size: 42px;
  --density-table-body-font-size: 13px;
  --density-table-cell-padding-x: 12px;
  --density-table-fixed-cell-padding-x: 6px;
  --density-table-header-font-size: 13px;
  --density-table-header-height: 42px;
  --density-table-row-height: 54px;

  /* =============component & UI============= */

  /* menu */
  --sidebar: 0 0% 100%;
  --sidebar-deep: 0 0% 100%;
  --menu: var(--sidebar);

  /* header */
  --header: 0 0% 100%;

  accent-color: var(--primary);
  color-scheme: light;
}

.light {
  /* Default background color of <body />...etc */
  --background: 0 0% 100%;

  /* 主体区域背景色 */
  --background-deep: 216 20.11% 95.47%;
  --foreground: 210 6% 21%;

  /* Background color for <Card /> */
  --card: 0 0% 100%;
  --card-foreground: 222.2 84% 4.9%;

  /* Background color for popovers such as <DropdownMenu />, <HoverCard />, <Popover /> */
  --popover: 0 0% 100%;
  --popover-foreground: 222.2 84% 4.9%;

  /* Muted backgrounds such as <TabsList />, <Skeleton /> and <Switch /> */
  --muted: 240 4.8% 95.9%;
  --muted-foreground: 240 3.8% 46.1%;

  /* 主题颜色 */
  --primary-foreground: 0 0% 98%;

  /* Used for destructive actions such as <Button variant="destructive"> */
  --destructive-foreground: 0 0% 98%;

  /* Used for success actions such as <message> */
  --info-foreground: 220, 4%, 58%;
  --success-foreground: 0 0% 98%;

  /* Used for warning actions such as <message> */
  --warning-foreground: 0 0% 98%;

  /* Secondary colors for <Button /> */
  --secondary: 240 5% 96%;
  --secondary-foreground: 240 6% 10%;

  /* Used for accents such as hover effects on <DropdownMenuItem>, <SelectItem>...etc */
  --accent: 240 5% 96%;
  --accent-dark: 216 14% 93%;
  --accent-darker: 216 11% 91%;
  --accent-lighter: 240 0% 98%;
  --accent-hover: 200deg 10% 90%;
  --accent-foreground: 240 6% 10%;

  /* Darker color */
  --heavy: 192deg 9.43% 89.61%;
  --heavy-foreground: var(--accent-foreground);

  /* Default border color */
  --border: 240 5.9% 90%;

  /* Border color for inputs such as <Input />, <Select />, <Textarea /> */
  --input: 240deg 5.88% 90%;
  --input-placeholder: 217 10.6% 65%;
  --input-background: 0 0% 100%;

  /* Used for focus ring */
  --ring: 222.2 84% 4.9%;

  /* ============= custom ============= */

  /* 遮罩颜色 */
  --overlay: 0 0% 0% / 45%;
  --overlay-content: 0 0% 95% / 45%;

  /* =============component & UI============= */

  /* menu */
  --sidebar: 0 0% 100%;
  --sidebar-deep: 0 0% 100%;
  --menu: var(--sidebar);

  /* header */
  --header: 0 0% 100%;

  accent-color: var(--primary);
  color-scheme: light;
}
