@import "rehype-callouts/theme/vitepress";
@import "./common.css";
@import "./tab.css";

@layer base, components;

@layer base {
  :root {
    --svem-radius: var(--radius, 0.5rem);
    --svem-spacing: var(--spacing, 0.25rem);
    --svem-text-base: calc(var(--text-base, 1rem) * 0.875);
    --svem-color-background: var(--color-background, #ffffff);
    --svem-color-foreground: var(--color-foreground, #020618);
    --svem-color-muted: var(--color-muted, #f5f4f4);
    --svem-color-muted-foreground: var(--color-muted-foreground, #71717b);
    --svem-color-border: var(--color-border, #e4e4e7ff);
    --svem-color-code: #eff1f5;
    --svem-color-code-foreground: #4c4f69;
    --svem-color-diff-add: #e6ffed;
    --svem-color-diff-add-foreground: #2c662d;
    --svem-color-diff-remove: #ffeef0;
    --svem-color-diff-remove-foreground: #9f3a38;
    --svem-shadow: var(--shadow, 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1));
  }

  html.dark {
    --svem-color-background: var(--color-background, #020618);
    --svem-color-foreground: var(--color-foreground, #fcf9fa);
    --svem-color-muted: var(--color-muted, #2a2627);
    --svem-color-muted-foreground: var(--color-muted-foreground, #9f9fa9);
    --svem-color-code-foreground: #cdd6f4;
    --svem-color-code: #1e1e2e;
    --shiki-dark: #cdd6f4;
    --shiki-dark-bg: #1e1e2e;
  }

  .hidden {
    display: none;
  }
}