@import './variables.css' layer(theme);

@layer base {
  :root {
    font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
    line-height: 1.5em;
    font-weight: 400;

    width: 100vw;
    height: 100vh;
    overflow: hidden;
    user-select: none;

    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;

    --color-primary: var(--color-yejuzi);
    --color-accent: oklch(from var(--color-primary) calc(l + (1 - l) * 0.3) c calc(h + 180 + 30));
    --color-neutral: var(--color-jianfengzi);
    --color-typo-light: var(--color-meihei);
    --color-typo-dark: var(--color-yudubai);

    --color-danger: var(--color-hedinghong);
    --color-warn: var(--color-furonghong);
    --color-success: var(--color-gongdianlv);
    --color-info: var(--color-pinlan);

    --color-fg: light-dark(var(--color-meihei), var(--color-yudubai));
    --color-bg: light-dark(var(--color-yuebai), var(--color-qihei));
  }

  :where(html, body) {
    color-scheme: dark;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    &[data-theme='light'] {
      color-scheme: light;
    }
    &[data-theme='dark'] {
      color-scheme: dark;
    }
  }

  body {
    color: var(--color-fg);
    background-color: var(--color-bg);
  }

  :where(h1, h2, h3, h4, h5, h6, p) {
    margin: 0;
    padding: 0;
  }

  :where(menu) {
    margin: 0;
  }

  #root {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
}