/* 定义应用原始色板 */
@layer theme {
  :root {
    --font-family: 'Inter', system-ui, Avenir, Helvetica, Arial, sans-serif;

    --color-light-fg: hsla(0, 0%, 0%, 0.87);
    --color-light-bg: hsla(0, 0%, 86%, 0.85);
    --color-dark-fg: hsla(0, 0%, 100%, 0.87);
    --color-dark-bg: hsla(0, 0%, 14%, 0.85);
    --color-slate: hsl(215, 19%, 35%);
    --color-gray: hsl(0, 0%, 52%);
    --color-zinc: hsl(240, 5%, 34%);
    --color-neutral: hsl(0, 0%, 32%);
    --color-stone: hsl(33, 5%, 32%);
    --color-bright-blue: hsl(217, 100%, 50%);
    --color-blue: hsl(233, 73%, 45%);
    --color-yellow: hsl(57, 69%, 52%);
    --color-bright-green: hsl(99, 67%, 52%);
    --color-green: hsl(140, 72%, 52%);
    --color-tomato: hsl(21, 88%, 52%);
    --color-bright-red: hsl(341, 88%, 52%);
    --color-red: hsl(0, 89%, 52%);
    --color-bright-orange: hsl(40, 100%, 51%);
    --color-orange: hsl(32, 98%, 51%);
    --color-violet: hsl(267, 70%, 52%);
    --color-pink: hsl(302, 88%, 52%);
    --color-blue-gray: hsl(228, 11%, 44%);
    --color-indigo: hsl(230, 33%, 45%);
    --color-white: hsl(0, 0%, 100%);
    --color-black: hsl(0, 0%, 0%);

    /* chinese colors */
    /* theme colors */
    --color-yuanweilan: hsl(197, 80%, 40%);
    --color-pinlan: hsl(207, 61%, 43%);
    --color-cuilan: hsl(188, 71%, 41%);
    --color-xinglan: hsl(206, 38%, 69%);
    --color-mantianxingzi: hsl(238, 46%, 33%);
    --color-yuhong: hsl(356, 49%, 52%);
    --color-hedinghong: hsl(4, 80%, 46%);
    --color-jidanhuang: hsl(42, 97%, 53%);
    --color-furonghong: hsl(17, 94%, 61%);
    --color-baoshilv: hsl(117, 49%, 46%);
    --color-gongdianlv: hsl(146, 62%, 33%);
    --color-bohelv: hsl(148, 60%, 31%);
    --color-dancuilv: hsl(125, 28%, 83%);
    --color-youlv: hsl(118, 26%, 19%);
    --color-jingtailan: hsl(207, 65%, 43%);
    --color-yejuzi: hsl(240, 25%, 43%);
    /* background colors */
    --color-yunshanlv: hsl(146, 25%, 11%);
    --color-wumeizi: hsl(305, 22%, 10%);
    --color-yanhanlan: hsl(222, 31%, 11%);
    --color-zise: hsl(0, 20%, 24%);
    --color-meihei: hsl(18, 21%, 16%);
    --color-qihei: hsl(231, 23%, 11%);
    --color-mangconglv: hsl(162, 20%, 10%);
    --color-hujishenglv: hsl(130, 7%, 18%);
    /* neutral colors */
    --color-yuanshanzi: hsl(240, 11%, 82%);
    --color-jianfengzi: hsl(280, 7%, 24%);
    --color-xinhui: hsl(351, 3%, 46%);
    --color-xuanqing: hsl(246, 14%, 27%);
    --color-yaqing: hsl(197, 10%, 29%);
    --color-mose: hsl(205, 15%, 37%);
    --color-lvhui: hsl(163, 20%, 24%);
    --color-xiayunhui: hsl(184, 8%, 41%);
    --color-yuzanlv: hsl(148, 26%, 72%);
    --color-yueyingbai: hsl(165, 3%, 76%);
    --color-yudubai: hsl(42, 38%, 95%);
    --color-qianbai: hsl(240, 15%, 95%);
    --color-yuebai: hsl(189, 87%, 94%);

    --spacing: 2px;
    --spacing-n: calc(var(--spacing) * 0);
    --spacing-xxs: calc(var(--spacing) * 1);
    --spacing-xs: calc(var(--spacing) * 2);
    --spacing-s: calc(var(--spacing) * 3);
    --spacing-m: calc(var(--spacing) * 4);
    --spacing-l: calc(var(--spacing) * 6);
    --spacing-xl: calc(var(--spacing) * 8);
    --spacing-xxl: calc(var(--spacing) * 12);

    --border-radius: 2px;
    --border-radius-n: calc(var(--border-radius) * 0);
    --border-radius-xxs: calc(var(--border-radius) * 1);
    --border-radius-xs: calc(var(--border-radius) * 2);
    --border-radius-s: calc(var(--border-radius) * 3);
    --border-radius-m: calc(var(--border-radius) * 4);
    --border-radius-l: calc(var(--border-radius) * 6);
    --border-radius-xl: calc(var(--border-radius) * 8);
    --border-radius-xxl: calc(var(--border-radius) * 12);

    --font-size: 1rem;
    --font-size-xxs: calc(var(--font-size) * 0.5);
    --font-size-xs: calc(var(--font-size) * 0.65);
    --font-size-s: calc(var(--font-size) * 0.8);
    --font-size-m: calc(var(--font-size) * 1);
    --font-size-l: calc(var(--font-size) * 1.25);
    --font-size-xl: calc(var(--font-size) * 1.5);
    --font-size-xxl: calc(var(--font-size) * 2);

    --color-primary: var(--color-bright-blue);
    --color-primary-hover: oklch(from var(--color-primary) calc(l + (1 - l) * 0.3) c h);
    --color-primary-active: oklch(from var(--color-primary) calc(l * 0.8) c h);
    --color-primary-focus: oklch(from var(--color-primary) calc(l + (1 - l) * 0.5) c h);
    --color-primary-disabled: oklch(from var(--color-primary) calc(l * 0.8) calc(c * 0.1) h);

    --color-secondary: oklch(from var(--color-primary) l c calc(h + 30));
    --color-secondary-hover: oklch(from var(--color-secondary) calc(l + (1 - l) * 0.3) c h);
    --color-secondary-active: oklch(from var(--color-secondary) calc(l * 0.8) c h);
    --color-secondary-focus: oklch(from var(--color-secondary) calc(l + (1 - l) * 0.5) c h);
    --color-secondary-dissabled: oklch(from var(--color-secondary) calc(l * 0.8) calc(c * 0.1) h);

    --color-accent: oklch(from var(--color-primary) l c calc(h + 180 - 30));
    --color-accent-hover: oklch(from var(--color-accent) calc(l + (1 - l) * 0.3) c h);
    --color-accent-active: oklch(from var(--color-accent) calc(l * 0.8) c h);
    --color-accent-focus: oklch(from var(--color-accent) calc(l + (1 - l) * 0.5) c h);
    --color-accent-disabled: oklch(from var(--color-accent) calc(l * 0.8) calc(c * 0.1) h);

    --color-neutral: var(--color-slate);
    --color-neutral-hover: oklch(from var(--color-neutral) calc(l + (1 - l) * 0.3) c h);
    --color-neutral-active: oklch(from var(--color-neutral) calc(l * 0.8) c h);
    --color-neutral-focus: oklch(from var(--color-neutral) calc(l + (1 - l) * 0.5) c h);
    --color-neutral-disabled: oklch(from var(--color-neutral) calc(l * 0.8) calc(c * 0.1) h);

    --color-danger: var(--color-red);
    --color-danger-hover: oklch(from var(--color-danger) calc(l + (1 - l) * 0.3) c h);
    --color-danger-active: oklch(from var(--color-danger) calc(l * 0.8) c h);
    --color-danger-focus: oklch(from var(--color-danger) calc(l + (1 - l) * 0.5) c h);
    --color-danger-disabled: oklch(from var(--color-danger) calc(l * 0.8) calc(c * 0.1) h);

    --color-warn: var(--color-orange);
    --color-warn-hover: oklch(from var(--color-warn) calc(l + (1 - l) * 0.3) c h);
    --color-warn-active: oklch(from var(--color-warn) calc(l * 0.8) c h);
    --color-warn-focus: oklch(from var(--color-warn) calc(l + (1 - l) * 0.5) c h);
    --color-warn-disabled: oklch(from var(--color-warn) calc(l * 0.8) calc(c * 0.1) h);

    --color-success: var(--color-green);
    --color-success-hover: oklch(from var(--color-success) calc(l + (1 - l) * 0.3) c h);
    --color-success-active: oklch(from var(--color-success) calc(l * 0.8) c h);
    --color-success-focus: oklch(from var(--color-success) calc(l + (1 - l) * 0.5) c h);
    --dolor-success-disabled: oklch(from var(--color-success) calc(l * 0.8) calc(c * 0.1) h);

    --color-info: var(--color-indigo);
    --color-info-hover: oklch(from var(--color-info) calc(l + (1 - l) * 0.3) c h);
    --color-info-active: oklch(from var(--color-info) calc(l * 0.8) c h);
    --color-info-focus: oklch(from var(--color-info) calc(l + (1 - l) * 0.5) c h);
    --color-info-disabled: oklch(from var(--color-info) calc(l * 0.8) calc(c * 0.1) h);

    --color-border: oklch(from var(--color-neutral) calc(l + (1 - l) * 0.3) c h);
    --color-border-focused: oklch(from var(--color-border) calc(l + (1 - l) * 0.2) c h);

    --color-link: var(--color-blue);
    --color-link-hover: oklch(from var(--color-link) calc(l + (1 - l) * 0.3) c h);
    --color-link-active: oklch(from var(--color-link) calc(l * 0.8) c h);
    --color-link-focus: oklch(from var(--color-link) calc(l + (1 - l) * 0.5) c h);
    --color-link-disabled: oklch(from var(--color-link) calc(l * 0.8) calc(c * 0.1) h);

    --color-typo-light: var(--color-xuanqing);
    --color-typo-light-lightness: oklch(from var(--color-typo-light) calc(l + (1 - l) * 0.5) c h);
    --color-typo-light-darkness: oklch(from var(--color-typo-light) calc(l * 0.5) c h);

    --color-typo-dark: var(--color-yudubai);
    --color-typo-dark-lightness: oklch(from var(--color-typo-dark) calc(l + (1 - l) * 0.5) c h);
    --color-typo-dark-darkness: oklch(from var(--color-typo-dark) calc(l * 0.5) c h);
  }
}