:root {
  color-scheme: dark;

  --cuevlet-accent: var(--violet-5);
  --cuevlet-accent-hover: var(--violet-6);
  --cuevlet-accent-pressed: var(--violet-7);
  --cuevlet-text-on-accent: white;

  --cuevlet-success: var(--green-4);
  --cuevlet-warning: var(--yellow-4);
  --cuevlet-danger: var(--red-4);
  --cuevlet-info: var(--cuevlet-accent);

  --cuevlet-font-body:
    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    "Hiragino Sans", "Yu Gothic UI", "Noto Sans JP", sans-serif;
  --cuevlet-font-mono:
    ui-monospace, SFMono-Regular, Menlo, Consolas,
    "Noto Sans Mono CJK JP", monospace;

  --cuevlet-duration-fast: 120ms;
  --cuevlet-duration-normal: 240ms;
  --cuevlet-duration-slow: 400ms;

  --bp-mobile: 768px;

  --cuevlet-page-padding: var(--size-4, 1rem);

  --cuevlet-surface-bg: var(--gray-11);
  --cuevlet-surface-page: var(--gray-11);
  --cuevlet-surface-card: var(--gray-10);
  --cuevlet-surface-modal: var(--gray-9);
  --cuevlet-text-primary: var(--gray-1);
  --cuevlet-text-muted: var(--gray-5);
  --cuevlet-border: var(--gray-8);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --cuevlet-duration-fast: 0ms;
    --cuevlet-duration-normal: 0ms;
    --cuevlet-duration-slow: 0ms;
  }
}

@media (max-width: 767.98px), (orientation: landscape) and (max-height: 500px) {
  :root {
    
    --cuevlet-page-padding: 0.75rem;
  }
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--cuevlet-surface-bg);
  color: var(--cuevlet-text-primary);
  font-family: var(--cuevlet-font-body);
  font-size: var(--font-size-1);
  line-height: var(--font-lineheight-3);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

:focus-visible {
  outline: 2px solid var(--cuevlet-accent);
  outline-offset: 2px;
}